- A+
所属分类：Web前端
一、复选框的全选和取消全选：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>复选框的全选和取消全选</title> </head> <body> <script type="text/javascript"> window.onload = function(){ var aihaos = document.getElementsByName("aihao"); var firstChk = document.getElementById("firstChk"); //注册第一个复选框的点击事件 firstChk.onclick = function(){ for(var i = 0; i < aihaos.length; i++){ aihaos[i].checked = firstChk.checked; } } //大循环为所有“aihao”复选框的点击绑定事件 var all = aihaos.length; for(var i = 0; i < aihaos.length; i++){ aihaos[i].onclick = function(){ var checkedCount = 0; //小循环用于检测全选框是否需要勾选 for(var i = 0; i < aihaos.length; i++){ if(aihaos[i].checked){ checkedCount++; } } firstChk.checked = (all == checkedCount); } } } </script> <input type="checkbox" id="firstChk"/><Br> <input type="checkbox" name="aihao" value="smoke" />抽烟<Br> <input type="checkbox" name="aihao" value="drink" />喝酒<Br> <input type="checkbox" name="aihao" value="tt" />烫头<Br> </body> </html>
二、获取下拉列表选中项的value：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>获取下拉列表选中项的value</title> </head> <body> <script type="text/javascript"> window.onload = function(){ var provinceListElt = document.getElementById("provinceList"); provinceListElt.onchange = function(){ //模拟获取选中项的value alert(provinceListElt.value); } } </script> <select id="provinceList"> <option value="">--请选择省份--</option> <option value="001">河北省</option> <option value="002">河南省</option> <option value="003">山东省</option> <option value="004">山西省</option> </select> </body> </html>
三、网页时钟：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示网页时钟</title> </head> <body> <script type="text/javascript"> //JS中内置的支持类：Date，可以用来获取时间/日期。 //获取系统当前时间 var nowTime = new Date(); //转换成具有本地语言环境的日期格式. nowTime = nowTime.toLocaleString(); document.write(nowTime); //由于在"script"里所以不能直接<br> document.write("<br>"); document.write("<br>"); //自定制日期格式: var t = new Date(); var year = t.getFullYear(); // 返回年信息,以全格式返回. var month = t.getMonth(); // 月份是:0-11 // var dayOfWeek = t.getDay(); // 获取的一周的第几天(0-6) var day = t.getDate(); // 获取日信息. document.write(year + "年" + (month+1) + "月" + day + "日"); document.write("<br>"); document.write("<br>"); /* 重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数) document.write(new Date().getTime()); */ </script> <script type="text/javascript"> //输出当前时间 function displayTime(){ var time = new Date(); var strTime = time.toLocaleString(); document.getElementById("timeDiv").innerHTML = strTime; } //每隔1秒调用displayTime(周期函数) function start(){ // 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数. v = window.setInterval("displayTime()", 1000); } //终止周期函数 function stop(){ window.clearInterval(v); } </script> <br><br> <input type="button" value="显示系统时间" onclick="start();"/> <input type="button" value="系统时间停止" onclick="stop();" /> <div id="timeDiv"></div> </body> </html>
四、内置支持类Array：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>内置支持类Array</title> </head> <body> <script type="text/javascript"> //创建长度为0的数组 var arr = []; alert(arr.length); //数据类型随意 var arr2 = [1,2,3,false,"abc",3.14]; alert(arr2.length); //下标会越界吗 arr2[7] = "test"; // 自动扩容. document.write("<br>"); // 遍历 for(var i = 0; i < arr2.length; i++){ document.write(arr2[i] + "<br>"); } // 另一种创建数组的对象的方式 var a = new Array(); alert(a.length); // 0 var a2 = new Array(3); // 3表示长度. alert(a2.length); var a3 = new Array(3,2); alert(a3.length); // 2 var a = [1,2,3,9]; //将数组中的每个元素取出来,并在每个元素间加上"-",组成一个字符串 var str = a.join("-"); alert(str); // "1-2-3-9" // 在数组的末尾添加一个元素(数组长度+1) a.push(10); alert(a.join("-")); // 将数组末尾的元素弹出(数组长度-1) var endElt = a.pop(); alert(endElt); alert(a.join("-")); // 反转数组. a.reverse(); alert(a.join("=")); </script> </body> </html> 
