JavaScript-案例
时间计时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var ID; function start(){ if (ID == undefined) { foo(); ID=setInterval(foo, 1000) } } function stop(){ clearInterval(ID); ID=undefined; } function foo(){ var date = new Date(); document.getElementById('timer').value=date.toLocaleString(); } </script> </head> <body> <input type="text" id="timer"> <button onclick="start()">begin</button> <button onclick="stop()">stop</button> </body> </html>
左侧菜单+模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧菜单</title> <style> *{ margin-top:0; } .left_menu{ width:15%; height: 1000px; background-color: #e0e0e0; float: left; } .content{ width:85%; height: 1000px; background-color: aquamarine; float: left; } .menu{ width:100%; height: 30px; line-height: 30px; background-color: orangered; color: white; text-align: center; margin-bottom: 5px; } .hide, .dialog_box{ display: none; } .reg{ width: 60px; height: 40px; line-height: 40px; background-color: red; color: white; font-size: 20px; /*float: right;*/ margin-left: 100px; } .fade{ background-color: grey; position: fixed; opacity: 0.6; top:0; left:0; bottom:0; right:0; } .model{ width: 400px; height: 300px; background-color: white; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; } .exit{ width: 25px; height: 20px; /*line-height: 20px;*/ /*text-align: center;*/ position: absolute; right:0; top:0; background-color: red; color: white; } .input_fram{ margin-top: 30px; margin-left: 30px; } .sub{ width: 250px; height: 40px; /*background-color: #e0e0e0;*/ margin-top: 10px; } .hint{ width: 80px; height: 30px; line-height: 30px; text-align: right; /*margin-left: 30px;*/ float: left; } .inp{ width: 150px; height: 30px; line-height: 30px; float: left; margin-left: 5px; } #cancel{ width: 150px; height: 30px; line-height: 30px; margin-top: 10px; margin-left: 7px; } </style> </head> <body> <div class="left_menu"> <div class="title"> <div class="menu">菜单一</div> <div class="sub_menu"> <p>111</p> <p>222</p> <p>333</p> </div> </div> <div class="title"> <div class="menu">菜单二</div> <div class="sub_menu hide"> <p>111</p> <p>222</p> <p>333</p> </div> </div> <div class="title"> <div class="menu">菜单三</div> <div class="sub_menu hide"> <p>111</p> <p>222</p> <p>333</p> </div> </div> </div> <div class="content"> <button class="reg">注册</button> </div> <div class="fade dialog_box"></div> <form action="" class="model dialog_box"> <button class="exit">X</button> <div class="input_fram"> <div class="sub"><p class="hint">ip:</p><input type="text" class="inp"></div> <div class="sub"><p class="hint">port:</p><input type="text" class="inp"></div> <div class="sub"><p class="hint">username:</p><input type="text" class="inp"></div> <input type="reset" value="cancel" id="cancel"> </div> </form> <script> var ele_menus=document.getElementsByClassName('menu'); // var next_tag=ele_menu.nextElementSibling; for (var i=0;i<ele_menus.length;i++){ ele_menus[i].onclick=function () { this.nextElementSibling.classList.remove('hide'); //删除下一个兄弟标签的hide类名； var curr_parent_tag=this.parentElement; var class_title=this.parentElement.parentElement.children; // console.log('curr_parent',curr_parent_tag); for (var j=0;j<class_title.length;j++){ if (class_title[j]!=curr_parent_tag){ class_title[j].children[1].classList.add('hide'); } } } } // 点击注册按钮后显现对话框 var ele_reg=document.getElementsByClassName('reg')[0]; var ele_fade=document.getElementsByClassName('fade')[0]; var ele_model=document.getElementsByClassName('model')[0]; ele_reg.onclick=function () { ele_fade.classList.remove('dialog_box'); ele_model.classList.remove('dialog_box'); } // 点击对话框的x按钮,就退出 var ele_exit=document.getElementsByClassName('exit')[0]; ele_exit.onclick=function () { ele_fade.classList.add('dialog_box'); ele_model.classList.add('dialog_box'); } </script> </body> </html>
模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: white; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: grey; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: wheat; } </style> </head> <body> <div class="back"> <input class="c" type="button" value="click"> </div> <div class="shade hide handles"></div> <div class="models hide handles"> <input class="c" type="button" value="cancel"> </div> <script> var eles=document.getElementsByClassName("c"); var handles=document.getElementsByClassName("handles"); for(var i=0;i<eles.length;i++){ eles[i].onclick=function(){ if(this.value=="click"){ for(var j=0;j<handles.length;j++){ handles[j].classList.remove("hide"); } } else { for(var j=0;j<handles.length;j++){ handles[j].classList.add("hide"); } } } } </script> </body> </html>
div:hover div{ display ：none；}
鼠标悬浮在div上，修改另外一个div的属性（背景颜色或者 display等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c0 { width: 500px; height: 100px; } .c1 { width: 500px; height: 100px; background-color: darkblue; } .c-l { width: 300px; height: 100px; background-color: red; float: left; } .c-r { width: 200px; height: 100px; background-color: blanchedalmond; float: left; display: none; } .c1:hover .c-r { display: block; } </style> </head> <body> <div class="c1"> <div class="c0"> <div class="c-l"></div> <div class="c-r"></div> </div> </div> </body> </html>
