js基础之实例
Posted 柳姑娘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js基础之实例相关的知识，希望对你有一定的参考价值。
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>
以上是关于js基础之实例的主要内容，如果未能解决你的问题，请参考以下文章