标签：一个 过程 name 引号 ++ efault int 结束 lin
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>
标签：一个 过程 name 引号 ++ efault int 结束 lin
原文地址：http://www.cnblogs.com/dalyn/p/7270780.html
