WEB快速學習（三）
阿新 • • 發佈：2018-12-10
使用JS完成頁面定時彈出廣告
JS開發的步驟:
1. 確定事件
2. 事件要觸發函式,所以我們是要宣告函式
3. 函式裡面通常是去做一些互動才操作, 彈框, 修改頁面內容,動態去新增一些東西1. 完成頁面定時彈出廣告
1.1 需求分析
一般網頁，當我們剛開啟的時候，它會5秒之後，顯示一個廣告，讓我們看5秒鐘，然後他的廣告就自動消失了！
1.2 技術分析
- 定時器
- setInterval : 每隔多少毫秒執行一次函式
- setTimeout: 多少毫秒之後執行一次函式
- clearInterval
- clearTimeout
- 顯示廣告 img.style.display = "block"
- 隱藏廣告 img.style.display = "none"
1.3 步驟分析
- 確定事件: 頁面載入完成的事件 onload
- 事件要觸發函式: init()
- init函式裡面做一件事:
- 啟動一個定時器 : setTimeout()
- 顯示一個廣告
- 再去開啟一個定時5秒鐘之後,關閉廣告
1.4 程式碼實現
<script> function init(){ setTimeout("showAD()",3000); } function showAD(){ //首先要獲取要操作的img var img = document.getElementById("img1"); //顯示廣告 img.style.display = "block"; //再開啟定時器,關閉廣告 setTimeout("hideAD()",3000); } function hideAD(){ //首先要獲取要操作的img var img = document.getElementById("img1"); //隱藏廣告 img.style.display = "none"; } </script>
1.5擴充套件
- JS的引入方式
0. 輪播圖自動播放
需求:
有一組圖片, 每隔3秒鐘,就去切換一張,最終是一直在不停切換
技術分析:
切換圖片:
每個三秒鐘做一件事:
步驟分析:
1. 確定事件: 文件載入完成的事件 onload
2. 事件要觸發 : init()
3. 函式裡面要做一些事情:(通常會去操作元素,提供互動)
1. 開啟定時器: 執行切換圖片的函式 changeImg()
4. changeImg()
1. 獲得要切換圖片的那個元素<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 自動輪播圖片 </title> <script> var num=0; function init(){ setInterval('changImg()',1000); } function changImg(){ var img=document.getElementById("img1"); var Number=num%4+1; img.src="../img/"+Number+".jpg"; num=num+1; } </script> </head> <body onload="init()"> <img src="../img/1.jpg" width="100%" id="img1"/> </body> </html>
使用JS完成表單的校驗
2. 完成完成表單的校驗
2.1 需求分析
昨天我們做了一個簡單的表單校驗，每當使用者輸入出錯的時候，我們是彈出了一個對話方塊，提示使用者去修改。這樣的使用者體驗效果非常不好好。我們今天就是需要來對他進行一個修改，當用戶輸入資訊有問題的時候，我們就再輸入框的後面給他一個友好提示。
2.2 技術分析
【HTML中innerHTML屬性】
【JS中的常用事件】
onfocus 事件: 獲得焦點事件
onblur : 失去焦點
onkeyup : 按鍵擡起事件
2.3 步驟分析
2.4 程式碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
表單校驗
</title>
<link rel="stylesheet" href="../css/div.css" />
<script type="text/javascript" src="../js/Check.js"></script>
</head>
<body>
<div id="div">
<p>True mastery of any skill takes a lifetime. 對任何技能的掌握都需要一生的刻苦操練。</p>
</div>
<div id="zhuce">
<table id="table" >
<td>
<form action="../01-自動輪播圖片/自動輪播圖片.html" onsubmit="return Submint()">
<table align="center">
<tr>
<td colspan="3" align="center">
<font color="#000000" size="6" face="仿宋">登錄檔</font>
</td>
</tr>
<tr>
<!--onblur 事件會在物件失去焦點時發生。 onfocus 事件在物件獲得焦點時發生 -->
<td>USER_NAME</td>
<td><input type="text" id="username" onfocus="Tishi('jyname','提示：使用者名稱需要至少輸入5個字元哦') " onblur="CheckusernamePassworld('jyname','username')"/></td>
<td width="300px"><span id="jyname"></span></td>
</tr>
<tr>
<td>PASS_WORD</td>
<td><input type="password" id="password" onfocus="Tishi('jypass','提示：密碼需要至少輸入5個字元哦')" onblur="CheckusernamePassworld('jypass','password')"/></td>
<td width="300px"> <span id="jypass" ></span> </td>
</tr>
<tr>
<td>OK PASS_WORD</td>
<td><input type="password" id="repassword" onfocus="Tishi('jyrepass','提示：需要與上面密碼一樣哦')" onblur="Checkpassworld('password','repassword','jyrepass')"></td>
<td width="300px"><span id="jyrepass"></span></td>
</tr>
<tr>
<td>EMAIL</td>
<td><input type="email" id="emil" onfocus="Tishi('jyemail','提示：請輸入正確的郵箱號碼')" onblur="checkEmail('emil','jyemail')"/></td>
<td width="300px"><span id="jyemail" ></span></td>
</tr>
<tr>
<td>PHONE_NUMBER</td>
<td><input type="tel" onfocus="Tishi('jytel','提示：請輸入正確的手機號碼')"/></td>
<td width="300px"><span id="jytel" ></span></td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</form>
</td>
</table>
</div>
<div id="div">
<p>Sweat is the lubricant of success. 汗水是成功的潤滑劑。</p>
</div>
</body>
</html>
<!-- js -->
//提示資訊
function Tishi(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = "<font color=plum> ?"+msg+"</font>";
}
//檢查使用者的使用者名稱和使用者密碼是否夠五位，不夠則不讓通過
function CheckusernamePassworld(Spandata,IDdata){
//獲取使用者輸入的內容
var uValue = document.getElementById(IDdata).value;
var sapn =document.getElementById(Spandata);
if(uValue.length<5){
sapn.innerHTML="<font color='red'>? 請輸入至少五位數使用者名稱！</font>";
return false;
}else{
sapn.innerHTML="?";
return true;
}
}
//校驗確認密碼
function Checkpassworld(id1,id2,span){
var pass = document.getElementById(id1).value;
var repass =document.getElementById(id2).value;
var span=document.getElementById(span);
if(pass==repass){
span.innerHTML="<font color='green'>?</font>";
return true;
}else{
span.innerHTML="<font color='red'>? 兩次密碼輸入不一致</font>";
return false;
}
}
/*
用途：檢查輸入的Email信箱格式是否正確
輸入：strEmail：字串
返回：如果通過驗證返回true,否則返回false
*/
function checkEmail(Email,Span)
{
var emailReg = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if ( emailReg.test(document.getElementById(Email).value) ) {
document.getElementById(Span).innerHTML="?";
return true;
}
else {
document.getElementById(Span).innerHTML="<font color='red'>? 您輸入的Email地址格式不正確</font>";
return false;
}
};
//總校驗，看錶單是否提交
function Submint(){
var booleanValue= checkEmail(Email,Span) && Checkpassworld(id1,id2,span) && CheckusernamePassworld(Spandata,IDdata) && Tishi(spanID,msg);
return booleanValue;
}
上午回顧:
定時器:
setInterval("test()",3000) 每隔多少毫秒執行一次函式
setTimeout("test()",3000) 多少毫秒之後執行一次函式
timerID 上面定時器呼叫之後
clearInterval()
clearTimeout()
切換圖片
img.src = "圖片路徑"
事件: 文件載入完成的事件 onload事件
顯示廣告 : img.style.display = "block"
隱藏廣告: img.style.display ="none"
引入一個外部js檔案
<script src="js檔案的路徑" type="text/javascript"/>
表單校驗中常用的事件:
獲得焦點事件: onfocus
失去焦點事件 onblur
按鍵擡起事件: onkeyup
JS開發步驟
1. 確定事件
2. 事件要觸發函式: 定義函式
3. 函式通常都要去做一些互動: 點選, 修改圖片, 動態修改innerHTML屬性... innerTEXT