zoukankan      html  css  js  c++  java

  • JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

     1 <!DOCTYPE html>
 2 <!--示例之模态对话框-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10         }
11         .c1{
12             position: fixed;
13             left: 0;
14             top:0;
15             right:0;
16             bottom:0;
17             background-color: black;
18             opacity: 0.6;
19             z-index: 9;
20             }
21         .c2{
22             width:180px;
23             height:120px;
24             background-color: white;
25             position:fixed;
26             left: 50%;
27             top:50%;
28             margin-left: -200PX;
29             margin-top: -200px;
30             z-index: 10;
31             }
32     </style>
33 </head>
34 <body style="margin: 100px;">
35 
36     <div>
37         <input type="button" value="添加" onclick="ShowModel();"/>
38         <table>
39             <thead>
40                 <tr>
41                     <th>主机名</th>
42                     <th>端口</th>
43                 </tr>
44             </thead>
45             <tbody>
46                 <tr>
47                     <td>1.1.1.1</td>
48                     <td>191</td>
49                 </tr>
50                 <tr>
51                     <td>1.1.1.2</td>
52                     <td>192</td>
53                 </tr>
54                 <tr>
55                     <td>1.1.1.3</td>
56                     <td>193</td>
57                 </tr>
58             </tbody>
59         </table>
60     </div>
61     <!--遮罩层开始-->
62     <div id="i1" class="c1 hide"></div>
63     <!--遮罩层结束-->
64     <!--弹出框开始-->
65     <div id="i2" class="c2 hide">
66         <p><input type="text" /></p>
67         <p><input type="text" /></p>
68         <p>
69             <input type="button" value="取消"  onclick="HideModel();"/>
70             <input type="button" value="确定" />
71         </p>
72     </div>
73     <!--弹出框结束-->
74     <script>
75         function ShowModel() {
76             document.getElementById('i1').classList.remove('hide');
77             document.getElementById('i2').classList.remove('hide');
78                                  }
79         function HideModel() {
80             document.getElementById('i1').classList.add('hide');
81             document.getElementById('i2').classList.add('hide');
82                                  }
83     </script>
84 </body>
85 </html>
    示例之模态对话框
      1 <!DOCTYPE html>
  2 <!--示例之全选和反选以及取消-->
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Title</title>
  7     <style>
  8         .hide{
  9             display: none;
 10         }
 11         .c1{
 12             position: fixed;
 13             left: 0;
 14             top:0;
 15             right:0;
 16             bottom:0;
 17             background-color: black;
 18             opacity: 0.6;
 19             z-index: 9;
 20             }
 21         .c2{
 22             width:180px;
 23             height:120px;
 24             background-color: white;
 25             position:fixed;
 26             left: 50%;
 27             top:50%;
 28             margin-left: -200PX;
 29             margin-top: -200px;
 30             z-index: 10;
 31             }
 32     </style>
 33 </head>
 34 <body style="margin: 100px;">
 35 
 36     <div>
 37         <input type="button" value="添加" onclick="ShowModel();"/>
 38         <input type="button" value="全选" onclick="ChooseAll();"/>
 39         <input type="button" value="取消" onclick="CancleAll();"/>
 40         <input type="button" value="反选" onclick="ReverseAll();"/>
 41         <table>
 42             <thead>
 43                 <tr>
 44                     <th>选择</th>
 45                     <th>主机名</th>
 46                     <th>端口</th>
 47                 </tr>
 48             </thead>
 49             <tbody id="tb">
 50                 <tr>
 51                     <td>
 52                         <input type="checkbox"/>
 53                     </td>
 54                     <td>1.1.1.1</td>
 55                     <td>191</td>
 56                 </tr>
 57                 <tr>
 58                     <td>
 59                         <input type="checkbox" id="test"/>
 60                     </td>
 61                     <td>1.1.1.2</td>
 62                     <td>192</td>
 63                 </tr>
 64                 <tr>
 65                     <td>
 66                         <input type="checkbox"/>
 67                     </td>
 68                     <td>1.1.1.3</td>
 69                     <td>193</td>
 70                 </tr>
 71             </tbody>
 72         </table>
 73     </div>
 74     <!--遮罩层开始-->
 75     <div id="i1" class="c1 hide"></div>
 76     <!--遮罩层结束-->
 77     <!--弹出框开始-->
 78     <div id="i2" class="c2 hide">
 79         <p><input type="text" /></p>
 80         <p><input type="text" /></p>
 81         <p>
 82             <input type="button" value="取消"  onclick="HideModel();"/>
 83             <input type="button" value="确定" />
 84         </p>
 85     </div>
 86     <!--弹出框结束-->
 87     <script>
 88         function ShowModel() {
 89             document.getElementById('i1').classList.remove('hide');
 90             document.getElementById('i2').classList.remove('hide');
 91                                  }
 92         function HideModel() {
 93             document.getElementById('i1').classList.add('hide');
 94             document.getElementById('i2').classList.add('hide');
 95                                  }
 96         function ChooseAll() {
 97             var tbody = document.getElementById('tb')
 98             //获取所有的tr
 99             var tr_list = tbody.children;
100             for(var i=0;i<tr_list.length;i++){
101                                     //循环所有的tr，current_tr
102                                     var current_tr = tr_list[i];
103                                     var checkbox = current_tr.children[0].children[0];
104                                     checkbox.checked = true;
105                                                  }
106                                  }
107         function CancleAll() {
108             var tbody = document.getElementById('tb')
109             //获取所有的tr
110             var tr_list =tbody.children;
111             for(var i=0;i<tr_list.length;i++){
112                                     //循环所有的tr，current_tr
113                                     var current_tr = tr_list[i];
114                                     var checkbox = current_tr.children[0].children[0];
115                                     checkbox.checked = false;
116                                                  }
117                                  }
118         function ReverseAll() {
119             var tbody = document.getElementById('tb')
120             //获取所有的tr
121             var tr_list =tbody.children;
122             for(var i=0;i<tr_list.length;i++){
123                                     //循环所有的tr，current_tr
124                                     var current_tr = tr_list[i];
125                                     var checkbox = current_tr.children[0].children[0];
126                                     if(checkbox.checked) {
127                                         checkbox.checked = false;
128                                                              }
129                                     else {
130                                         checkbox.checked = true;
131                                             }
132                                                  }
133                                  }
134     </script>
135 </body>
136 </html>
    示例之全选和反选以及取消
     1 <!DOCTYPE html>
 2 <!--示例之后台管理左侧菜单-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .hide{
 9             display: none;
10                 }
11         .item .header{
12             height:35px;
13             background-color: #2459a2;
14             color: white;
15             line-height: 35px;
16                         }
17     </style>
18 </head>
19 <body>
20     <div style="height: 48px;"> </div>
21     <div style=" 300px;">
22         <div class="item">
23             <div id ='i1'class="header" onclick="ChangeMenu('i1');"> 菜单一</div>
24             <div class="content">
25                 <div>内容11</div>
26                 <div>内容12</div>
27                 <div>内容13</div>
28             </div>
29         </div>
30         <div class="item">
31             <div id ='i2'class="header" onclick="ChangeMenu('i2');"> 菜单二</div>
32             <div class="content hide">
33                 <div>内容21</div>
34                 <div>内容22</div>
35                 <div>内容23</div>
36             </div>
37         </div>
38         <div class="item">
39             <div id ='i3'class="header" onclick="ChangeMenu('i3');"> 菜单三</div>
40             <div class="content hide">
41                 <div>内容31</div>
42                 <div>内容32</div>
43                 <div>内容33</div>
44             </div>
45         </div>
46         <div class="item">
47             <div id ='i4'class="header" onclick="ChangeMenu('i4');"> 菜单四</div>
48             <div class="content hide">
49                 <div>内容41</div>
50                 <div>内容42</div>
51                 <div>内容43</div>
52             </div>
53         </div>
54     </div>
55     <script>
56         function ChangeMenu(nid) {
57             var current_header = document.getElementById(nid);
58            //console.log(current_header);
59             var  item_list = current_header.parentElement.parentElement.children;
60            //console.log(item_list);
61             for(var i=0;i<item_list.length;i++){
62                                 var current_item = item_list[i];
63                                 current_item.children[1].classList.add('hide');
64                                                     }
65             current_header.nextElementSibling.classList.remove('hide');
66                                     }
67     </script>
68 
69 
70 </body>
71 </html>
    示例之后台管理左侧菜单
     1 <!DOCTYPE html>
 2 <!--JavaScript内容梳理-->
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 <body>
 9         <div>CSS补充：
