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>