小練習彙總

時間 2019-11-08

標籤練習彙總简体版

原文原文鏈接

一、動態顯示當前時間javascript

 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

二、全選、反選、全不選
使用複選框上面一個屬性判斷是否選中
- checked屬性
- checked=true：選中
- checked=false：不選中css

 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

三、下拉列表聯動
* 建立一個頁面，有兩個下拉選擇框
* 在第一個下拉框裏面有一個事件：改變事件 onchange事件
　- 方法add1(this.value);表示當前改變的option裏面的value值
* 建立一個二維數組，存儲數據
* 每一個數組中第一個元素是國家名稱，後面的元素是國家裏面的城市html

一、遍歷二維數組
二、獲得也是一個數組（國家對應關係）
三、拿到數組中的第一個值和傳遞過來的值作比較
四、若是相同，獲取到第一個值後面的元素
五、獲得city的select
六、添加過去（使用）appendChild方法
　　- 建立option（三步）java

因爲每次都要向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

四、計算器app

 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

五、定時關閉ide

 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。