1. tab 切换
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: auto;
9 }
10 .tb{
11 float:left;
12 width: 33%;
13 height:100px;
14 background-color: green;
15 }
16 .tb h1{
17 line-height: 100px;
18 text-align: center;
19 color: red;
20 }
21 .tb p{
22 display: none;
23 background-color: red;
24 }
25
26 </style>
27 </head>
28 <body>
29 <div class="left tb">
30 <h1 onclick="foo(this)">第一篇</h1>
31 <p class="p">11111111111111111111111111111111111111111111</p>
32 </div>
33 <div class="middle tb">
34 <h1 onclick="foo(this)">第二篇</h1>
35 <p class="p">22222222222222222222222222222222222222222222222</p>
36 </div>
37 <div class="right tb">
38 <h1 onclick="foo(this)">第三篇</h1>
39 <p class="p">33333333333333333333333333333333333333333333333333</p>
40 </div>
41 </body>
42 <script>
43 //实现方法一
44 function foo(self){
45 var eles=document.getElementsByTagName(‘p‘);
46 for (var i=0;i<eles.length;i++){
47 eles[i].style.display=‘none‘
48 }
49 self.nextElementSibling.style.display=‘block‘
50 }
51
52 </script>
53 </html>
2. timmer触发
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script>
7 function bar() {
8 //获取当前时间字符串
9 var curr_time=new Date();
10 var s_time=curr_time.toLocaleString();
11 // dom 找到标签，然后对value赋值
12 var ele=document.getElementById(‘timer‘);
13 console.log(ele);
14 ele.value=s_time;
15 }
16 var ID;
17 function foo(){
18 if(ID==undefined){
19 bar();
20 ID=setInterval(bar,1000);
21 }
22
23 }
24 function stop(){
25 clearInterval(ID);
26 ID=undefined;
27 }
28 </script>
29 </head>
30 <body>
31 <input type="text" id="timer" onclick="foo()">
32 <bottom onclick="stop()">stop</bottom>
33 </body>
34 </html>
3. 二级联动
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <select name="" id="select1" onchange="foo(this)">
9 <option value="111">河北省</option>
10 <option value="222">河南省</option>
11 <option value="333">湖南省</option>
12 </select>
13
14 <select name="" id="select2">
15
16 </select>
17 </body>
18 <script>
19 var dic={‘河北省‘:[‘雄安‘,‘廊坊‘,‘保定‘],‘河南省‘:[‘郑州‘,‘开封‘,‘洛阳‘],‘湖南省‘:[‘长沙‘,‘湘潭‘,‘浏阳‘]};
20
21 function foo(self){ //根据用户点击获取选择的标签信息
22 var index =self.selectedIndex; //返回2
23 console.log(index);
24 var ele=document.getElementById(‘select1‘);
25 // console.log(ele); //返回select和它下面的option
26 var eles=ele.children;
27 var selectedEle = eles[index]; //找到被选中的那个标签
28 var selectedText =selectedEle.innerText;
29 console.log(selectedText);
30 bar(selectedText) ; //‘河南省‘
31 }
32 function bar(selectedText){ // 根据用户选择的标签信息创建新节点
33 var ele=document.getElementById(‘select2‘);
34 //清空option 方法一：
35 var ele_children=ele.children;
36 var count=ele_children.length;
37 for (var i=0;i<count;i++){
38 ele.removeChild(ele_children[0]);
39 }
40 //清空option 方法二：
41 // ele.options.length=0;
42 var arr=dic[selectedText];
43 var tb=document.createElement(‘option‘);
44 tb.innerText=selectedText;
45 ele.appendChild(tb);
46
47 for (var i=0;i<arr.length;i++){
48 var tb1=document.createElement(‘option‘);
49 tb1.value=arr[i];
50 tb1.innerText=arr[i];
51 ele.appendChild(tb1)
52 }
53 }
54
55 </script>
56 </html>
4. 模态对话框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin:0px;
9 }
10 .back{
11 height: 1200px;
12 width:100%;
13 background-color: cornsilk;
14 }
15 .shade{
16 position:fixed;
17 top:0;
18 bottom: 0;
19 left: 0;
20 right: 0;
21 background-color: gray;
22 opacity: 0.4;
23 }
24 .modul{
25 position:fixed;
26 width:400px;
27 height:400px;
28 background-color: white;
29 top: 50%;
30 left: 50%;
31 margin-left: -200px;
32 margin-top: -200px;
33 text-align: center;
34 }
35 .hide{
36 display: none;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="back">
42 <hi>vnjdsvnjdsf;vnjse;ogvje</hi>
43 <buttom onclick="start()">start</buttom>
44 </div>
45
46 <div class="shade hide btn"></div>
47
48 <div class="modul hide btn">
49 <div class="con">
50 用户名<input type="text">
51 <button onclick="stop()">stop</button>
52 </div>
53 </div>
54 </body>
55 <script>
56 function start() {
57 var eles=document.getElementsByClassName(‘btn‘);
58 for(var i=0;i<eles.length;i++){
59 eles[i].classList.remove(‘hide‘);
60 }
61 }
62
63 function stop() {
64 var eles=document.getElementsByClassName(‘btn‘);
65 for(var i=0;i<eles.length;i++){
66 eles[i].classList.add(‘hide‘);
67 }
68
69 }
70 </script>
71 </html>
5. 跑马灯
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <input type="text" class="paomadeng" onclick=‘bar()‘>
9 </body>
10 <script>
11
12 var arr=[‘欢‘,‘迎‘,‘光‘,‘临‘];
13 var str=‘‘;
14 function info(arr2) {
15 var eles=document.getElementsByClassName(‘paomadeng‘);
16 for (var i=0;i < arr2.length;i++){
17 str=str+arr2[i]
18 }
19 eles[0].value=str;
20 str=‘‘;
21 }
22 function inp(){
23 res =arr.splice(0,1);
24 arr.splice(2,0,res) ;
25 info(arr)
26 }
27 function bar() {
28 var eles=document.getElementsByClassName(‘paomadeng‘);
29 eles[0].value=‘欢迎光临‘;
30 setInterval(inp,1000);
31
32 }
33 </script>
34 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 h1{
8 background-color: darkblue;
9 color:red;
10 text-align: center;
11 line-height: 50px;
12 }
13 </style>
14 </head>
15 <body>
16 <h1 class="title">欢迎光临</h1>
17 <button onclick="foo()">click</button>
18 </body>
19 <script>
20 function test(){
21 var ele=document.getElementsByClassName(‘title‘)[0];
22 var content=ele.innerText;
23 var first_char=content.charAt(0);
24 var last_char=content.substring(1,content.length);
25 var new_content=last_char+first_char;
26 ele.innerText=new_content;
27
28 }
29 function foo() {
30 setInterval(test,1000);
31 }
32 </script>
33 </html>
6. select左右移动
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 span{
8 display:inline-block;
9 width: 100px;
10 height: 40px;
11 background-color: red;
12 text-align: center;
13 line-height: 40px;
14 vertical-align: top;
15 }
16 </style>
17 </head>
18 <body>
19 <select name="" id="left" multiple size="3">
20 <option value="">风筝</option>
21 <option value="">狼图腾</option>
22 <option value="">红楼梦</option>
23 </select>
24 <span>
25 <botton id="move"> > </botton>
26 <botton id="move_all"> >> </botton>
27 </span>
28 <select name="" id="right" multiple size="3">
29 <option value="">封神榜</option>
30 <option value="">水浒传</option>
31 <option value="">西游记</option>
32 </select>
33 <script>
34 var move=document.getElementById("move");
35 var move_all=document.getElementById("move_all");
36 var left=document.getElementById("left");
37 var right=document.getElementById("right");
38
39 var option_arr=left.options;
40 move.onclick=function () {
41 for(var i=0;i<option_arr.length;i++){
42 if(option_arr[i].selected){
43 right.appendChild(option_arr[i]);
44 i--;
45 }
46 }
47 }
48 move_all.onclick=function () {
49 for(var i=0;i<option_arr.length;i++){
50 if(option_arr[i].selected){
51 right.appendChild(option_arr[i]);
52 i--;
53 }
54 }
55 }
56 </script>
57 </body>
58 </html>
升级版
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .left_list{
8 border: solid blue;
9 display: inline-block;
10 height:150px;
11 width:100px;
12 background-color: #c0cddf;
13 }
14 .right_list{
15 border: solid blue;
16 display: inline-block;
17 height:150px;
18 width:100px;
19 background-color: #c0cddf;
20 }
21 .left_list #left{
22 background-color:#99aecb;
23 }
24 .right_list #right{
25 background-color:#99aecb;
26 }
27 .botton{
28 background-color: #8aab30;
29 opacity: 0.5;
30 display: inline-block;
31 height:150px;
32 width:100px;
33 vertical-align: top;
34 }
35 .botton .top{
36 display: block;
37 width: 100px;
38 text-align: center;
39 line-height: 75px;
40 }
41 .botton .bottom{
42 display: block;
43 width: 100px;
44 text-align: center;
45 line-height: 75px;
46 }
47 </style>
48 </head>
49 <body>
50 <div class="left_list">
51 <select name="" id="left" multiple size="6">
52 <option value="">风筝</option>
53 <option value="">狼图腾</option>
54 <option value="">红楼梦</option>
55 </select>
56 </div>
57 <div class="botton">
58 <span class="top">
59 <button id="move_right"> >> </button>
60 </span>
61 <span class="bottom">
62 <button id="move_left"> << </button>
63 </span>
64 </div>
65 <div class="right_list">
66 <select name="" id="right" multiple size="6">
67 <option value="">封神榜</option>
68 <option value="">水浒传</option>
69 <option value="">西游记</option>
70 </select>
71 </div>
72
73 <script>
74 var move_left=document.getElementById("move_left");
75 var move_right=document.getElementById("move_right");
76 var left=document.getElementById("left");
77 var right=document.getElementById("right");
78
79 var option_arr1=left.options;
80 var option_arr2=right.options;
81 move_right.onclick=function () {
82 for(var i=0;i<option_arr1.length;i++){
83 if(option_arr1[i].selected){
84 right.appendChild(option_arr1[i]);
85 i--;
86 }
87 }
88 };
89 move_left.onclick=function () {
90 for(var i=0;i<option_arr2.length;i++){
91 if(option_arr2[i].selected){
92 left.appendChild(option_arr2[i]);
93 i--;
94 }
95 }
96 }
97 </script>
98 </body>
99 </html>
7. table 全反选案例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <button class="all">全选</button>
9 <button class="reverse">反选</button>
10 <button class="cancel">取消</button>
11 <table>
12 <tr>
13 <td><input type="checkbox" class="item"></td>
14 <td>111</td>
15 <td>111</td>
16 <td>111</td>
17 </tr>
18 <tr>
19 <td><input type="checkbox" class="item"></td>
20 <td>111</td>
21 <td>111</td>
22 <td>111</td>
23 </tr>
24 <tr>
25 <td><input type="checkbox" class="item"></td>
26 <td>111</td>
27 <td>111</td>
28 <td>111</td>
29 </tr>
30 <tr>
31 <td><input type="checkbox" class="item"></td>
32 <td>111</td>
33 <td>111</td>
34 <td>111</td>
35 </tr>
36
37 </table>
38 </body>
39 <script>
40 var ele_all=document.getElementsByClassName("all")[0];
41 var ele_reverse=document.getElementsByClassName("reverse")[0];
42 var ele_cancel=document.getElementsByClassName("cancel")[0];
43 var input_arr=document.getElementsByClassName("item");
44
45
46 ele_all.onclick=function(){
47 for (var i=0;i<input_arr.length;i++){
48 input_arr[i].checked=true;
49 }
50 };
51 ele_reverse.onclick=function(){
52 for (var i=0;i<input_arr.length;i++){
53 if (input_arr[i].checked=true){
54 input_arr[i].checked=false;
55 }else{
56 input_arr[i].checked=true;
57 }
58 }
59 };
60 ele_cancel.onclick=function(){
61 for (var i=0;i<input_arr.length;i++){
62 input_arr[i].checked=false;
63 }
64 }
65 </script>
66 </html>
升级版
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <button >全选</button>
9 <button >反选</button>
10 <button >取消</button>
11 <table>
12 <tr>
13 <td><input type="checkbox" class="item"></td>
14 <td>111</td>
15 <td>111</td>
16 <td>111</td>
17 </tr>
18 <tr>
19 <td><input type="checkbox" class="item"></td>
20 <td>111</td>
21 <td>111</td>
22 <td>111</td>
23 </tr>
24 <tr>
25 <td><input type="checkbox" class="item"></td>
26 <td>111</td>
27 <td>111</td>
28 <td>111</td>
29 </tr>
30 <tr>
31 <td><input type="checkbox" class="item"></td>
32 <td>111</td>
33 <td>111</td>
34 <td>111</td>
35 </tr>
36
37 </table>
38 </body>
39 <script>
40 var ele_all=document.getElementsByTagName("button");
41 var input_arr=document.getElementsByClassName("item");
42 for (var i=0;i<ele_all.length;i++){
43 if (ele_all[i].innerText==‘全选‘)
44 ele_all[i].onclick=function () {
45 for (var i=0;i<input_arr.length;i++){
46 input_arr[i].checked=true;}
47 };
48 else if (ele_all[i].innerText==‘反选‘)
49 ele_all[i].onclick=function () {
50 for (var i=0;i<input_arr.length;i++){
51 if (input_arr[i].checked==true){
52 input_arr[i].checked=false;
53 }
54 else{
55 input_arr[i].checked=true;
56 }}};
57 else ele_all[i].onclick=function () {
58 for (var i=0;i<input_arr.length;i++){
59 input_arr[i].checked=false;}
60 }
61 }
62 </script>
63 </html>
8. 表格增删改
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .add{
8 display: block;
9 width:100px;
10 margin-bottom: 20px;
11 }
12
13 /*表格*/
14 .account{
15 width:200px;
16 background-color: #99aecb;
17 }
18 .name{
19 width:200px;
20 background-color: #99aecb;
21 }
22 .sex{
23 width:200px;
24 background-color: #99aecb;
25 }
26 .phone{
27 width:200px;
28 background-color: #99aecb;
29 }
30 .write{
31 width:200px;
32 background-color: #99aecb;
33 }
34 .tb{
35 background-color: yellow;
36 }
37 .tb0{
38 background-color: green;
39 }
40 .tb1{
41 background-color: red;
42 }
43 tr{
44 background-color:gainsboro;
45 }
46 /*模态对话框*/
47 .shade{
48 position:fixed;
49 top:0;
50 bottom: 0;
51 left: 0;
52 right: 0;
53 background-color: gray;
54 opacity: 0.4;
55 }
56 .modul{
57 border: solid black 1px;
58 position:fixed;
59 width:400px;
60 height:400px;
61 background-color: white;
62 top: 50%;
63 left: 50%;
64 margin-left: -200px;
65 margin-top: -200px;
66 text-align: center;
67 }
68 .hide{
69 display: none;
70 }
71 .con div{
72 height:50px;
73 width:400px
74 }
75 .con p{
76 display: inline-block;
77 margin-right: 10px;
78
79 }
80 .con input{
81 display: inline-block;
82 background-color: #cccccc;
83 }
84 .save{
85 display: block;
86 width:200px;
87 margin: 0 auto;
88 margin-top: 10px;
89 }
90 </style>
91 </head>
92 <body>
93 <button class="add">添加用户</button>
94
95 <table class="Tb" border="solid black 1px">
96 <tr>
97 <th class="account">账号</th>
98 <th class="name">姓名</th>
99 <th class="sex">性别</th>
100 <th class="phone">电话</th>
101 <th class="write">编辑</th>
102 </tr>
103 <tr class="1">
104 <td>001</td>
105 <td>张三</td>
106 <td>男</td>
107 <td>25161564315</td>
108 <td>
109 <button class="tb">编辑</button>
110 <button class="tb0">保存</button>
111 <button class="tb1">删除</button>
112 </td>
113 </tr>
114 <tr class="2">
115 <td>002</td>
116 <td>李四</td>
117 <td>男</td>
118 <td>1564156156</td>
119 <td>
120 <button class="tb">编辑</button>
121 <button class="tb0">保存</button>
122 <button class="tb1">删除</button>
123 </td>
124 </tr>
125 <tr class="3">
126 <td>003</td>
127 <td>王五</td>
128 <td>男</td>
129 <td>156415643156</td>
130 <td>
131 <button class="tb">编辑</button>
132 <button class="tb0">保存</button>
133 <button class="tb1">删除</button>
134 </td>
135 </tr>
136 </table>
137
138 <div class="shade hide btn"></div>
139
140 <div class="modul hide btn">
141 <div class="con">
142 <div><p>账号</p><input type="text" value=""></div>
143 <div><p>姓名</p><input type="text" value=""></div>
144 <div><p>性别</p><input type="text" value=""></div>
145 <div><p>电话</p><input type="text" value=""></div>
146 <button class="save">save</button>
147 </div>
148 </div>
149
150 </body>
151 <script>
152 var tb_arr=document.getElementsByClassName(‘tb‘);
153 var tb1_arr=document.getElementsByClassName(‘tb1‘);
154 var tb0_arr=document.getElementsByClassName(‘tb0‘);
155 var add_user=document.getElementsByClassName(‘add‘)[0];
156 var save_user=document.getElementsByClassName(‘save‘)[0];
157 //编辑函数
158 for(var i=0;i<tb_arr.length;i++){
159 var ele =tb_arr[i];
160 ele.onclick=function () {
161 var tr_arr=this.parentElement.parentElement.children;
162 for (var i=0;i<tr_arr.length-1;i++){
163 tr_arr[i].innerHTML=‘<input type="text" value="">‘
164 }
165 };
166 }
167 //保存函数
168 for(var i=0;i<tb0_arr.length;i++){
169 var ele =tb0_arr[i];
170 ele.onclick=function () {
171 var tr_arr=this.parentElement.parentElement.children;
172 var recvs=new Array(4);
173 for (var i=0;i<tr_arr.length-1;i++){ //获取用户输入的值
174
175 recvs[i]=tr_arr[i].children[0].value
176 }
177 for (var i=0;i<tr_arr.length-1;i++){ //将用户信息变为用户输入值
178 tr_arr[i].innerText=recvs[i];
179 }
180 };
181
182 }
183
184 //删除函数
185 for(var j=0;j<tb1_arr.length;j++){
186 var ele2 =tb1_arr[j];
187 ele2.onclick=function () {
188 var ele_remove=this.parentElement.parentElement;
189 var par1=ele_remove.parentElement;
190 par1.removeChild(ele_remove)
191 }
192 }
193 //添加用户函数
194 add_user.onclick=function () {
195 var eles=document.getElementsByClassName(‘btn‘);
196 for(var i=0;i<eles.length;i++){
197 eles[i].classList.remove(‘hide‘);
198 }
199 };
200 //保存用户函数
201 save_user.onclick=function(){
202 var eles=document.getElementsByClassName(‘btn‘);
203 for(var i=0;i<eles.length;i++){
204 eles[i].classList.add(‘hide‘);
205 }
206 var input_arr=document.getElementsByTagName(‘input‘);
207 for(var i=0;i<input_arr.length;i++){
208 var num =tb_arr.length;
209 var tr_add=document.createElement(‘tr‘);
210 tr_add.setAttribute(‘class‘,num+1);
211 var par=document.getElementsByClassName(‘Tb‘)[0];
212 par.appendChild(tr_add);
213
214 num=input_arr.length;
215 for (var i=0;i<num;i++){
216 var newtd=document.createElement(‘td‘);
217 newtd.innerHTML=input_arr[i].value;
218 tr_add.appendChild(newtd)
219 }
220 var newtd1=document.createElement(‘td‘);
221 tr_add.appendChild(newtd1);
222 var btn1=document.createElement(‘button‘);
223 btn1.innerText=‘编辑‘;
224 btn1.setAttribute(‘class‘,‘tb‘);
225 var btn0=document.createElement(‘button‘);
226 btn0.innerText=‘保存‘;
227 btn0.setAttribute(‘class‘,‘tb0‘);
228 var btn2=document.createElement(‘button‘);
229 btn2.innerText=‘删除‘;
230 btn2.setAttribute(‘class‘,‘tb1‘);
231 newtd1.appendChild(btn1);
232 newtd1.appendChild(btn0);
233 newtd1.appendChild(btn2);
234 }
235 };
236
237 </script>
238 </html>
时间： 2024-11-02 15:35:22