1、案例一：使用JS代码完成表单页面的校验
需求分析：
用户在填写表单时，需要对填写的内容进行校验，这里只对用户名、密码、确认密码和邮箱进行校验。
技术分析
步骤分析：
第一步：确定事件，并为其绑定一个确定的函数。此案例的事件为onsubmit
第二步：书写这个函数（获取用户输入的内容），通过id获取。
第三步：对输入的内容进行判断，如果内容不符合要求，返回false,如果符合，可进行下一步。
第四步：数据合法，让表单提交
第五步：数据不合法，不让表单提交
如何控制表单提交？
关于onsubmit，一般在表单提交的位置，需要在定义一个函数的时候，设置一个返回值。
代码：
1 <script> 2 function checkForm(){ 3 //alert("aa"); 4 //1、获取用户输入的数据 5 var uValue = document.getElementById("user").value; 6 //alert(uValue); 7 if(uValue==""){ 8 //2|给出错误的提示信息 9 alert("用户名为空"); 10 return false; 11 } 12 //校验密码 13 var pValue = document.getElementById("password").value; 14 if(pValue==""){ 15 alert("密码不能为空"); 16 return false; 17 } 18 //校验确认密码 19 var rpValue = document.getElementById("repassword").value; 20 if(rpValue == ""){ 21 alert("两次密码输入不一致"); 22 return false; 23 } 24 25 //校验邮箱 26 var eValue = document.getElementById("email").value; 27 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ 28 alert("邮件格式不正确"); 29 return false; 30 } 31 } 32 </script>
2、案例二：使用JS完成首页轮播图
需求分析：
编写程序，完成自动切换图片的功能。
技术分析
获取元素
事件（onload）
定时操作：setInterval(“changeImg()”,500)
步骤分析
第一步：确定事件（onload）并为其绑定一个函数
第二步：书写绑定这个函数
第三步：书写定时任务（setInterval）
第四步：书写定时任务里面的函数
第五步：通过变量的方式进行循环（获取轮播图的位置信息，设置src路径），在循环的时候要注意最后一张图片要重置。
代码：
1 <script type="text/javascript"> 2 function init(){ 3 setInterval("changeImg()",5000); 4 5 //定时显示和隐藏广告 6 time = setInterval("showAd()",5000); 7 } 8 //轮播图片函数 9 var i = 0; 10 function changeImg(){ 11 i++; 12 document.getElementById("img1").src = "../img/"+i+".jpg"; 13 if(i == 3){ 14 i = 0; 15 } 16 }
</script>
3、使用JS完成页面定时弹出广告
需求分析
打开页面，5秒后显示广告，然后，5秒后关闭广告
技术分析
获取图片的位置：document.getElementById(“id”).src
设置图片的显示属性:display:none
定时操作：setInterval(“显示图片的函数”,3000)，setInterval有一个返回值，可以传递给window.clearInterval(),从而取消对code的周期性的执行。
步骤分析
第一步：在页面指定位置隐藏一个图片（使用display属性设置）
第二步：确定事件（onload)并为其绑定一个函数
第三步：书写这个函数（设置一个显示图片的定时函数）
第四步：书写定时器内的函数（获取图片的位置，通过属性display显示图片）
第五步：清除显示图片的定时操作
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的内容（display=none）
第八步：清除隐藏图片的定时器
代码：
1 //定时显示和隐藏图片广告 2 function showAd(){ 3 var iElement = document.getElementById("image2"); 4 iElement.style.display = "block"; 5 clearInterval(time); 6 time = setInterval("hiddedAd()",5000); 7 } 8 //关闭显示图片的定时器 9 function hiddedAd(){ 10 var iElement = document.getElementById("image2"); 11 iElement.style.display = "none"; 12 clearInterval(time); 13 }
4、使用JS完成注册页面校验完善
步骤分析
第一步：确定事件（onfocus)并为其绑定函数
第二步：书写绑定函数（在输入框后面显示提示信息）
第三步：确定事件（obblur)并为其绑定函数
第四步：书写函数（在光标离开后，显示信息隐藏，对数据进行校验，分别给出提示信息）
代码
js
1 function showTip(id,info){ 2 var ele = document.getElementById(id+"span").innerHTML = "<font color='gray'>"+info+"</font>"; 3 } 4 function check(id,info){ 5 var uValue = document.getElementById(id+"").value; 6 if(uValue==""){ 7 var ele = document.getElementById(id+"span").innerHTML = "<font color='red'>"+info+"</font>"; 8 }else{ 9 var ele = document.getElementById(id+"span").innerHTML = ""; 10 } 11 var pValue = document.getElementById("password").value; 12 if(id == "repassword"){ 13 if(uValue != pValue){ 14 // alert(pValue) 15 var ele = document.getElementById(id+"span").innerHTML = "<font color='red'>密码不一致</font>"; 16 // alert("jljlk") 17 }else{ 18 var ele = document.getElementById(id+"span").innerHTML = ""; 19 } 20 } 21 if(id == "email"){ 22 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(uValue)){ 23 // alert(pValue) 24 var ele = document.getElementById(id+"span").innerHTML = "<font color='red'>邮箱格式不正确</font>"; 25 // alert("jljlk") 26 }else{ 27 var ele = document.getElementById(id+"span").innerHTML = ""; 28 } 29 } 30 }
5、使用JS完成表格隔行换色
（1）需求分析
将除了表头之外的其他行，隔行换颜色。
（2）技术分析
HTML：
<thead><tr><tr></thead>
<tbody><tr><td></td></tr></tbody>
JS:
tbody里面的行数为rows.length
JS通过for循环进行遍历
获取奇数行和偶数行
设置背景颜色
（3）步骤分析
第一步：确定事件（onload）并为其绑定一个函数
第二步：书写函数（获取表格）
第三步：获取同tbody中的行数
第四步：遍历tbody中的行数
第五步：获取奇数行和偶数行（角标对2取余）
第六步：奇数行和偶数行分别设置不同的背景颜色。
（4）代码设计
1 <script> 2 window.onload = function(){ 3 var tblEle = document.getElementById("tbl"); 4 var len = tblEle.tBodies[0].rows.length 5 for(var i = 0; i < len; i++){ 6 if(i%2==0){ 7 tblEle.tBodies[0].rows[i].style.backgroundColor = "red"; 8 }else{ 9 tblEle.tBodies[0].rows[i].style.backgroundColor = "green"; 10 } 11 } 12 }
6、使用JS完成全选和全不选的操作
（1）需求分析
我们希望在投胎系统实现一个批量删除的操作（全选所有的复选框）.
（2）技术分析
确定事件onclick,事件绑定在复选框中
获取复选框的状态（是否选中）
Var checkAllEle = document.getElementById(“id”)
获取复选框的状态checkALlEle.checked
获取所有复选框
document.getElementsByName(“name”)
（3）步骤分析
第一步：确定事件（onclick）并为其绑定一个函数
第二步：获取复选框（改变复选框的状态）
第三步：获取所有复选框（总复选框为选中状态，如果状态未选中，将其设置为选中）
第四步：获取所有复选框（总复选框为选未选中状态，如果状态选中，将其设置为未选中）
（4）代码设计
1 <script> 2 window.onload = function(){ 3 //1、获取总的复选框的值，并绑定点击事件 4 document.getElementById("check").onclick = function checkAll(){ 5 //2、获取总的复选框的状态 6 var cState = document.getElementById("check").checked; 7 if(cState == true){ 8 //获取每个子复选框的状态 9 var coEle = document.getElementsByName("checkOne"); 10 for(var i = 0; i < coEle.length; i++){ 11 coEle[i].checked = true; 12 } 13 } 14 if(cState == false){ 15 //获取每个子复选框的状态 16 var coEle = document.getElementsByName("checkOne"); 17 for(var i = 0; i < coEle.length; i++){ 18 coEle[i].checked = false; 19 } 20 } 21 } 22 } 23 </script>
7、使用JS完成省市二级联动
（1）需求分析
用户选择一个省，会加载出这个省的所有城市
（2）技术分析
事件（onchange)
使用一个二维数组来存储省份和城市
获取用户选择的省份（使用方法传参的形式，this.value）
遍历数组（获取省份与用户选择的省份相同了，继续遍历省份下的所有城市）
createTextNode()
createElement()
appendChild()
（3）步骤分析
第一步：确定事件（onchange)并绑定一个函数
第二步：创建一个二维数组，存放每个省份的城市信息
第三步：获取省份元素的值
第四步：将获取的用户选择的省份的值与数组进行匹配。
第五步：如果匹配成功，获取第二级下拉列表元素
第六步：创建城市文本信息
第七步：创建option标签
第八步：将城市文本信息添加到option标签中
第九步：将option标签添加到下拉列表标签中
第十步：清除第二级下拉列表的option
（4）代码设计
1 <script> 2 //1、创建数组 3 var cities = new Array(); 4 cities[0] = new Array("武汉市","黄石市 "," 十堰市 ","宜昌市"); 5 cities[1] = new Array("长沙市 ","株洲市 ","湘潭市 ","衡阳市"); 6 cities[2] = new Array("石家庄市" ,"唐山市 ","秦皇岛市 ","邯郸市"); 7 cities[3] = new Array("郑州市 ","开封市 ","洛阳市 ","平顶山市"); 8 9 function changCities(val){ 10 //8、获取二级下拉列表元素 11 var cityEle = document.getElementById("city"); 12 //9、清除二级下拉列表中的元素 13 cityEle.options.length = 0 14 //2、将用户选择的省份和数组中的省份进行匹配 15 for(var i=0; i<cities.length; i++){ 16 //3、如果匹配 17 if(val == i){ 18 //4、遍历该省份的城市 19 for(var j=0; j<cities[i].length; j++){ 20 //5、创建城市文本信息 21 var cityNode = document.createTextNode(cities[i][j]); 22 //6、创建option元素节点 23 var opNode = document.createElement("option"); 24 //7、将城市文本信息添加到option元素节点中 25 opNode.appendChild(cityNode); 26 //8、将option添加到二级下拉列表中 27 cityEle.appendChild(opNode); 28 } 29 } 30 } 31 } 32 </script>