輪播圖自動(dòng)播放
需求：有一組圖片靖榕，每隔3秒鐘僧界，就去切換一張，最終是一直不停的切換
技術(shù)分析：
切換圖片：
每個(gè)三秒鐘做一件事：
步驟分析：
1.確定事件：文檔加載完成的事件 onload
2.事件要觸發(fā)：init()
3.函數(shù)里面要做一些事情：（通常會(huì)去操作元素，提供交互）
1.開啟定時(shí)器：執(zhí)行切換圖片的函數(shù) changelmg()
4.changelmg()
1.獲得要切換圖片的那個(gè)元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 確定事件: 文檔加載完成的事件 onload
2. 事件要觸發(fā) : init()
3. 函數(shù)里面要做一些事情:(通常會(huì)去操作元素,提供交互)
1. 開啟定時(shí)器: 執(zhí)行切換圖片的函數(shù) changeImg()
4. changeImg()
1. 獲得要切換圖片的那個(gè)元素
-->
<script>
var index = 0;
function changeImg(){
//1. 獲得要切換圖片的那個(gè)元素
var img = document.getElementById("img1");
//計(jì)算出當(dāng)前要切換到第幾張圖片
var curIndex = index%3 + 1; //0,1,2
img.src="../img/"+curIndex+".jpg"; //1,2,3
//每切換完,索引加1
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>
完成頁面定時(shí)彈出廣告
需求分析
一般網(wǎng)頁，當(dāng)我們打開的時(shí)候郭宝，它在5之后，顯示一個(gè)廣告掷漱，讓我們看5秒鐘粘室，然后他的廣告就自動(dòng)消失了！
技術(shù)分析
- 定時(shí)器
- seInterval:每隔多少毫秒執(zhí)行一次函數(shù)
2.setTimeout:多少毫秒之后執(zhí)行一次函數(shù)
3.clearInterval
4,clearTimeout
- 顯示廣告 img.style.display = "block"
- 隱藏廣告 img.style.display = "none"
步驟分析
1.確定事件：頁面加載完成的事件 onload
2.事件要觸發(fā)函數(shù) init()
3.init函數(shù)里面做一件事情：
1.啟動(dòng)一個(gè)定時(shí)器：setTimeout()
2.顯示一個(gè)廣告
- 再去開啟一個(gè)定時(shí)5秒鐘之后卜范，關(guān)閉廣告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 確定事件: 頁面加載完成的事件 onload
2. 事件要觸發(fā)函數(shù): init()
3. init函數(shù)里面做一件事:
1. 啟動(dòng)一個(gè)定時(shí)器 : setTimeout()
2. 顯示一個(gè)廣告
1. 再去開啟一個(gè)定時(shí)5秒鐘之后,關(guān)閉廣告
-->
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要獲取要操作的img
var img = document.getElementById("img1");
//顯示廣告
img.style.display = "block";
//再開啟定時(shí)器,關(guān)閉廣告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要獲取要操作的img
var img = document.getElementById("img1");
//隱藏廣告
img.style.display = "none";
}
</script>
</head>
<body onload="init()">
<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window 對(duì)象是一個(gè)最頂層對(duì)象
// window.setInterval("alert('123');",2000);
function test(){
console.log("setInterval 調(diào)用了");
}
// setInterval("test()",2000);
// setTimeout("test()",2000);
var timerID;
function startDinshiqi(){
// timerID = setInterval("test()",2000);
timerID = setTimeout("test()",3000);
}
function stopDingshiqi(){
// clearInterval(timerID);
clearTimeout(timerID);
}
</script>
</head>
<body>
<input type="button" value="開啟定時(shí)器" onclick="startDinshiqi()" /><br />
<input type="button" value="取消定時(shí)器" onclick="stopDingshiqi()"/><br />
</body>
</html>
表單校驗(yàn)
需求：
當(dāng)用戶輸入信息有問題的時(shí)候育特，我們就在輸入框的后面給用戶一個(gè)友好提示。
技術(shù)分析：
【HTML中innerHTML屬性】
【JS中的常用事件】
onfocus事件：獲得焦點(diǎn)事件
onblur:失去焦點(diǎn)
onkeyup:按鍵抬起事件
步驟分析：
代碼實(shí)現(xiàn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
確認(rèn)事件
事件觸發(fā)函數(shù)
函數(shù)操作元素
校驗(yàn)用戶名
1. 當(dāng)用戶鼠標(biāo)移動(dòng)到輸入框中時(shí)候, 請(qǐng)給用戶一個(gè)提示
事件: 焦點(diǎn)事件 onfocus
觸發(fā)函數(shù)
函數(shù)里面要做一些事情
span 給用戶提示信息
2. 當(dāng)用戶鼠標(biāo)移開時(shí)候, 校驗(yàn)一下用戶輸入
事件: 失去焦點(diǎn) onblur
觸發(fā)函數(shù)
函數(shù)要干事情:
校驗(yàn)用戶輸入
得到用戶輸入的值
3. 當(dāng)用戶按鍵輸入抬起的時(shí)候, 校驗(yàn)一下用戶輸入
-->
<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
function checkUsername(){
/*
alert(this) 每一個(gè)函數(shù)中都隱藏著一個(gè)this指針, 指向的是當(dāng)前事件觸發(fā)對(duì)象
*/
var uValue = document.getElementById("username").value;
// alert(uValue);
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "對(duì)不起,太短啦!"
return false;
}else{
span.innerHTML = "恭喜您,夠用!"
return true;
}
}
function checkForm(){
var flag = checkUsername();
return flag;
}
</script>
</head>
<body>
<form action="../01-自動(dòng)輪播圖片/圖片自動(dòng)輪播.html" onsubmit="return checkForm()">
用戶名:<input type="text" id="username" onblur="checkUsername()" onfocus="showTips('span_username','用戶名長度不能小于6位')" /><span id="span_username"></span> <br />
<input type="submit" value="注冊" />
</form>
</body>
</html>
表單校驗(yàn)demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 確定事件 : onfocus
2. 事件要驅(qū)動(dòng)函數(shù)
3. 函數(shù)要干一些事情: 修改span的內(nèi)容
*/
function showTips(spanID,msg){
//首先要獲得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校驗(yàn)用戶名:
1.事件: onblur 失去焦點(diǎn)
2.函數(shù): checkUsername()
3.函數(shù)去顯示校驗(yàn)結(jié)果
*/
function checkUsername(){
//獲取用戶輸入的內(nèi)容
var uValue = document.getElementById("username").value;
//對(duì)輸入的內(nèi)容進(jìn)行校驗(yàn)
//獲得要顯示結(jié)果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//顯示校驗(yàn)結(jié)果
span.innerHTML = "<font color='red' size='2'>對(duì)不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密碼校驗(yàn)
*/
function checkPassword(){
//獲取密碼輸入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//對(duì)密碼輸入進(jìn)行校驗(yàn)
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>對(duì)不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,夠用</font>";
return true;
}
}
/*
確認(rèn)密碼校驗(yàn)
* */
function checkRePassword(){
//獲取密碼輸入
var uPass = document.getElementById("password").value;
//獲取確認(rèn)密碼輸入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//對(duì)密碼輸入進(jìn)行校驗(yàn)
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>對(duì)不起,兩次密碼不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校驗(yàn)郵箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//對(duì)郵箱輸入進(jìn)行校驗(yàn)
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>對(duì)不起,郵箱格式貌似有問題</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自動(dòng)輪播圖片/圖片自動(dòng)輪播.html" onsubmit="return checkForm()" >
用戶名:<input type="text" id="username" onfocus="showTips('span_username','用戶名長度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密碼:<input type="password" id="password" onfocus="showTips('span_password','密碼長度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
確認(rèn)密碼:<input type="password" id="repassword" onfocus="showTips('span_repassword','兩次密碼必須一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
郵箱:<input type="text" id="email" onfocus="showTips('span_email','郵箱格式必須正確')" onblur="checkMail()" /><span id="span_email"></span><br />
手機(jī)號(hào):<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
上午回顧：
定時(shí)器:
setIntervarl("test（)",3000)每隔多少毫秒執(zhí)行一次函數(shù)
setTimeout("test()",3000)多少毫秒之后執(zhí)行一次函數(shù)
timerID上面定時(shí)器調(diào)用之后
clearInterval()
clearTimeout()
切換圖片
img. src = "圖片路徑"
事件：文本加載完成的事件 onload事件
顯示廣告：img.style.display = "block"
隱藏廣告：img.style.diplay = "none"
引入一個(gè)外部js文件
<script src="js文件的路徑" type="text/javascript"/>
表單校驗(yàn)中常用的事件：
獲得焦點(diǎn)事件 onfocus
失去焦點(diǎn)事件 onblur
按鍵抬起事件 onkeyup
JS開發(fā)步驟
1.確定事件
2.事件要觸發(fā)函數(shù)：定義函數(shù)
3.函數(shù)通常都要做一些交互：點(diǎn)擊，修改圖片缰冤，動(dòng)態(tài)修改innerHTML屬性...innerTEXT
表格隔行換色
需求分析
我們商品分類的信息太多，如果沒一行都顯示同一個(gè)顏色的話會(huì)讓人看的眼花喳魏，為了提高用戶體驗(yàn)棉浸，減少用戶看錯(cuò)的情況，需要對(duì)表格進(jìn)行隔行換色
技術(shù)分析
改變行的顏色
步驟分析
代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<!--
1.確定事件
2.事件要觸發(fā)函數(shù)：init（）
3.函數(shù)：操作頁面的元素
要操作表格中每一行
動(dòng)態(tài)的修改行的背景顏色
-->
<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows =tab.rows;
//便利所有的行刺彩，然后根據(jù)奇數(shù) 偶數(shù)
for(var i=0;i < rows.length; i++){
var row = rows[i];//得到其中某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
</head>
<body onload="init()" >
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手機(jī)數(shù)碼</td>
<td>華為迷郑，小米，尼康</td>
<td>黑馬數(shù)碼產(chǎn)品質(zhì)量最好</td>
<td>
<a href="#">修改</a>|<a href="#">刪除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>電腦辦公</td>
<td>聯(lián)想创倔，小米</td>
<td>筆記本特賣</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>饞嘴零食</td>
<td>辣條嗡害，麻花，黃瓜</td>
<td>年貨</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>床上用品</td>
<td>床單畦攘，被套霸妹，四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>書</td>
<td>兒童，文學(xué)知押，小說</td>
<td>特價(jià)書</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
</table>
</body>
</html>
表格的全選和全不選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<!--
1.確定事件
2.事件要觸發(fā)函數(shù)：init（）
3.函數(shù)：操作頁面的元素
要操作表格中每一行
動(dòng)態(tài)的修改行的背景顏色
-->
<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows =tab.rows;
//便利所有的行叹螟，然后根據(jù)奇數(shù) 偶數(shù)
for(var i=1;i < rows.length; i++){
var row = rows[i];//得到其中某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
/*
全選和全不選步驟分析：
1.確定事件： onclick 單機(jī)事件
2.事件觸發(fā)函數(shù)：checkAll()
3.函數(shù)要去做一些事情：
獲得當(dāng)前第一個(gè)checkbox的狀態(tài)
獲得所有分類項(xiàng)的checkbox
修改每一個(gè)checkbox的狀態(tài)
*/
function checkAll(){
// 獲得當(dāng)前第一個(gè)checkbox的狀態(tài)
var check1 = document.getElementById("check1");
//得到當(dāng)前checked狀態(tài)
var checked = check1.checked;
// 獲得所有分類項(xiàng)的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0 ; i < checks.length;i++){
// 修改每一個(gè)checkbox的狀態(tài)
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>
</head>
<body onload="init()" >
<table border="1px" width="600px" id="tab">
<tr>
<td>
<input type="checkbox" onclick="checkAll()" id="check1" / >
</td>
<td>分類ID</td>
<td>分類名稱</td>
<td>分類商品</td>
<td>分類描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>1</td>
<td>手機(jī)數(shù)碼</td>
<td>華為，小米台盯，尼康</td>
<td>黑馬數(shù)碼產(chǎn)品質(zhì)量最好</td>
<td>
<a href="#">修改</a>|<a href="#">刪除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>電腦辦公</td>
<td>聯(lián)想罢绽，小米</td>
<td>筆記本特賣</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>3</td>
<td>饞嘴零食</td>
<td>辣條，麻花静盅，麻瓜</td>
<td>年貨</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>4</td>
<td>床上用品</td>
<td>床單良价，被套，四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>5</td>
<td>書</td>
<td>兒童蒿叠，文學(xué)明垢，小說</td>
<td>特價(jià)書</td>
<td><a href="#">修改</a>|<a href="#">刪除</a></td>
</tr>
</table>
</body>
</html>
省市聯(lián)動(dòng)
需求分析
技術(shù)分析
什么是DOM：Document Object Model:管理我們的文檔 增刪改查規(guī)則
[HTML中的DOM操作]
一些常用的 HTML DOM 方法:
getElementById(id) - 獲取帶有指令 id 的節(jié)點(diǎn) （元素）
appendChiId(node) - 插入新的子節(jié)點(diǎn)（元素）
remmoveChild(node) - 刪除子節(jié)點(diǎn)（元素）
一些常用的 HTML DOM 屬性：
innerHTML - 節(jié)點(diǎn)（元素）的文本值
parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)
childNodes - 節(jié)點(diǎn)（元素）子節(jié)點(diǎn)
attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)
查找節(jié)點(diǎn)：
getElementById() 返回帶有指定 ID 的元素。
getElementsByTagName() 返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）栈虚。
增加節(jié)點(diǎn)：
createAttribute() 創(chuàng)建屬性節(jié)點(diǎn)袖外。
createElement() 創(chuàng)建元素節(jié)點(diǎn)。
createTextNode()創(chuàng)建文本節(jié)點(diǎn)魂务。
inserBefore() 在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)曼验。
appendChild() 把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)。