10             <div>position</div>
11             <div>background</div>
12             <div>hover</div>
13             <div>overflow</div>
14             <div>z-index</div>
15             <div>opacity</div>
16             <div>示例：输入框右边放置图标</div>
17         </div>
18         <div>javaScript：
19             <div>局部变量 var</div>
20             <div>基本数据类型：
21                 <div>数字</div>
22                 <div>字符串</div>
23                 <div>数组</div>
24                 <div>字典</div>
25                 <div>布尔值</div>
26             </div>
27             <div>For循环</div>
28             <div>条件语句
29                 <div>==</div>
30                 <div>!=</div>
31                 <div>===</div>
32                 <div>||</div>
33                 <div>&&</div>
34             </div>
35             <div>函数的定义：
36                 <div>function func(){....}</div>
37             </div>
38         </div>
39         <div>Dom：
40             <div>找标签
41                 <div>直接找$('#id') $('.c1').siblings()</div>
42                 <div>间接找</div>
43             </div>
44             <div>操作
45                 <div>innerText</div>
46                 <div>checkbox:
47                     <div>checked</div>
48                 </div>
49                 <div>className</div>
50                 <div>classList</div>
51             </div>
52             <div>事件：
53                 <div>〈div onclick="函数（123）"〉〈/div〉</div>
54                 <div>〈script〉〈/script〉</div>
55             </div>.
56             <div>定时器：
57                 <div>
58                     setInterval('函数（）',4000)
59                 </div>
60             </div>
61             <div>其他：
62                 <div>
63                     alert()
64                     console.log()
65                 </div>
66             </div>
67         </div>
68         <div>实例：
69             <div>欢迎光临</div>
70             <div>多选</div>
71             <div>模拟对话框</div>
72             <div>左侧菜单</div>
73             <div>返回顶部</div>
74         </div>
75 </body>
76 </html>
    JavaScript内容梳理
  • 相关阅读:
    站立会议 第十天
    站立会议 第十天
    找水王
    购买《哈利波特》书籍
    站立会议第三天
    站立会议第二天
    冲刺会议第一天
    补发《超级迷宫》站立会议五
    补发《超级迷宫》站立会议四
    课堂练习之求1到N之间的数里面含有1的个数
  • 原文地址：https://www.cnblogs.com/ujq3/p/7467968.html
Copyright © 2011-2022 走看看