select框联动效果
需求：当在textarea中输入内容，点击留言按钮，会添加到浏览器中，最新留言出现在最顶端。
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>select联动</title> 6 </head> 7 <body> 8 <select name="province" id="province"> 9 <option value="0" selected>请选择省份</option> 10 </select> 11 <select name="city" id="city"> 12 <option value="">请选择市</option> 13 </select> 14 </body> 15 <script type="text/javascript"> 16 data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]} 17 var select1 = document.getElementById('province'); 18 for (i in data){ 19 var option = document.createElement('option'); 20 option.innerText = i; 21 select1.appendChild(option); 22 } 23 select1.onchange = function () { 24 var select2 = document.getElementById('city'); 25 select2.innerText = null; 26 var choosed = select1.options[this.options.selectedIndex].innerText; 27 for (var i=0;i<data[choosed].length;i++){ 28 var option = document.createElement('option'); 29 option.value = i; 30 option.innerText = data[choosed][i]; 31 select2.appendChild(option) 32 } 33 } 34 </script> 35 </html>
简易留言板
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简易留言板</title> 6 <style> 7 *{padding:0; margin: 0;} 8 .close{ 9 display: inline-block; 10 width: 20px; 11 height: 20px; 12 line-height: 20px; 13 text-align: center; 14 cursor: pointer; 15 background-color: rgba(0,0,0,.1); 16 margin-left: 20px;} 17 18 </style> 19 </head> 20 <body> 21 <h1>简易里留言板</h1> 22 <hr> 23 <div id="box"> 24 25 </div> 26 <textarea id="msg" ></textarea> 27 <input type="button" id="btn" value="留言"> 28 <button onclick="sum()">统计</button> 29 </body> 30 <script type="text/javascript"> 31 //将ul表建添加到div#box标签中 32 var oul = document.createElement('ul'); //创建一个ul准备存放留言 33 var obox = document.getElementById('box'); 34 obox.appendChild(oul); 35 36 var obtn = document.getElementById('btn'); 37 var omsg = document.getElementById('msg'); 38 39 //获取留言数量 40 var count = 0; 41 obtn.onclick = function () { 42 //点击留言按钮事件 43 //第一步：创建li标签 44 var oli = document.createElement('li'); 45 //获取留言框内的内容 46 oli.innerHTML = omsg.value+"<span class='close'>x</span>"; 47 48 //第二步：如果是第一条留言，直接加到ul里面 49 var olis = document.getElementsByTagName('li'); 50 if (olis.length === 0){ 51 oul.appendChild(oli); 52 count++; 53 } 54 else { 55 // 如果不是第一次留言，则插入到第一个Li的前面 56 oul.insertBefore(oli,olis[0]); 57 count++; 58 } 59 60 //添加完数据之后 清空textaera 61 omsg.value = ''; 62 63 //点击x，删除当前的一条数据 64 //首先先获取所有的x 65 var ospans = document.getElementsByTagName('span'); 66 //循环，对所有的x添加事件 67 for (var i=0; i< ospans.length;i++){ 68 ospans[i].onclick = function () { 69 oul.removeChild(this.parentNode); 70 count--; 71 } 72 } 73 function sum() { 74 alter('一共发布了"+count+"条留言'); 75 } 76 } 77 </script> 78 </html>
使用js模拟选择器中hover代码
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用js模拟选择器中hover代码解释</title> 6 <style> 7 button{margin:10px;width:100px;height:40px;cursor:pointer} 8 .current{background-color: darkgray} 9 </style> 10 </head> 11 <body> 12 <button>按钮1</button> 13 <button>按钮2</button> 14 <button>按钮3</button> 15 <button>按钮4</button> 16 <button>按钮5</button> 17 </body> 18 <script> 19 var btn= document.getElementsByTagName("button"); 20 for (var i=0;i<btn.length;i++) 21 { 22 //要为每一个按钮绑定事件，所以用到了for循环 23 btn[i].onmouseover = function () { 24 //【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current 25 //排他思想和for循环连用 26 for(var j=0;j<btn.length;j++) 27 { 28 btn[j].className=""; 29 } 30 this.className = "current"; 31 } 32 } 33 //鼠标离开current时，还原背景色 34 for(var i=0;i<btn.length;i++){ 35 btn[i].onmouseout = function () { 36 this.className =''; 37 } 38 } 39 </script> 40 </html> 41 鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className置空，然后把(this)按钮的className设置为current，达到变色的效果。核心代码： 42 43 //排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current 44 //排他思想和for循环连用 45 for(var j=0;j<btnArr.length;j++){ 46 btnArr[j].className = ""; 47 } 48 this.className = "current";
tab栏选项卡
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab栏选项卡</title> 6 <style> 7 *{padding:0;margin:0} 8 ul{list-style: none;} 9 #tab{width:480px;margin:20px auto;border: gray;} 10 ul{width:100%;overflow: hidden;} 11 ul li{float:left;width:160px;height:60px;line-height: 60px;text-align: center; 12 background: #cccccc;} 13 ul li a{text-decoration: none;color:black} 14 li.active{background-color: gray;} 15 p{display: none;height:200px;text-align: center;line-height: 200px;background-color: lightyellow} 16 p.active{display:block} 17 </style> 18 </head> 19 <body> 20 <div id="tab"> 21 <ul> 22 <li class="active"><a href="#">首页</a></li> 23 <li ><a href="#">新闻</a></li> 24 <li ><a href="#">图片</a></li> 25 </ul> 26 <p class="active">首页内容</p> 27 <p>新闻内容</p> 28 <p>图片</p> 29 </div> 30 </body> 31 <script> 32 window.onload=function () { 33 //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的p也显示出来(添加类); 34 //思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。 35 var tabli = document.getElementsByTagName('li'); 36 var tabcontent = document.getElementsByTagName('p'); 37 for (var i=0;i<tabli.length;i++) 38 {// 绑定索引值（新增一个自定义属性：index属性） 39 tabli[i].index = i; 40 tabli[i].onclick= function () { 41 // 1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想) 42 for (var j=0;j<tabli.length;j++) 43 { 44 tabli[j].className=''; 45 tabcontent[j].className=''; 46 } 47 this.className = 'active'; 48 tabcontent[this.index].className = 'active'; 49 } 50 51 } 52 } 53 </script> 54 </html>
购物车案例
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>购物车案例</title> 6 <style> 7 *{padding: 0;margin: 0;} 8 .box{width: 500px;height: 400px;margin: 100px auto; 9 background-color: rgba(255,255,255,0.4);position: relative;} 10 .car{ width: 150px; height: 30px;background-color: #fff;padding-left: 30px;text-align: center; 11 position: absolute;left: 130px;top: 3px;z-index: 3;border: 1px solid green;line-height: 30px} 12 .shop{width: 310px;height: 200px;background-color: #fff;position: absolute; 13 top:33px;left: 0;display: none;} 14 div.c{border-bottom-width: 0;} 15 div.t{ border: 1px solid green;} 16 </style> 17 </head> 18 <body> 19 <div class="box"> 20 <div class="car" id="mycar">我的购物车</div> 21 <div class="shop t" id="shop"></div> 22 </div> 23 </body> 24 <script> 25 var myCar = document.getElementById('mycar'); 26 var shop = document.getElementById('shop'); 27 mycar.onmouseover=function () { 28 shop.style.display = 'block'; 29 myCar.className += ' c'; //c前边的空格不能省略，要凑成 'car c'的结构 30 }; 31 myCar.onmouseout = function () { 32 shop.style.display = 'none'; 33 myCar.removeAttribute('class'); 34 myCar.className = 'car'; 35 } 36 </script> 37 </html>
字体随即变色
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>字体随机变色</title> 6 </head> 7 <body> 8 <div> 9 <span id="content">春天在哪里呀，春天在哪里，春天在那小朋友的眼睛里</span> 10 </div> 11 </body> 12 <script> 13 setInterval(f,1000); //重复运行 14 function f() { 15 var content = document.getElementById('content'); 16 var color = parseInt(Math.ceil(Math.random()*16777216),16) ; 17 //parseInt() 函数可解析一个字符串，并返回一个整数 18 content.style.color = '#'+color 19 } 20 </script> 21 </html>
计时器模拟
1 <!doctype html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>计时器案例</title> 9 <style> 10 div span{display:inline-block; height:150px;line-height: 150px;font-size: 50px} 11 .num{background-color: darkgray;width: 100px;text-align: center;border-radius: 10px} 12 .btn{padding:20px;text-align: center} 13 </style> 14 </head> 15 <body> 16 <div> 17 <div> 18 <span class="num" id="hour0">0</span> 19 <span class="num" id="hour1">0</span> 20 <span>:</span> 21 <span class="num" id="min0">0</span> 22 <span class="num" id="min1">0</span> 23 <span>:</span> 24 <span class="num" id="sec0">0</span> 25 <span class="num" id="sec1">0</span> 26 </div> 27 <div class="btn"> 28 <button id = "start" >开始</button> 29 <button id = "stop" >停止</button> 30 <button id = "reset" >重置</button> 31 </div> 32 </div> 33 34 </body> 35 <script> 36 var start = document.getElementById('start'); 37 var stop = document.getElementById('stop'); 38 var reset = document.getElementById('reset'); 39 start.onclick = function () { 40 interval = setInterval('change_bar("sec",6)',1000); 41 }; 42 function change_bar(idval,maxval) { 43 var s1 = document.getElementById(idval+'1'); 44 var s1_value = parseInt(s1.innerText); 45 s1_value++; 46 if(s1_value === 10){ 47 s1_value = 0; 48 var s0 = document.getElementById(idval+'0'); 49 var s0_value = parseInt(s0.innerText); 50 s0_value ++; 51 if (s0_value === maxval) 52 { 53 s0_value = 0; 54 if(idval === 'sec') 55 {change_bar('min',6);} 56 else if (idval === 'min') 57 {change_bar('hour',10)} 58 } 59 s0.innerText=s0_value; 60 } 61 s1.innerText = s1_value; 62 } 63 stop.onclick = function () { 64 clearInterval(interval); 65 } ; 66 reset.onclick = function () { 67 clearInterval(interval); 68 var spans = document.getElementsByClassName('num'); 69 for (var i=0;i<spans.length;i++) 70 { 71 spans[i].innerText = '0'; 72 } 73 } 74 </script> 75 </html>