4、基礎應用實例
阿新 • • 發佈：2017-08-02
align += div item fault length dna doctype 九九
1、開關燈
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; /*background: white;*/ } .bg0{ background: red; } .bg1{ background: blue; } .bg2{ background: white; } </style> </head> <body class="bg0" id="box" > <script> // 1、要操作誰就先獲取誰 //2、綁定點擊事件 //3.點擊的時候 執行效果var obox=document.getElementById("box"); //第一種： // obox.onclick=function(){ // var bg=obox.style.backgroundColor; // console.log(bg) // if(bg=="white"){ // obox.style.backgroundColor="blue"; // }else if(bg=="blue"){ // obox.style.backgroundColor="red"; // }else{ // obox.style.backgroundColor="white";// }; //}; //第二種： obox.onclick=function sum(){ var bg=obox.className; if(bg=="bg0"){ obox.className="bg1" }else if(bg=="bg1"){ obox.className="bg2" }else{ obox.className="bg0" } }; sum() </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> html,body{ width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; /*background: white;*/ } .bg0{ background: red; } .bg1{ background: blue; } .bg2{ background: white; } </style> </head> <body id="box" style="background-color: white"> <script> var obox=document.getElementById("box") box.onclick=function(){ var bg=this.style.backgroundColor bg=="white"?this.style.backgroundColor="black":this.style.backgroundColor="white"; } //this 函數中 當前操作的元素 </script> </body> </html>
2、隔行換色
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } div{ width: 500px; border: 1px solid orange; margin: 0 auto; border-radius: 20px; /*position: absolute;*/ /*top:50%;*/ } li{ height: 30px; line-height: 30px; padding: 0 20px; } .bg1{ background: gold; } .bg2{ background: green; } .bg3{ background: pink; } </style> </head> <body> <div id="box"> <ul> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> <li>我會變顏色</li> </ul> </div> <script> var oli=document.getElementById("box").getElementsByTagName("li"); // for 循環 // for(var i=0;i<oli.length;i++){ // var obo=oli[i]; // i%2==0?obo.className="bg1":obo.className="bg2" // }; // 拼接字符串 for(var i=0;i<oli.length;i++){ // var obo=oli[i]; oli[i].className=‘bg‘+(i%2+1);// "bg"+(i%2+1) // ‘bg‘+(i%2+1)+‘‘ //"bg"+(i%2+1)+"" // 但是"bg‘+i%2+‘"沒法去解釋 是錯的 oli[i].oldName= console.log("bg"+(i%2+1)) // console.log("bg"+i%2+""); ?????拼接字符串（看單雙引號的結束標簽去理解,字符串中若遇到變量，要將變量兩邊斷開 用+號拼接） // obo.oldName="bg"+i%2+""; // 自定義屬性 oli[i].onmouseover=function(){ this.oldName=this.className this.className="bg3" }; oli[i].onmouseout=function(){ this.className=this.oldName }; } </script> </body> </html>
3、九九乘法表
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .box{ width: 900px; height: 270px; border: 1px solid red; border-radius: 10px; } li{ height: 30px; } span{ float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; } .bg0{ background: orangered; } .bg1{ background: darkblue; } .bg2{ background: green; } .bg3{ background: pink; } </style> </head> <body> <div id="box1" class="box"></div> <script> var obox=document.getElementsByClassName("box").item(0); var oli=obox.getElementsByTagName("li"); var str=""; str+="<ul>"; for(var i=1;i<=9;i++){ str+="<li>"; for(var j=1;j<=i;j++){ str+="<span>"; str+=j+"*"+i+"="+j*i; str+="</span>"; }; str+="</li>" oli[i].className="bg"+i%3; //為什麽不能放到裏面？？ js代碼必須等結構加載完之後再加載，放到裏面結構輸出過程中不能識別， // 單獨拿出來，另外再放到一個循環中 } str+="</ul>"; console.log(str) obox.innerText=str; //box1.innerHTML=str 直接放Id名也可以？？？？？只有id名可以 for(var s=1;s<=9;s++){ oli[s].onmouseover=function(){ this.old=this.className;//賦值 把後面的賦給前面的 把當前樣式的類名賦給old屬性 // a=this.className; // 不給a定義變量，默認為全局變量 也可以實現，雖然是鼠標移入和移出兩個作用域，單全局變量都可以獲取 this.className="bg3"; }; oli[s].onmouseout=function(){ this.className=this.old; // this.className=a; }; }; </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>99乘法表</title> <style> *{ margin: 0; padding: 0; font-family: arial, "微軟雅黑"; font-size: 14px; } ul,li{ list-style: none; } #tab{ width: 900px; height: 270px; position: absolute; top: 30%; left: 50%; margin:-135px 0 0 -450px; border: 1px solid red; border-radius: 10px; } #tab{ height: 30px; line-height: 30px; } #tab span{ width: 100px; height: 30px; display: inline-block; text-align: center; } .c0{ background: blue; } .c1{ background: pink; } .c2{ background: gold; } .c3{ background: orange; } </style> </head> <body> <div id="tab"> <!--<ul>--> <!--<li><span>1*1=1</span></li>--> <!--<li>--> <!--<span>1*1=1</span>--> <!--<span>1*1=1</span>--> <!--</li>--> <!--<li>--> <!--<span>1*1=1</span>--> <!--<span>1*1=1</span>--> <!--<span>1*1=1</span>--> <!--<span>1*1=1</span>--> <!--</li>--> <!--<li>--> <!--<span>1*1=1</span>--> <!--<span>1*1=1</span>--> <!--</li>--> <!--</ul>--> </div> <script> var otab=document.getElementById("tab"); var str=""; //定義空字符串 str+="<ul>"; for(var i=1;i<=9;i++){ var val=""; //設定初始值 可有可無 與輸出的結果無關 switch(i%3){ case(0): val="c1"; break; case(1): val="c2"; break; default : val="c3"; } str+="<li class="+val+">"; //上面switch輸出一個值，為什麽這裏 class=val 是不對的，因為val是一個字符串 // 向字符串中添加val是變量 字符串中若遇到變量，要將變量用+號拼接到字符串中。 // str+="<li class=‘c"+i%3+"‘>"; //拼接字符串(c0 c1 c2) 寫入隔行變色樣式 // str+="<li class=‘c"+(i%3+1)+"‘>"; //拼接字符串(c1 c2 c3) 寫入隔行變色樣式 // console.log("<li class=‘c"+(i%3+1)+">"); // 能輸出 註意拼接後保證class後面類名的引號 for(var j=1;j<=i;j++){ // j<=i 不能是 j<=9 否則就雙向算兩遍了 str+="<span>"; // 添加span標簽 方便寫入css樣式 str+=""+j+"*"+i+"="+(j*i)+""; //str+="" 向span標簽中添加內容 // j+"*"+i+"="+j*i 按引號的開始與結束去理解的 str+="</span>"; }; str+="</li>"; }; str+="</ul>"; otab.innerHTML=str; //字符串拼接：單雙引號嵌套使用規則： // 1、單雙引號不能同時嵌套用,外單內雙 內雙外單 // 2、如果一個字符串中需要增加一個變量，看最外面是""還是‘‘ 如果是雙引號，那麽 "+變量+" ，如果是‘‘ 則為 ‘+變量+‘ // （原理：看單雙引號的開始與結束標記來理解） // 單雙引號的使用不是外單內雙 內單外雙的記憶問題，而是單雙引號的開始與結束的識別問題 // “”大“” “‘大’” 的意義是不一樣的（第一個大字沒有被引號包裹） </script> </body> </html>
4、基礎應用實例