1 1. 模态框案例 2 需求： 3 4 打开网页时有一个普通的按钮，点击当前按钮显示一个背景图，中心并弹出一个弹出框，点击X的时候会关闭当前的模态框 5 6 代码如下： 7 8 <!DOCTYPE html> 9 <html> 10 <head> 11 <meta charset="UTF-8"> 12 <title></title> 13 <style type="text/css"> 14 *{ 15 padding: 0; 16 margin: 0; 17 } 18 html,body{ 19 height: 100%; 20 } 21 #box{ 22 width: 100%; 23 height: 100%; 24 background: rgba(0,0,0,.3); 25 } 26 #content{ 27 position: relative; 28 top: 150px; 29 width: 400px; 30 height: 200px; 31 line-height: 200px; 32 text-align: center; 33 color: red; 34 background-color: #fff; 35 margin: auto; 36 } 37 #span1{ 38 position: absolute; 39 background-color: red; 40 top: 0; 41 right: 0; 42 width: 30px; 43 height: 30px; 44 line-height: 30px; 45 text-align: center; 46 color: #fff; 47 48 } 49 </style> 50 </head> 51 <body> 52 <button id="btn">弹出</button> 53 </body> 54 <script type="text/javascript"> 55 //获取dom元素 1.获取事件源 56 var oBtn = document.getElementById(‘btn‘); 57 //创建弹出模态框的相关DOM对象 58 var oDiv = document.createElement(‘div‘); 59 var oP = document.createElement(‘p‘); 60 var oSpan = document.createElement(‘span‘); 61 62 63 // 设置属性 64 oDiv.id = ‘box‘; 65 oP.id = ‘content‘ 66 oP.innerHTML = ‘模态框成功弹出‘ 67 oSpan.innerHTML = ‘X‘; 68 oSpan.id = ‘span1‘ 69 70 // 追加元素 71 oDiv.appendChild(oP); 72 oP.appendChild(oSpan); 73 74 // 点击弹出按钮 弹出模态框 75 oBtn.onclick = function(){ 76 //动态的添加到body中一个div 77 this.parentNode.insertBefore(oDiv,oBtn) 78 79 } 80 // 点击X 关闭模态框 81 oSpan.onclick = function(){ 82 // 移除oDiv元素 83 oDiv.parentNode.removeChild(oDiv) 84 } 85 86 </script> 87 </html>
1.2、简易留言板
1 当在textarea中输入内容，点击留言按钮，会添加到浏览器中 2 3 效果图如下： 4 5 6 7 代码如下： 8 9 <!DOCTYPE html> 10 <html> 11 <head> 12 <meta charset="UTF-8"> 13 <title>留言板</title> 14 <style type="text/css"> 15 *{ 16 padding: 0; 17 margin: 0; 18 } 19 .close{ 20 display: inline-block; 21 width: 20px; 22 height: 20px; 23 line-height: 20px; 24 text-align: center; 25 cursor: pointer; 26 background-color: rgba(0,0,0,.1); 27 margin-left: 20px; 28 } 29 </style> 30 </head> 31 <body> 32 <h1>简易留言板</h1> 33 <div id="box"> 34 <!--<ul> 35 36 </ul>--> 37 38 </div> 39 <textarea id="msg"></textarea> 40 <input type="button" id="btn" value="留言"/> 41 <button οnclick="sum()">统计</button> 42 </body> 43 <script type="text/javascript"> 44 45 // 0 将ul标签添加到div#box标签中 46 var oUl = document.createElement(‘ul‘); 47 var oBox = document.getElementById(‘box‘); 48 oBox.appendChild(oUl); 49 50 var oBtn = document.getElementById(‘btn‘); 51 var oMsg = document.getElementById(‘msg‘) 52 // 控制留言的总数量 53 var count = 0; 54 oBtn.onclick = function(){ 55 56 57 // 点击留言按钮事件操作 58 // 1.创建li标签 59 var oLi = document.createElement(‘li‘); 60 //2.设置内容 61 oLi.innerHTML = oMsg.value + "<span class=‘close‘>X</span>" 62 63 // 3.如果想在插入的第一个li获取的前面继续添加li标签 64 //3.1获取li标签 65 var olis = document.getElementsByTagName(‘li‘); 66 //3.2 如果是第一次添加的li标签，则直接添加到ul的后面 67 if(olis.length == 0){ 68 oUl.appendChild(oLi); 69 count++; 70 71 }else{ 72 // 3.3 如果不是第一次添加的li标签，则插入到第一个li标签的前面 73 oUl.insertBefore(oLi,olis[0]); 74 count++; 75 } 76 // 4.添加完成之后 清空textarea的值 77 oMsg.value = ‘‘; 78 79 80 // 5.点击X的时候删除当前的一条数据 81 //5.1先获取所有的X 82 var oSpans = document.getElementsByTagName(‘span‘); 83 84 // 5.2for循环 对所有的X添加点击事件 85 for(var i = 0; i< oSpans.length; i++){ 86 oSpans[i].onclick = function(){ 87 // 5.3 移除当前的li标签 88 oUl.removeChild(this.parentNode) 89 count--; 90 } 91 } 92 93 94 } 95 96 function sum(){ 97 alert(‘一共发布了‘+count+‘条留言‘); 98 99 } 100 </script> 101 </html>
1.3、鼠标滑过颜色变
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 button { 8 margin: 10px; 9 width: 100px; 10 height: 40px; 11 cursor: pointer; 12 } 13 .current { 14 background-color: red; 15 } 16 </style> 17 </head> 18 <body> 19 <button>按钮1</button> 20 <button>按钮2</button> 21 <button>按钮3</button> 22 <button>按钮4</button> 23 <button>按钮5</button> 24 25 <script> 26 //需求：鼠标放到哪个button上，改button变成黄色背景（添加类） 27 28 29 var btnArr = document.getElementsByTagName("button"); 30 //绑定事件 31 for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环 32 btnArr[i].onmouseover = function () { 33 //【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current 34 //排他思想和for循环连用 35 for(var j=0;j<btnArr.length;j++){ 36 btnArr[j].className = ""; 37 } 38 this.className = "current"; //【重要】核心代码 39 } 40 } 41 42 //鼠标离开current时，还原背景色 43 for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环 44 btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原 45 this.className = ""; 46 } 47 } 48 49 </script> 50 51 </body> 52 53 54 </html> 55 代码解释： 56 57 鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是： 58 59 //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current 60 //排他思想和for循环连用 61 for(var j=0;j<btnArr.length;j++){ 62 btnArr[j].className = ""; 63 } 64 this.className = "current";
1.4Tab选项卡
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 ul{ 12 list-style: none; 13 } 14 #tab{ 15 width: 480px; 16 margin: 20px auto; 17 border: 1px solid red; 18 } 19 ul{ 20 width: 100%; 21 overflow: hidden; 22 } 23 ul li{ 24 float: left; 25 width: 160px; 26 height: 60px; 27 line-height: 60px; 28 text-align: center; 29 background-color: #cccccc; 30 } 31 32 ul li a{ 33 text-decoration: none; 34 color:black; 35 } 36 li.active{ 37 background-color: red; 38 } 39 p{ 40 display: none; 41 height: 200px; 42 text-align: center; 43 line-height: 200px; 44 background-color: red; 45 } 46 p.active{ 47 display: block; 48 49 } 50 51 </style> 52 </head> 53 <body> 54 <div id="tab"> 55 <ul> 56 <li class="active"> 57 <a href="#">首页</a> 58 </li> 59 <li> 60 <a href="#">新闻</a> 61 </li> 62 <li> 63 <a href="#">图片</a> 64 </li> 65 </ul> 66 <p class="active">首页内容</p> 67 <p>新闻内容</p> 68 <p>图片内容</p> 69 70 71 </div> 72 </body> 73 <script type="text/javascript"> 74 window.onload = function(){ 75 // //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类); 76 //思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 77 78 var tabli = document.getElementsByTagName(‘li‘); 79 var tabContent = document.getElementsByTagName(‘p‘) 80 81 for(var i = 0; i < tabli.length; i++){ 82 // 绑定索引值（新增一个自定义属性：index属性） 83 tabli[i].index = i; 84 tabli[i].onclick = function(){ 85 86 // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想) 87 for(var j = 0; j < tabli.length; j++){ 88 tabli[j].className = ‘‘; 89 tabContent[j].className = ‘‘; 90 } 91 this.className = ‘active‘ 92 93 tabContent[this.index].className = ‘active‘;//【重要代码】 94 } 95 } 96 } 97 98 </script> 99 </html>
1.5、定时器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body{ 8 margin:0; 9 padding:0; 10 } 11 .box{ 12 width:500px; 13 height:300px; 14 margin:100px auto; 15 } 16 .box::after{ 17 content:""; 18 width:0; 19 clear:both; 20 display:block; 21 } 22 .box div{ 23 width:calc(100% / 6); 24 height:30px; 25 float:left; 26 text-align:center; 27 line-height:30px; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="box"> 33 <div class="year"></div> 34 <div class="month"></div> 35 <div class="ri"></div> 36 <div class="hours"></div> 37 <div class="Minutes"></div> 38 <div class="Seconds"></div> 39 </div> 40 <script> 41 var dDate = document.querySelectorAll(".box div"); 42 function getDate() { 43 var ab = new Date(); 44 var year = ab.getFullYear(); //年 45 var month = ab.getMonth()+1; //月 46 var ri = ab.getDate(); //日 47 var hours = ab.getHours(); //小时 48 var Minutes = ab.getMinutes(); //分钟 49 var Seconds = ab.getSeconds();//秒 50 // console.log(year+":"+month+":"+ri+":"+hours+":"+Minutes+":"+Seconds); 51 dDate[0].innerHTML=year+"年"; 52 dDate[1].innerHTML=month+"月"; 53 dDate[2].innerHTML=ri+"日"; 54 dDate[3].innerHTML=hours+"时"; 55 dDate[4].innerHTML=Minutes+"分"; 56 dDate[5].innerHTML=Seconds+"秒"; 57 } 58 setInterval(function() { 59 getDate(); 60 }, 1000); 61 </script> 62 </body> 63 </html>
1.6、计算器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 body{ 8 padding:0; 9 margin:0; 10 } 11 .box{ 12 width:400px; 13 height:500px; 14 /* background-color: pink; */ 15 margin:0 auto; 16 } 17 .xianshiqi{ 18 width:350px; 19 height:100px; 20 margin:50px auto 0; 21 line-height: 100px; 22 padding:0 25px ; 23 background-color: azure; 24 } 25 .box .anniu{ 26 27 width:calc((100% - 3px) / 4); 28 float:left; 29 margin-right:1px; 30 margin-top:1px; 31 height:calc((100% - 3px) / 4); 32 /* background-color:#ccc; */ 33 font-size:26px; 34 text-align:center; 35 line-height:110px; 36 cursor: pointer; 37 } 38 .box .anniu:hover{ 39 background-color: #eee; 40 } 41 .box .anniu:nth-child(4n){ 42 margin-right:0; 43 } 44 .box .di{ 45 margin-top:0px; 46 } 47 .qk{ 48 width:400px; 49 height:50px; 50 margin:0 auto; 51 text-align: center;; 52 line-height: 50px; 53 cursor: pointer; 54 clear: both; 55 } 56 .qk:hover{ 57 background-color: #eee; 58 color:#fff; 59 } 60 </style> 61 </head> 62 <body> 63 <div class="xianshiqi">请点击输入运算</div> 64 <div class="box"> 65 <div class="anniu di">7</div> 66 <div class="anniu di">8</div> 67 <div class="anniu di">9</div> 68 <div class="anniu di">/</div> 69 70 <div class="anniu">4</div> 71 <div class="anniu">5</div> 72 <div class="anniu">6</div> 73 <div class="anniu">*</div> 74 75 <div class="anniu">1</div> 76 <div class="anniu">2</div> 77 <div class="anniu">3</div> 78 <div class="anniu">-</div> 79 80 <div class="anniu">0</div> 81 <div class="anniu">.</div> 82 <div class="anniu">+</div> 83 <div class="anniu">=</div> 84 <div class="qk">清空</div> 85 </div> 86 87 <script> 88 var box = document.querySelector(".box"); 89 var xsq = document.querySelector(".xianshiqi"); 90 var anniu = document.querySelectorAll(".anniu"); 91 var str = "";//这个用来记录用于输入的所有的内容 92 box.addEventListener("click",function(){//给里面的内容注册冒泡 93 var nr = event.target.innerText;//获取每次点击的内容 94 if(nr=="清空"){ 95 xsq.innerText = "请点击输入运算"; 96 str =""; 97 return; 98 } 99 str += nr;//获取一次加上一次 100 if(str.indexOf("=")!=-1){//当有=号的时候就进入 101 102 if(str[str.length-2] == "*" ||str[str.length-2] == "-" ||str[str.length-2] == "*" ||str[str.length-2] == "/"){ 103 str = ""; 104 xsq.innerText = "你正确输入内容"; 105 return; 106 } 107 var xstr = str.substring(0,str.length-1);//截取获得=号之前的内容 108 xsq.innerText = eval(xstr);//直接执行截取后的代码 109 str = "";//str归空 110 return;//返回结果不执行下面的代码 111 } 112 xsq.innerText = str;//如果不执行if里面的代码就执行这个 113 }); 114 115 </script> 116 </body> 117 </html>
1.7、百度换肤
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 height: 150px; 13 /* 水平居中 */ 14 text-align: center; 15 padding-top: 50px; 16 /* FFFFFF a */ 17 background-color: rgba(255,255,255,0.2); 18 } 19 img{ 20 width: 150px; 21 } 22 body{ 23 background-image: url(../img/1.jpg); 24 } 25 </style> 26 </head> 27 <body <!-- style="background-image: ;" -->> 28 <div class="box"> 29 <img src="../img/1.jpg" /> 30 <img src="../img/2.jpg" /> 31 <img src="../img/3.jpg" /> 32 <img src="../img/4.jpg" /> 33 <img src="../img/5.jpg" /> 34 </div> 35 36 <script type="text/javascript"> 37 window.onload = function() { 38 var images = document.getElementsByTagName("img"); 39 for(var i = 0; i < images.length; i++) { 40 images[i].onclick = function() { 41 // this 代表当前设置点击事件的对象images[i] 42 var imageUrl = this.src; 43 console.log(imageUrl); 44 //document.body.style.backgroundImage = "url(../img/5.jpg)"; 45 document.body.style.backgroundImage = "url(" + imageUrl + ")"; 46 } 47 } 48 } 49 </script> 50 </body> 51 </html>
原文：https://www.cnblogs.com/shiyi2009/p/13887887.html