1、动态显示当前时间
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态显示当前时间</title> 6 </head> 7 <body> 8 <div id="times"> 9 10 </div> 11 </body> 12 <script type="text/javascript"> 13 function getTime(){ 14 // 当前时间 15 var date = new Date(); 16 // 格式化 17 var d1 = date.toLocaleString(); 18 // 获取div 19 var div = document.getElementById("times"); 20 div.innerHTML = d1; 21 } 22 // 使用定时器实现每一秒显示的一次时间 23 setInterval("getTime();",1000); 24 </script> 25 </html>
2、全选、反选、全不选
使用复选框上面一个属性判断是否选中
- checked属性
- checked=true：选中
- checked=false：不选中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全选练习</title> 6 </head> 7 <body> 8 <input type="checkbox" name="hobby"/>跑步<br /> 9 <input type="checkbox" name="hobby"/>爬山<br /> 10 <input type="checkbox" name="hobby"/>游泳<br /> 11 <input type="checkbox" name="hobby"/>刷剧<br /> 12 <input type="checkbox" id="boxid" onclick="selectAN()"/>全选/全不选<br /> 13 <input type="button" value="全选" onclick="selAll()"/> 14 <input type="button" value="全不选" onclick="selNo()"/> 15 <input type="button" value="反选" onclick="selOther()"/> 16 </body> 17 <script type="text/javascript"> 18 //全操作 19 function selectAN(){ 20 var box = document.getElementById("boxid"); 21 if(box.checked==true){//全选状态 22 // 调用全选方法 23 selAll(); 24 }else{//全不选状态 25 selNo(); 26 } 27 } 28 // 实现全选的操作 29 function selAll(){ 30 //1:获取要操作的复选框 31 var hobbys = document.getElementsByName("hobby"); 32 //2:遍历数组 33 for(var i=0;i<hobbys.length;i++){ 34 var temp = hobbys[i];// 得到每一个复选框 35 //3:设置属性为true 36 temp.checked = true; 37 } 38 } 39 // 实现全不选的操作 40 function selNo(){ 41 // 获取操作的复选框 42 var hobbys = document.getElementsByName("hobby"); 43 // 遍历复选框 44 for(var i=0;i<hobbys.length;i++){ 45 var temp = hobbys[i]; 46 // 属性值设置成false 47 temp.checked = false; 48 } 49 } 50 // 实现反选的操作 51 function selOther(){ 52 // 获取操作的复选框 53 var hobbys = document.getElementsByName("hobby"); 54 // 遍历复选框 55 for(var i=0;i<hobbys.length;i++){ 56 var temp = hobbys[i]; 57 // 属性值设置成取反 58 temp.checked = !temp.checked; 59 60 // if判断过于死板 61 /* 62 if(temp.checked==true){//选中的状态 63 temp.checked=false;//设置为false 64 }else{//不选中的状态 65 temp.checked=true; 66 } 67 */ 68 } 69 } 70 </script> 71 </html>
3、下拉列表联动
* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
1、遍历二维数组
2、得到也是一个数组（国家对应关系）
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
- 创建option（三步）
由于每次都要向city里面添加option
第二次添加，会追加。所以每次添加之前，判断一下city里面是否有option，如果有，删除
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表联动</title> 6 </head> 7 <body> 8 <select id="country" onchange="add1(this.value)"> 9 <option value="0">请选择</option> 10 <option value="中国">中国</option> 11 <option value="美国">美国</option> 12 <option value="德国">德国</option> 13 <option value="日本">日本</option> 14 </select> 15 16 <select id="city"> 17 <option value=""></option> 18 19 </select> 20 </body> 21 <script type="text/javascript"> 22 // 二维创建数组[ 23 var arr = new Array(); 24 arr[0]=["中国","北京","上海","广州","深圳","杭州","西安"]; 25 arr[1]=["美国","纽约","洛杉矶","芝加哥","费城","休斯敦","旧金山"]; 26 arr[2]=["德国","柏林","汉堡","慕尼黑","不来梅","法兰克福","狼堡"]; 27 arr[3]=["日本","东京","北海道","大阪","广岛","长崎","北九州"]; 28 function add1(val){ 29 // 获取city的select 30 var city = document.getElementById("city"); 31 //得到city里面的option 32 var options = city.getElementsByTagName("option"); 33 //遍历数组 34 for(var i=0;i<options.length;i++){ 35 //得到每一个option 36 var ops = options[i]; 37 //删除option,通过父节点 38 city.remove(ops); 39 i--; 40 } 41 //1:遍历二维数组 42 for(var i=0;i<arr.length;i++){ 43 //得到二维数组里每一个数组 44 var arr1 = arr[i]; 45 //得到遍历数组第一个的值 46 var firstValue = arr1[0]; 47 //判断传递的值是否和第一个值相同 48 //遍历arr1 49 if(firstValue == val){//相同 50 //得到第一个值后面的元素 51 //遍历第一个值后面的元素 52 for(var j=1;j<arr1.length;j++){ 53 var value1 = arr1[j];//得到城市名称 54 //创建option 55 var options = document.createElement("option"); 56 //创建文本 57 var texts = document.createTextNode(value1); 58 //文本添加到option里 59 options.appendChild(texts); 60 //添加值到city 61 city.appendChild(options); 62 } 63 } 64 } 65 } 66 </script> 67 </html>
4、计算器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js计算器</title> 6 <style type="text/css"> 7 #div01{ 8 border: solid 1px; 9 width: 400px; 10 background-color: #292824; 11 border-radius: 15px; 12 } 13 #textid{ 14 width: 300px; 15 height: 30px; 16 margin: 15px; 17 margin-left: 50px; 18 font-size: 25px; 19 border-radius: 9px; 20 } 21 input[type=button]{ 22 width: 50px; 23 height: 50px; 24 font-size: 30px; 25 margin: 15px; 26 margin-left: 28px; 27 border-radius: 6px; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="div01"> 33 <input type="text" id="textid" value="" readonly="readonly" /><br /> 34 <input type="button" value="1" onclick="test(this.value)"/> 35 <input type="button" value="2" onclick="test(this.value)"/> 36 <input type="button" value="3" onclick="test(this.value)"/> 37 <input type="button" value="4" onclick="test(this.value)"/><br /> 38 <input type="button" value="5" onclick="test(this.value)"/> 39 <input type="button" value="6" onclick="test(this.value)"/> 40 <input type="button" value="7" onclick="test(this.value)"/> 41 <input type="button" value="8" onclick="test(this.value)"/><br /> 42 <input type="button" value="9" onclick="test(this.value)"/> 43 <input type="button" value="0" onclick="test(this.value)"/> 44 <input type="button" value="+" onclick="test(this.value)"/> 45 <input type="button" value="-" onclick="test(this.value)"/><br /> 46 <input type="button" value="*" onclick="test(this.value)"/> 47 <input type="button" value="/" onclick="test(this.value)"/> 48 <input type="button" value="C" onclick="test(this.value)"/> 49 <input type="button" value="=" onclick="test(this.value)"/> 50 </div> 51 </body> 52 <script type="text/javascript"> 53 function test(str){ 54 //获取input输入框 55 var varInput = document.getElementById("textid"); 56 //判断 57 if(str=="C"){ 58 varInput.value=""; 59 }else if(str=='='){ 60 varInput.value = eval(varInput.value); 61 }else{ 62 varInput.value +=str; 63 } 64 } 65 </script> 66 </html>
5、定时关闭
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>间隔执行</title> 6 <script type="text/javascript"> 7 //声明一个标志 8 var falg = true; 9 var varinterval = 0; 10 function testInterval(){ 11 if(falg){ 12 //获取10 13 var varval = document.getElementById("fontid"); 14 varinterval = window.setInterval(function(){ 15 //判断 16 if(varval.innerText == 0){ 17 //关闭本页面 18 window.close(); 19 //打开页面 20 window.open("http://www.jd.com"); 21 }else{ 22 varval.innerText--; 23 } 24 },1000) 25 } 26 falg = false; 27 } 28 //暂停 29 function testClear(){ 30 window.clearInterval(varinterval); 31 falg = true; 32 } 33 </script> 34 </head> 35 <body onload="testInterval();"> 36 <div id="" style="color: green;font-size:30px"> 37 本页面还剩 <font id="fontid" style="font-size:50px">10</font> S关闭 38 </div> 39 40 <input type="button" value="暂停" onclick="testClear();"/> 41 <input type="button" value="继续" onclick="testInterval();"/> 42 </body> 43 </html>