這里給大家分享我在網(wǎng)上總結(jié)出來的一些知識，希望對大家有所幫助
隔行換色（%）:
window.onload = function() { var aLi = document.getElementsByTagName("li"); for(var i = 0; i < aLi.length; i++){ if(i%2 == 1){aLi[i].style.background = "#bfa"; } }}- aaa
- bbb
- ccc
- ddd
簡易計算器：
<script>window.onload = function(){var oNum1 = document.getElementById("num1"); var oNum2 = document.getElementById("num2"); var oBtn = document.getElementById("btn"); var oSel = document.getElementById("sel"); oBtn.onclick = function(){ var iNum1 = parseInt(oNum1.value); var iNum2 = parseInt(oNum2.value); switch(oSel.value){case "+": alert(iNum1+iNum2); break; case "-": alert(iNum1-iNum2); break; case "*": alert(iNum1*iNum2); break; case "/": alert(iNum1/iNum2); break; default: alert("你沒有合適的運算符！"); break; } }}</script>雙色球隨機數(shù)生成：
目標：生成一組（7個） 1-33之間的隨機不重復(fù)的整數(shù)（1.生成一個1-33之間的整數(shù)。 2.生成7個–>循環(huán)長度不固定用while循環(huán)。 3.要求不重復(fù),補零操作）
<script> function rnd(m, n) { return m + parseInt(Math.random()*(n-m));}//數(shù)組去重function findInArr(num,arr) {for(var i = 0; i < arr.length; i++) { if(arr[i] == num){ return true; } } return false; }function toDo(n){ return n < 10 ? "0" + n : "" + n; }var arr = [];while(arr.length < 7) { //1-34包括1，不包括34 var rNum = rnd(1,34); if(findInArr(rNum,arr) == false) { arr.push(toDo(rNum)); } }document.write(arr);</script>鼠標滑過div顯示隱藏：
條件判斷if：
點擊按鈕，如果div顯示，那么隱藏它，如果div隱藏，那么顯示它。
<script> function showHide() { var oDiv = document.getElementById("box1"); if (oDiv.style.display == "block") { oDiv.style.display = "none"; } else { oDiv.style.display = "block"; } }</script>背景色換膚功能：
一個頁面兩個按鈕，一個div點擊不同的按鈕，背景色分別變成不同的顏色，字體大小也要改變。
實現(xiàn)白天夜晚換膚功能<script> function showDay(){ document.body.className="day"; } function showNight(){ document.body.className="night"; }</script>
行為和結(jié)構(gòu)的分離：
<script>window.onload = function(){//1.獲取元素var oBtn = document.getElementById("btn");//2.加事件oBtn.onclick = function(){alert();};};</script>全選功能的實現(xiàn)：
<script>window.onload = function () {var oA = document.getElementById("all");var oBox = document.getElementById("box");//獲取一組元素var oInp = oBox.getElementsByTagName("input");oA.onclick = function () {for (var i = 0; i < oInp.length; i++) {oInp[i].checked = true;}};};</script>
操作元素類容和屬性的兩種方式：
①方式：
window.onload = function(){var oBtn = document.getElementById("btn");oBtn.style.background = "red";//方式二能實現(xiàn)1實現(xiàn)不了的功能oBtn["style"]["background"] = "green"; //var aaa = "background"; //oBtn.style[aaa] = "green";能夠使用變量}②內(nèi)容：
- 表單元素：oBtn.value
- 非表單元素：
前端學(xué)習(xí)
oP.innerHTML
反選功能實現(xiàn)：
window.onload = function() {var oR = document.getElementById("reverse");var oC = document.getElementById("C1");oR.onclick = function(){if(oC.checked == true){ oC.checked = false;}else{ oC.checked = true }}} //這樣寫太麻煩了，不夠簡潔。改變?nèi)缦拢?/pre><script>window.onload = function() {var oR = document.getElementById("reverse");var oC = document.getElementById("C1");oR.onclick = function() {oC.checked = !oC.checked;}}</script>聯(lián)動選擇：
需求：點擊上面的全選，那么下面都選中，如果下面全選中，那么上面也選中，如果下面有一個沒選中，那么上面不選中。
<script> window.onload = function() {var oA = document.getElementById("all"); var oBox = document.getElementById("box"); var oInp = oBox.getElementsByTagName("input"); oA.onclick = function(){ for(var i = 0; i < oInp.length; i++){ oInp[i].checked = oA.checked; } }; for(var i = 0; i < oInp.length; i++){oInp[i].onclick = function() {var count = 0; for(var i = 0; i < oInp.length; i++){ if(oInp[i].checked){ count++; } } if(count == oInp.length){ oA.checked = true; }else{ oA.checked = false; } } }}</script>全選
//為什么必須加一個box選項卡實現(xiàn)（排他思想）:
for循環(huán)是一瞬間完成的
<script>window.onload = function(){var oBox = document.getElementById("box");var oBtn = oBox.getElementsByTagName("input");var oDiv = oBox.getElementsByTagName("div");for(var i = 0; i < oBtn.length; i++){ oBtn[i].index = i; oBtn[i].onclick = function(){ for(var i = 0; i < oBtn.length; i++){oBtn[i].className = ""; oDiv[i].style.display = "none"; } this.className = "on"; oDiv[this.index].style.display = "block"; } }}</script>***獲得100米第一段奕宏真帥！美國懂王昨日于白宮遭**簡易定時器：
<script> window.onload = function() {var oTime = document.getElementById("time"); var oStart = document.getElementById("start"); var oStop = document.getElementById("stop"); var timer = null; function toDo(n){ return n < 10 ? "0" + n : n; } oStart.onclick = function() { var s = 0; clearInterval(timer);timer = setInterval(function(){ s++; oTime.value = toDo(parseInt(s / 60)) + ":" + toDo( s % 60); },50); }; oStop.onclick = function() {clearInterval(timer); }};</script>文字時鐘：
<script> window.onload = function() {var oP = document.getElementById("p1"); var timer = null; function toDo(n) {return n < 10 ? "0" + n : n; } function time() { var arr = ["日", "一", "二", "三", "四", "五","六"]; var oDate = new Date(); var year = oDate.getFullYear(); var month = oDate.getMonth() + 1; var date = oDate.getDate(); var w = oDate.getDay(); var h = oDate.getHours(); var m = oDate.getMinutes(); var s = oDate.getSeconds(); oP.innerHTML = year + "年" + month + "月" + date + "日" +toDo(h) +":" + toDo(m) + ":" + toDo(s) + "星期" + arr[w]; } time();//不需要等一秒鐘再執(zhí)行函數(shù) clearInterval(timer);//定時器先關(guān)閉再執(zhí)行 timer = setInterval(time,1000); }</script>2020年8月20日15：56：30星期四
延遲廣告：
圖片2s后顯示，2s后消失，當鼠標移入圖片時，不消失，移出后2s消失。
定時器里面可以套定時器
<script>window.onload = function() {var oImg = document.getElementById("pic"); var timer = null; var timer2 = null; clearTimeout(timer); timer = setTimeout(function(){ oImg.style.display = "block"; clearTimeout(timer2); timer2 = setTimeout(function(){ oImg.style.display = "none"; },2000); },2000); oImg.onmouseover= function(){ clearTimeout(timer2); }; oImg.onmouseout = function(){ timer2 = setTimeout(function(){ oImg.style.display = "none"; },2000); };};</script>
自定義屬性：
<script>window.onload = function(){var oBtn = document.getElementById("btn");oBtn.abc = 0; //自定義屬性oBtn.onclick = function(){alert(this.abc);}};</script>輪播圖（重點）：
<script>window.onload = function() {var oBox = document.getElementById("box");var oPrev = document.getElementById("prev");var oNext = document.getElementById("next");var oBtn = oBox.getElementsByTagName("input");var oDiv = oBox.getElementsByTagName("div");var iNow = 0;for(var i = 0; i < oBtn.length; i++){oBtn[i].index = i;oBtn[i].onclick = function(){iNow = this.index;for(var i = 0; i < oBtn.length; i++){oBtn[i].className="";oDiv[i].style.display="none";}this.className="on"; //this=oBtn[iNow]oDiv[this.index].style.display="block";};}//下一個播放oNext.onclick = function(){for(var i = 0; i < oBtn.length; i++){oBtn[i].className="";oDiv[i].style.display="none";}iNow++;if(iNow == oBtn.length){iNow = 0;}oBtn[iNow].className="on";oDiv[iNow].style.display="block";};//上一個播放oPrev.onclick = function(){for(var i = 0; i < oBtn.length; i++){oBtn[i].className="";oDiv[i].style.display="none";}iNow--;if(iNow == -1){iNow = oBtn.length - 1;}oBtn[iNow].className="on";oDiv[iNow].style.display="block";};};</script>簡化代碼（封裝）+ 實現(xiàn)自動播放功能 如下：
<script>window.onload = function() {var oBox = document.getElementById("box");var oPrev = document.getElementById("prev");var oNext = document.getElementById("next");var oBtn = oBox.getElementsByTagName("input");var oDiv = oBox.getElementsByTagName("div");var iNow = 0; var timer = null; function tab(){ for(var i = 0; i < oBtn.length; i++){oBtn[i].className="";oDiv[i].style.display="none";}oBtn[iNow].className="on";oDiv[iNow].style.display="block"; }for(var i = 0; i < oBtn.length; i++){oBtn[i].index = i;oBtn[i].onclick = function(){iNow = this.index;tab();};}//下一個播放 function fnNext(){ iNow++;if(iNow == oBtn.length){iNow = 0;} tab(); }oNext.onclick = fnNext;//上一個播放oPrev.onclick = function(){ iNow--;if(iNow == -1){iNow = oBtn.length - 1;} tab();}; //自動播放 clearInterval(timer); timer = setInterval(function(){ fnNext(); },1000); oBox.onmouseover = function(){clearInterval(timer); }; oBox.onmouseout = function(){ clearInterval(timer); timer = setInterval(function(){ fnNext(); },1000); };};</script>理解立即執(zhí)行函數(shù)：
var a = 12;alert((a)); //2層括號不影響結(jié)果var show = function(){};show(); //(show)();(function(){})(); //防止別人的代碼影響自己的(function(){var a = b = 10;})();console.log(a); //undefinedconsole.log(b); //10簡易發(fā)布留言：
<script>window.onload = function(){var oTxt=document.getElementById("txt"); var oBtn=document.getElementById("btn"); var oUl=document.getElementById("ul1"); oBtn.onclick = function(){var oLi = document.createElement("li"); oLi.innerHTML=oTxt.value; //oUl.insertBefore(oLi,oUl.children[0]); //如果父級下面沒有元素，那么向后插入，有，則向前插入。兼容IE if(oUl.children.length == 0){ oUl.appendChild(oLi); }else{ oUl.insertBefore(oLi,oUl.children[0]); } oTxt.value = "";};};</script>上移下移功能實現(xiàn)：
<script>window.onload = function(){var oUl = document.getElementById("ul1");var aPrev = oUl.getElementsByClassName("prev");//上移for(var i = 0; i < aPrev.length; i++){aPrev[i].onclick = function(){var obj = this.parentNode;if(obj == oUl.children[0]){alert("到頭了");return;}var oPrev = obj.previousElementSibling || obj.previousSibling;oUl.insertBefore(obj,oPrev);};}//下移var aNext = oUl.getElementsByClassName("next");for(var i = 0; i < aNext.length; i++){aNext[i].onclick = function(){var obj = this.parentNode;if(obj == oUl.children[oUl.children.length-1]){alert("到底了");return;}var oNext = obj.nextElementSibling || obj.nextSibling;var oNext2 = oNext.nextElementSibling || oNext.nextSibling;oUl.insertBefore(obj,oNext2);};}};</script>右下角懸浮框功能實現(xiàn)：[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SwhN8Ctu-1598018747062)(C:\Users\Hrj201305042\AppData\Roaming\Typora\typora-user-images\image-20200821143137668.png)]
//物體實際占的距離window.onload = function(){var oDiv = document.getElementById("div1");alert(oDiv.offsetHeight);};//關(guān)于滾動的距離body{height:3000px;}#btn{position:fixed; left:10px; top:200px;}window.onscroll = function(){var oBtn = document.getElementById("btn");oBtn.onclick = function(){var sT = document.documentElement.scrollTop || document.body.scrollTop;alert(sT);};};//可視區(qū)的高度window.onload = function(){var oBtn = document.getElementById("btn");oBtn.onclick = function(){alert(document.documentElement.clientHeight);};};<script> //窗口縮小onresizewindow.onresize = window.onload=window.onscroll= function(){if(window.navigator.userAgent.indexOf("MSIE 6.0")!=-1){var oDiv = document.getElementById("div1");var sT = document.documentElement.scrollTop|| document.body.scrollTop; var cH = document.documentElement.clientHeight; var oH = oDiv.offsetHeight; oDiv.style.top = sT + cH + oH +"px"; }};</script>json和數(shù)組的區(qū)別：
json中每個元素是以字符串作為下標，數(shù)組則是以數(shù)字作為下標。json使用for in循環(huán)，數(shù)組一般使用for循環(huán)。
var json = {"name":"leo", "age":18}; var arr=["leo",18];json是種數(shù)據(jù)格式，和JavaScript沒有直接聯(lián)系，js原生提供了部分json操作方法，是js數(shù)據(jù)交互最通用的數(shù)據(jù)格式之一
json和字符串互轉(zhuǎn)：
①字符串轉(zhuǎn)json：name=leo&age=18 => {“name”: “l(fā)eo”, “age” : 18}
<script>function url2json(str){var arr = str.split("&");var json = {};for(var i = 0; i < arr.length; i++){//[user = leo age = 18 class = javas]//arr[i].split("=")[0] user//arr[i].split("=")[1] leo//json["user"] = leojson[arr[i].split("=")[0]] = arr[i].split("=")[1];}return json}var str = "user=leo&age=18&class=javas";console.log(url2json(str));</script>②json轉(zhuǎn)字符串{“name”: “l(fā)eo” , “age” : 18} => name=leo&age=18
function json2url(json){var arr = [];for(var name in json){//name user//json[name] leoarr.push(name + "=" + json[name]);["name=leo", "age=18"]}return arr.join("&");}var json = {user:"leo", age:18, class:"javas"};alert(json2url(json));文字輸入框提示實現(xiàn)：
#box{position:relative;}#box span{color:#ccc;position:absolute;left:6px;top:2px;}<script>window.onload = function(){var oS = document.getElementById("s1");var oTxt = document.getElementById("txt");oTxt.onfocus = function(){oS.style.display = "none";}; oTxt.onblur = function(){if(oTxt.value == ""){oS.style.display = "block";}};oS.onclick = function(){//oS.style.display = "none";oTxt.focus();};};</script>請輸入內(nèi)容事件對象：
<script>window.onload = function(){var oBtn = document.getElementById("btn");oBtn.onclick = function(ev){var oEvent = ev||event;console.log(oEvent);};};</script>事件冒泡：
document.onclick = function(){alert("document");}; //點擊按鈕，從里往外傳，input->div1->document. //(父級沒有事件也往上傳)如果input的上級div不添加事件 input-> document //取消冒泡：1標準：oEvent.stopPropagation&&oEvent.stopPropagation();2.IE: oEvent.cancelBubble&&(oEvent.cancelBubble=true);//綁定事件：FF chrome oBtn.addEventListener("click",aaa,false);//IE6-8 沒有捕獲階段，只有冒泡oBtn.attachEvent("onclick", aaa;獲取鼠標點擊位置：
document.onclick = function(){ //chrome , IEalert("left:" + event.clientX+",top:"+event.clientY);};div跟隨鼠標移動：
鼠標移動，div跟隨鼠標移動
實現(xiàn)：1.獲取鼠標位置 2.賦值給div的left和top樣式
#div1{width:200px;height:200px;background:#bfa;position:absolute;}<script>window.onload = function(){var oDiv = document.getElementById("div1");document.onmousemove = function(ev){var oEvent = ev || event;console.log("ev.clientX:" + oEvent.clientX + "ev.clientY:" + oEvent.clientY);oDiv.style.left = oEvent.clientX + "px";oDiv.style.top = oEvent.cilentY + "px";};};</script>本文轉(zhuǎn)載于:
https://blog.csdn.net/qq_48687155/article/details/108159063
如果對您有所幫助，歡迎您點個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進步。
關(guān)鍵詞：
山東河口區(qū)：建設(shè)高標準農(nóng)田助推農(nóng)業(yè)發(fā)展“走廊”見雛形
東營港經(jīng)濟開發(fā)區(qū)：養(yǎng)老金提前發(fā)放惠及570余人
湖北黃黃高速鐵路進入聯(lián)調(diào)聯(lián)試階段
“97后”隨車機械師：動車組的“隱形”守護者
黑龍江今年糧食播種面積超2.18億畝 新增千萬畝大豆
