码迷,mamicode.com
首页 > 其他好文 > 详细

小练习汇总

时间:2018-10-23 22:54:40      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:hang   关系   gettime   sed   end   utf-8   box   text   onchange   

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>
View Code

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>
View Code

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>
View Code

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>
View Code

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>
View Code

 

小练习汇总

标签:hang   关系   gettime   sed   end   utf-8   box   text   onchange   

原文地址:https://www.cnblogs.com/cao-yin/p/9831280.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!