JS01(仿淘宝搜索框，数组，h5 placeholder、隔行变色、全选和反选、排他思想、tab栏切换)
仿淘宝搜索框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .search { width:300px; height: 30px; margin: 100px auto; position: relative; //相对布局 } .search input { width:200px; height:25px; } .search label { font-size: 12px; color:#ccc; position: absolute; top:8px; left:20px; cursor: text; } </style> <script> window.onload = function(){ function $(id){return document.getElementById(id);} //oninput 大部分浏览器支持 检测用户表单输入内容 //onpropertychange ie678 检测用户表单输入内容 $("txt").oninput = $("txt").onpropertychange = function(){ //输入的监听事件oninput if(this.value == " ") { $("message").style.display = "block"; } else { $("message").style.display = "none"; } } } </script> </head> <body> <div class="search"> <input type="text" id="txt"/> <label for="txt" id="message">必败的国际大牌</label> </div> </body> </html>
h5 placeholder
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" placeholder="必败的国际大牌"/> </body> </html>
隔行变色、
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } li { line-height: 30px; list-style-type: none; } li span { margin:5px; } .current{ background-color: #aaa!important; // 优先级最高 } </style> <script> window.onload = function(){ var lis = document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++) { if(i % 2 == 0) { lis[i].style.backgroundColor = "#eee"; } else { lis[i].style.backgroundColor = "#ddd"; } lis[i].onmouseover = function(){ this.className = "current"; //设置颜色类 } lis[i].onmouseout = function(){ this.className = ""; } } } </script> </head> <body> <div class="box"> <ul> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> <li> <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> </li> </ul> </div> </body> </html>
全选和反选、
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function(){ var btns = document.getElementsByTagName("button"); // 得到了所有的button var inputs = document.getElementById("bottom").getElementsByTagName("input"); /*全选和取消 函数*/ function all(flag){ for(var i=0;i<inputs.length;i++) { inputs[i].checked = flag; } } btns[0].onclick = function(){ all(true); }; btns[1].onclick = function(){ all(false); }; btns[2].onclick = function(){ for(var i=0;i<inputs.length;i++) { inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true; } } } </script> </head> <body> <div id="top"> <button>全选</button> <button>取消</button> <button>反选</button> </div> <div id="bottom"> <ul> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> <li>选项: <input type="checkbox"/></li> </ul> </div> </body> </html>
排他思想、
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .damao { background-color: pink; } </style> <script> window.onload = function(){ var btns = document.getElementsByTagName("button"); for(var i=0;i<btns.length;i++) { btns[i].index = i; // 给每个button 定义了一个index属性 索引号 btns[i].onclick = function(){ //清除所有人的 类名 只能用 for 遍历 alert(this.index); for(var j=0;j<btns.length;j++) { btns[j].className = ""; } //就剩下自己 就是一个 而且是点击那个 this.className = "damao"; } } } </script> </head> <body> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> <button>思想原理</button> </body> </html>
tab栏切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 400px; margin:100px auto; border:1px solid #ccc; } .bottom div{ width:100%; height: 300px; background-color: pink; display: none; } .purple { background-color: purple; } .bottom .show { display: block; } </style> <script> window.onload = function(){ var btns = document.getElementsByTagName("button"); var divs = document.getElementById("divs").getElementsByTagName("div"); for(var i= 0;i<btns.length;i++) { btns[i].index = i; // 难点 btns[i].onclick = function(){ //让所有的 btn 类名清空 //alert(this.index); for(var j=0;j<btns.length;j++) { btns[j].className = ""; divs[j].className = ""; } // 当前的那个按钮 的添加 类名 this.className = "purple"; //先隐藏下面所有的 div盒子 //留下中意的那个 跟点击的序号有关系的 divs[this.index].className = "show"; } } } </script> </head> <body> <div class="box"> <div class="top"> <button>第一个</button> <button>第二个</button> <button>第三个</button> <button>第四个</button> <button>第五个</button> </div> <div class="bottom" id="divs"> <div class="show">1好盒子</div> <div>2好盒子</div> <div>3好盒子</div> <div>4好盒子</div> <div>5好盒子</div> </div> </div> </body> </html>
