需求：

當用戶名和密碼獲得焦點時，文本框背景顏色變黃，失去焦點時背景顏色恢復，

然后判斷是否為空，如果為空，則給出提示，同時文本框繼續獲得焦點。如圖所示。

單擊登錄按鈕后，判斷用戶名(admin)和密碼(123)是否正確。

若錯誤，則提示用戶名或密碼錯誤，

若正確，網頁跳轉到網頁www.baidu.com.

function p1(){

document.getElementById("q1").innerHTML="";

document.getElementById("q2").innerHTML="";

var name = document.getElementById("name").value;

var pw = document.getElementById("pw").value;

if(name==""){

document.getElementById("q1").innerHTML="用戶名不能為空！";

onover();

return;

}

if(name=="admin"){

if(pw=="123"){

window.location.href ='http://www.baidu.com';

}else{

document.getElementById("q2").innerHTML="密碼錯誤！";

}

}else{

document.getElementById("q1").innerHTML="用戶名錯誤！";

}

}

function onover(){

document.all.name.style.background="#EEEE00 ";

}

function onout(){

document.all.name.style.background="#fff";

}

function onover1(){

document.all.name.style.background="#fff";

document.all.pw.style.background="#EEEE00 ";

}

function onout1(){

document.all.pw.style.background="#fff";

}

.jdt{ width:400px; height:300px; border:1px #000 solid;}

#q1,#q2{color:red;}

用戶登錄

用戶名：

密 碼 ：

總結

以上是生活随笔為你收集整理的模拟计算机病毒效果 js,用户登录模拟效果（原生js实现）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。