模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ height: 1111px; background-color: #a42099; } .shade{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.3; } .module1{ height: 233px; width: 233px; background-color: #75a49c; position: absolute; top: 40%; left: 40%; } .hide{ display:none; } </style> </head> <body> <div class="content"> <button class="btn" onclick="f()">show</button> </div> <div class="shade hide"></div> <div class="module1 hide"> <button class="btn2" onclick="back()">取消</button> </div> <script> function f() { var ele1 =document.getElementsByClassName("hide") var ele2 =document.getElementsByClassName("hide") ele1[0].classList.remove("hide") ele2[0].classList.remove("hide") } function back() { var ele1 =document.getElementsByClassName("shade")[0] var ele2 =document.getElementsByClassName("module1")[0] ele1.classList.add("hide") ele2.classList.add("hide") } </script> </body> </html>
正反选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="selectALL()">全选</button> <button>取消</button> <button onclick="fan()">反选</button> <table border="1px"> <tr> <td><input type="checkbox"></td> <td>1111</td> <td>1111</td> <td>1111</td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td><input type="checkbox" ></td> <td>3</td> <td>31</td> <td>3</td> </tr> </table> <script> function selectALL() { var eles = document.getElementsByTagName("input"); console.log(eles) for (var i=0;i<3;i++) { console.log(eles[i]) eles[i].checked=true } } function fan() { var eles = document.getElementsByTagName("input"); for (var i=0;i<3;i++){ if (eles[i].checked) eles[i].checked=false else eles[i].checked=true } } </script> </body> </html>
二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="province"> <option value="">请选择省份</option> < </select> <select name="" id="citys"> <option value="">请选择城市</option> </select> <script> data={ "河北省":["石家庄","廊坊"],"山西省":["晋城","大同"] } var pro_ele = document.getElementById("province"); var city_ele = document.getElementById("citys"); for (var i in data){ var op = document.createElement("option") op.innerText=i console.log(i) pro_ele.appendChild(op) } pro_ele.onchange=function () { // this.selectedIndex 获取选中标签的索引 // this.options 获取所有option标签 city_ele.options.length=1; //每次进来清空option，并留下请选择 citys = data[this.value] for (var i in citys){ op = document.createElement("option") op.innerText=citys[i] city_ele.appendChild(op) } } </script> </body> </html>