目录
- input框动态显示事件
- 红绿灯模拟
- 顶部广告栏关闭
- 鼠标悬停IMG上时，更换另一张图片
- 模态框案例
- 模态框案例
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>
input框动态显示事件
红绿灯
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="width: 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;width: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>
模态框
回到顶部
原文地址：https://www.cnblogs.com/jjzz1234/p/11366475.html
时间： 2024-10-13 01:09:51