目录
input框动态显示事件
1 <head> 2 <meta charset="UTF-8"> 3 <title>动态显示时间</title> 4 <style> 5 input{width:200px;} 6 </style> 7 </head> 8 <body> 9 <input type="text" id="time"> 10 <button id="switch">开始</button> 11 </body> 12 13 <script> 14 var btn = document.getElementById('switch'); 15 btn.onclick = function () { 16 switch (this.innerText) { 17 case '开始': 18 this.innerText = '停止'; 19 timer1 = setInterval(update,1000); 20 break; 21 case '停止': 22 this.innerText = '开始'; 23 clearInterval(timer1); 24 break; 25 } 26 }; 27 function update() { 28 var t = document.getElementById('time'); 29 var dt = new Date(); 30 t.value = dt.toLocaleString(); 31 } 32 </script>
红绿灯
1 <head> 2 <meta charset="UTF-8"> 3 <title>事件-红绿灯</title> 4 <style> 5 .fa{display: inline-block; padding: 5px;border-radius: 10px;border-color: darkgray;border-style: solid} 6 .div0{width:100px;height:100px;border-radius: 50px; float: left; 7 border-color: white;background-color: gray; 8 display: inline-block;margin: 0;} 9 .div2{background-color: green;} 10 .div1{background-color: red;} 11 .div3{background-color: yellow;} 12 </style> 13 </head> 14 <body> 15 <div class="fa"> 16 <div id="d0" class="div0 div1"></div> 17 <div id="d1" class="div0"></div> 18 <div id="d2" class="div0"></div> 19 </div> 20 21 <script> 22 23 function change() 24 { 25 var tem = document.getElementsByClassName('div0'); 26 if (tem[0].classList.contains('div1')) 27 { 28 tem[0].classList.remove('div1'); 29 tem[1].classList.add('div2'); 30 } 31 else if (tem[1].classList.contains('div2')) 32 { 33 tem[1].classList.remove('div2'); 34 tem[2].classList.add('div3'); 35 } 36 else if (tem[2].classList.contains('div3')) 37 { 38 tem[2].classList.remove('div3'); 39 tem[0].classList.add('div1'); 40 } 41 42 } 43 setInterval(change,1000); 44 45 </script> 46 </body>
顶部广告栏关闭
1 <head> 2 <meta charset="UTF-8"> 3 <title>顶部广告关闭</title> 4 <style> 5 body{margin:0 ;} 6 .ad{ position:fixed ; top:0; width: 100%; height: 100px; 7 background-color: darkblue;opacity: 0.5} 8 .ad_content{position: fixed;top:0; padding:20px;color: #53ff09} 9 #close{position: fixed;top: 0; right: 0; background-color: lightyellow; 10 height: 20px;width:20px;text-align:center; line-height: 20px;font-size:30px} 11 .content{height: 1000px;background-color: gray} 12 </style> 13 </head> 14 <body> 15 <div class="ad" id="ad"> 16 <div class="ad_content"> 17 LOL新赛季即将开启，敬请期待 18 </div> 19 <div id="close"> 20 x 21 </div> 22 </div> 23 24 <div class="content"> 25 详情请关注LOL世界锦标赛官方微博 26 详情请关注LOL世界锦标赛官方微博 27 详情请关注LOL世界锦标赛官方微博 28 详情请关注LOL世界锦标赛官方微博 29 详情请关注LOL世界锦标赛官方微博 30 详情请关注LOL世界锦标赛官方微博 31 详情请关注LOL世界锦标赛官方微博 32 详情请关注LOL世界锦标赛官方微博 33 详情请关注LOL世界锦标赛官方微博 34 详情请关注LOL世界锦标赛官方微博 35 详情请关注LOL世界锦标赛官方微博 36 详情请关注LOL世界锦标赛官方微博 37 </div> 38 </body> 39 <script> 40 var closebtn = document.getElementById('close'); 41 closebtn.onclick = function () { 42 var ad= document.getElementById('ad'); 43 ad.style.display = 'none'; 44 } 45 </script>
鼠标悬停IMG上时，更换另一张图片
1 //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。 2 //步骤： 3 //1.获取事件源 4 //2.绑定事件 5 //3.书写事件驱动程序 6 7 <body> 8 <img src="1.jpg" id="box" style="cursor: pointer;border: 1px solid #ccc;" > 9 </body> 10 <script> 11 var img = document.getElementById('box'); 12 img.onmouseover = function () { 13 img.src = '2.jpg'; 14 }; 15 img.onmouseout = function () { 16 img.src = '1.jpg' 17 }; 18 </script>
悬浮框自动出现
1 <head> 2 <meta charset="UTF-8"> 3 <title>自动出现</title> 4 <style> 5 .d1{width:70px; height:25px;background-color: #cccccc;position: fixed; 6 bottom: 50px;right: 50px;text-align: center;line-height: 25px;border-radius: 5px;} 7 .d2{display: none} 8 .a1{text-decoration: none; color: #ff6700} 9 </style> 10 </head> 11 <body> 12 <div style=" 100% ; height: 2000px;background-color: gray"></div> 13 <div class="d1 d2" id="d1"><a class="a1" id="a1" href="#">回到顶部</a></div> 14 </body> 15 <script> 16 17 var sl = document.getElementById('d1'); 18 window.onscroll = function () { 19 console.log(document.documentElement.scrollTop); 20 if (document.documentElement.scrollTop>700){ 21 sl.classList.remove('d2'); 22 } 23 else { sl.classList.add('d2'); } 24 }; 25 26 </script> 27 28 // 行内实现 29 <body> 30 <div style="height: 4000px;20px;background-color: #ff6700"></div> 31 <p><a id="a1" style="position: fixed; bottom: 200px; z-index: 100; background-color: gray; right: 100px; color: white; display: block; padding: 5px; border-radius: 5px; text-decoration: none;" href="#">回到顶部</a></p> 32 33 </body> 34 <script> 35 var ab= document.getElementById('a1'); 36 window.onscroll = function () { 37 console.log(document.documentElement.scrollTop); 38 console.log(ab.style.display); 39 if (document.documentElement.scrollTop>700){ 40 ab.style.display = 'block'; 41 } 42 else { ab.style.display = 'none'; } 43 }; 44 </script> 45 </html>
模态框案例
需求：打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框。
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模态框</title> 6 <style> 7 *{margin:0;padding :0;} 8 html,body{height: 100%;} 9 #box{width:100%;height:100%;background: rgba(0,0,0,.3);} 10 #content{position: relative;top:150px;width:400px;height: 200px; 11 line-height: 200px;text-align: center; 12 color: red; background-color: #fff;margin:auto; } 13 #span1{position:absolute;background-color: red;top: 0 ;right:0;width: 30px; 14 height: 30px;text-align: center;color:#fff;line-height: 30px;} 15 </style> 16 </head> 17 <body> 18 <button id="btn">弹出</button> 19 </body> 20 <script type="text/javascript"> 21 //获取dom元素：1获取事件源 22 var oBtn = document.getElementById('btn'); 23 //创建弹出模态框的相关dom对象 24 var oDiv = document.createElement('div'); 25 var oP = document.createElement('p'); 26 var oSpan = document.createElement('span'); 27 28 //设置属性 29 oDiv.id = 'box'; 30 oP.id = 'content'; 31 oP.innerHTML='模态框弹出显示的内容'; 32 oSpan.innerText = 'X'; 33 oSpan.id = 'span1'; 34 35 //追加元素 36 oDiv.appendChild(oP); 37 oP.appendChild(oSpan); 38 39 //设置点击弹窗按钮 弹出模态框 40 oBtn.onclick = function () { 41 this.parentNode.insertBefore(oDiv,oBtn); 42 }; 43 44 //设置关闭按钮，关闭模态框 45 oSpan.onclick = function () { 46 oDiv.parentNode.removeChild(oDiv) 47 } 48 </script> 49 </html>