2. IT
    3. JS篇（3）

    JS篇（3）

    xiaoxiao2021-03-25  105

    仿淘宝搜索框

    <!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 检测用户表单输入内容 // 事件是可以连等的btn.onclick=btn.onmouseover $("txt").oninput = $("txt").onpropertychange = function(){ if(this.value ==""){ $("message").style.display = "block"; } else { $("message").style.display = "none"; } } //$("txt").oninput = function(){ //if(this.value ==""){ //$("message").style.display = "block"; //} //else { //$("message").style.display = "none"; //} //} //$("txt").onpropertychange = function(){ //if(this.value ==""){ //$("message").style.display = "block"; //} //else { //$("message").style.display = "none"; //} //} } </script> </head> <body> <div class="search"> <input type="text" id="txt"/> <!--想光标跳到谁身上就放谁的ID,当我们点击label的时候，光标回到input里面--> <label for="txt" id="message">必败的国际大牌</label> </div> </body> </html>

    判断用户输入事件

    正常浏览器支持 :oninput Ie 678支持的 : onpropertychange

    数组的遍历

    <script> var num = 10; var arr = [1,3,5,6,7]; console.log(arr[3]); // for(var i=0;i<arr.length;i++) // { // console.log(arr[i]); // } for(var i=0,len=arr.length;i<len;i++) { console.log(arr[i]); } </script>

    隔行变色

    原图 鼠标经过变色（1） 鼠标经过变色（2）

    <!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: #ccc!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"; } //鼠标经过li的时候，当前的（this）底色变量 lis[i].onmouseover = function(){ //！！！！！一定是this不是lis[i]，因为是当前鼠标在的这个li变色！！！！ 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>

    鼠标经过颜色变深，但是已经有背景色的li未发生变化，因为之前的颜色写在行内式，权重是1000，.current权重是10，所以会被盖住(如图) 所以要提高current的权重＋“！important”

    求平均值

    <script> // var arr = [1,2,3,4,5,6]; // var sum = 0; // for(i=0,leg=arr.length;i<leg;i++){ // sum=sum+arr[i]; // } // console.log(sum/arr.length) var arr= [10,20,30]; function avg(array){ var len = array.length; var sum = 0; for(var i=0; i<len;i++){ sum+=array[i]; } return sum/len; } console.log(avg(arr)) </script>

    遍历京东背景图片

    图片位置坐标以及对应索引号依次为（0，0）->0；（0，-25）->1；（0，-50）->2；得到 坐标=（索引号*25）

    在之前的京东网页上继续写JS:

    <script> var iis = document.getElementById("iconsprite").getElementsByTagName("i"); alert(iis.length) for(var i=0;i<iis.length;i++){ iis[i].style.backgroundPosition = "0 "+(-25*i)+"px"; } </script>

    如此，图片得到遍历：

    字符相连

    数值相加，字符相连

    “0”+10 显示为010 10-“2” 显示为8 也就是说，加号会连，但是减乘除都是当做数字0运算 所有input取过来的值是字符型 将字符型转化成数值型: var num = Number(txt.value); var num = parseInt(txt.value); 引引加加：“50px”+i+”px”; “你好“”+i+“吧”等同于 “你好1”+“吧”（i为任意数值）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> //将js写在input的上面需要加window.onload，如果写在input下面，就不需要了，因为程序是从上向下执行 window.onload = function(){ var txt = document.getElementById("txt"); //没有给button的id值，可以用数组写 var btn = document.getElementsByTagName("button")[0]; btn.onclick = function(){ var num = Number(txt.value); alert(num+num); } } </script> </head> <body> <input type="text" id="txt"> <button>点击</button> </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"); // bottom 里面的input /* btns[0].onclick = function(){ for(var i=0; i<inputs.length;i++) { inputs[i].checked = true; // 选中表单 } } btns[1].onclick = function(){ for(var i=0;i<inputs.length;i++) { inputs[i].checked = false; } } btns[2].onclick = function(){ for(var i=0;i<inputs.length;i++) { if(inputs[i].checked == true) { inputs[i].checked = false; } else { inputs[i].checked = true; } } }*/ /*全选和取消 函数*/ 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> </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属性 索引号 //如果直接写成index=i;则会出现undefined情况 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>

    var index = 2;是变量，谁都可以用 arr.index = 2;是自定义属性，他只能在arr才能使用

    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; } </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 = ""; } // 当前的那个按钮 的添加 类名 this.className = "purple"; //先隐藏下面所有的 div盒子 for(var i=0;i<divs.length;i++) { divs[i].style.display = "none"; } //留下中意的那个 跟点击的序号有关系的 divs[this.index].style.display ="block"; } } } </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 style="display: block;">1好盒子</div> <div>2好盒子</div> <div>3好盒子</div> <div>4好盒子</div> <div>5好盒子</div> </div> </div> </body> </html>

    改进后：

    <!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(){ for(var j=0;j<btns.length;j++) { btns[j].className = ""; divs[j].className = ""; } this.className = "purple"; 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>
    转载请注明原文地址: https://ju.6miu.com/read-23689.html

    技术

    最新回复(0)