JS
Posted panbee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS相关的知识，希望对你有一定的参考价值。
没有视频看了,心里有点慌啊,像这种每天都会灌输很多知识的学习方式,我觉得提前预习真的是有奇效,不然不容易跟上老师的思维.
1.发送验证码:简单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证码</title> <script type="text/javascript"> var sec = 59; var timer; function sendInfo(){ timer=window.setInterval(changeText, 1000); } function changeText(){ var bton = document.getElementById("bton"); bton.value = sec+"s后重新发送"; bton.disabled = "disabled"; sec--; if(sec==0){ window.clearInterval(timer); bton.value = "重新发送"; bton.removeAttribute("disabled"); sec=59; } } </script> </head> <body> <input type="text" /><input type="button" onclick="sendInfo()" id="bton" value="发送验证码"> </body> </html>
2.全选功能:简单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 500px; margin: 100px auto; text-align: center; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; height: 24px; } td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } </style> <script type="text/javascript"> function qx(){ var checkboxAll = document.getElementById("checkAll"); var inputObj = document.getElementsByName("check"); for(var i=0; i<inputObj.length; i++){ //反选功能 /*inputObj[i].checked = !inputObj[i].checked;*/ //全选功能 checkAll.checked ? inputObj[i].checked=true : inputObj[i].checked=false; } } function checking(){ var inputObj = document.getElementsByName("check"); var checkboxAll = document.getElementById("checkAll"); for(var i=0;i<inputObj.length;i++){ //只要有一个复选框没选中,就进入if语句并结束函数 if(!inputObj[i].checked){ checkboxAll.checked = false; return false; } } checkboxAll.checked = true; return true; //另一种傻瓜式做法 /*if(inputObj[0].checked && inputObj[1].checked && inputObj[2].checked){ checkboxAll.checked = true; }else { checkboxAll.checked = false; }*/ } </script> </head> <body> <table> <tr> <th> <input type="checkbox" name="checkboxAll" id="checkAll" onclick="qx()"/>全选/全不选 </th> <th>菜名</th> <th>商家</th> <th>价格</th> </tr> <tr> <td> <input type="checkbox" name="check" onclick="checking()"/> </td> <td>红烧肉</td> <td>隆江猪脚饭</td> <td>￥200</td> </tr> <tr> <td> <input type="checkbox" name="check" onclick="checking()"/> </td> <td>香酥排骨</td> <td>隆江猪脚饭</td> <td>￥998</td> </tr> <tr> <td> <input type="checkbox" name="check" onclick="checking()"/> </td> <td>北京烤鸭</td> <td>隆江猪脚饭</td> <td>￥88</td> </tr> </table> </body> </html>
3.表单验证:虽然只验证了两个,原理已明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <script type="text/javascript"> window.onload = function(){ //没有加var定义的全局变量 spanObj = document.getElementsByTagName("span"); v =document.form1.username; v2 = document.form1.userpwd; } function fct1(){ //光标选中时,提示信息 spanObj[0].innerHTML = "请输入用户名"; spanObj[0].style.color = "#f00"; } function fct2(){ //光标移开时,检查表单 if(v.value == ""){ //验证用户是否输入数据 spanObj[0].innerHTML = "用户名必须要填写"; spanObj[0].style.color = "#f00"; return false; }else if(v.value.length<5 || v.value.length>16){ //验证用户名的长度是否符合要求 spanObj[0].innerHTML = "用户名必须在5-16位之间"; return false; }else{ //验证用户名中是否含有特殊字符 var arr = ["*","%","&","<",">","/","\\","!","@","#"]; var length1 = arr.length; var length2 = v.value.length; for(var i=0;i<length1;i++){ for(var j=0;j<length2;j++){ if(arr[i]==v.value.charAt(j)){ spanObj[0].innerHTML = "用户名含有特殊字符"; spanObj[0].style.color = "#f00"; return false; } } } //前面验证通过则用户名验证通过 spanObj[0].innerHTML = "用户名合法"; spanObj[0].style.color = "#00f"; return true; } } function fct3(){ //光标选中时,提示输入信息 spanObj[1].innerHTML = "请输入密码"; spanObj[1].style.color = "#f00"; } function fct4(){ //验证用户是否输入数据 if(v2.value == ""){ spanObj[1].innerHTML = "密码还是要的,大哥!"; spanObj[1].style.color = "#f00"; return false; }else if(v2.value.length<5 || v2.value.length>16){ //验证密码的长度是否符合要求 spanObj[1].innerHTML = "别太短,也别太长,5-16位!"; spanObj[1].style.color = "#f00"; return false; }else{ //前面的验证通过则密码验证通过 spanObj[1].innerHTML = "Well Done!"; spanObj[1].style.color = "#00f"; return true; } } //在提交表单时,再进行一次检查,是否所有的所填项目都符合要求 function checkForm(){ var res_1 = fct2(); var res_2 = fct4(); if(res_1 && res_2){ return true; }else{ return false; } } </script> </head> <body> <form action="index.php" onsubmit="return checkForm()" name="form1"> <table width="500" align="center" border="1" bordercolor="#ccc" cellpadding="5"> <caption><h2>表单验证</h2></caption> <tr> <td align="right">用户名:</td> <td><input type="text" name="username" onfocus="fct1()" onblur="fct2()"></td> <td width="250"><span></span></td> </tr> <tr> <td align="right">密码:</td> <td><input type="password" name="userpwd" onfocus="fct3()" onblur="fct4()"></td> <td><span></span></td> </tr> <tr> <td> </td> <td colspan="2"><input type="submit"> <input type="reset" ></td> </tr> </table> </form> </body> </html>
4.坑爹的三级联动,费老劲了,还不完善...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多级联动菜单</title> <script type="text/javascript"> arr_province = ["请选择省份","北京市","广东省","湖南省"]; arr_city = [ ["请选择城市"], ["海淀区","宣武区","朝阳区","房山区"], ["广州市","深圳市","清远市","罗定市"], ["长沙市","常德市","岳阳市","永州市"], ]; //www.jq22.com arr_area = [ [ ["请选择地区"] ], [ ["中关","北理"], ["宣区","武区"], ["朝区","阳区"], ["房山","良乡"] ], [ ["天河","越秀"], ["罗湖","?"], ["清","远"], ["罗","定"] ], [ ["雨花","岳麓"], ["鼎城","澧县"], ["浏阳","楼"], ["冷水","东安"] ] ] window.onload = function(){ //在省份下拉列表中写入省份数组 var province = document.form1.province; var city = document.form1.city; var area = document.form1.area; province.length = arr_province.length; for(var i=0; i<province.length; i++){ province.options[i].text = arr_province[i]; province.options[i].value = arr_province[i]; } province.selectedIndex = 0; var index = province.selectedIndex; //在省份下拉列表中写入城市数组 city.length = arr_city[index].length; for(var j=0; j<city.length; j++){ city.options[j].text = arr_city[index][j]; city.options[j].value = arr_city[index][j]; } //在城市下拉列表中写入地区数组 city.selectedIndex = 0; var index2 = city.selectedIndex; area.length = arr_area[index][index2].length; for(var k=0;k<area.length;k++){ area.options[k].text = arr_area[index][index2][k]; area.options[k].value = arr_area[index][index2][k]; } } //二级联动的实现 function changeSelected(changedIndex){ var city = document.form1.city; city.length = arr_city[changedIndex].length; for(var j=0; j<city.length; j++){ city.options[j].text = arr_city[changedIndex][j]; city.options[j].value = arr_city[changedIndex][j]; } //三级联动功能的实现 var index2 = city.selectedIndex; var area = document.form1.area; area.length = arr_area[changedIndex][index2].length; for(var k=0; k<area.length; k++){ area.options[k].text = arr_area[changedIndex][index2][k]; area.options[k].value = arr_area[changedIndex][index2][k]; } //初始化 city.selectedIndex = 0; area.selectedIndex = 0; } //二级列表联动三级下拉列表 function changeSelected2(changedIndex2){ var province = document.form1.province; var city = document.form1.city; var area = document.form1.area; var index = province.selectedIndex; area.length = arr_area[index][changedIndex2].length; for(var i=0;i<area.length;i++){ area.options[i].text = arr_area[index][changedIndex2][i]; area.options[i].value = arr_area[index][changedIndex2][i]; } area.selectedIndex = 0; } </script> </head> <body> <form name="form1" method="post"> 省份:<select name="province" onchange="changeSelected(this.selectedIndex)"></select> 城市:<select name="city" onchange="changeSelected2(this.selectedIndex)"></select> 地区:<select name="area"></select> </form> </body> </html>
以上是关于JS的主要内容，如果未能解决你的问题，请参考以下文章