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>
来源：https://www.cnblogs.com/liutiantian001/p/10057098.html