JS入门小练习

学前端也有段时间了，js放着几个月了，都快凉了，到今天为止也还没学多少，归根于近期比较忙，事多的要命，而且还是在大山里做的，一待就是好几天（貌似并是不偷懒的理由╭(╯^╰)╮，好吧，我承认，这段时间我确实懒了点!!!∑(ﾟДﾟノ)ノ），时间匆匆的走了，我还在原地一样，自己掉队了，进度慢了点，我还在努力，对自己说一声加油！未来继续努力，离年底不远了，得学出一点成绩才行(〃‘▽’〃)
<br >
下边是一个js入门小练习，html+css结合js里的var 和for 做出来的！
代码如下：
<br >
HTML：
<pre class=“line-numbers language-html”><code class=“language-html”>
<div id="box"></div>
<div id="eject">
<div id="set">
<p id="p1">
<font>背景：</font>
<span style="background:#e91e63;"></span>
<span style="background:#009688;"></span>
<span style="background:#2196f3;"></span>
</p>
<p id="p2">
<font>宽度：</font>
<span>100px</span>
<span>200px</span>
<span>300px</span>
</p>
<p id="p3">
<font>高度：</font>
<span>100px</span>
<span>200px</span>
<span>300px</span>
</p>
<button style="margin-left:45%;" id="done">完成</button>
</div>
</div>
<button id="btn">设置</button>
</code></pre>
<br >
CSS:
<pre class=“line-numbers language-css”><code class=“language-css”>
*{margin:0;padding:0}
#box{width:100px;height:100px;border:2px solid #eee;border-radius:10px;background-color:red}
#eject{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:none}
#set{width:230px;height:150px;background:#fff;border-radius:8px;position:absolute;top:50%;left:50%;margin-top:-75px;margin-left:-115px;font-size:14px;font-family:“Microsoft yahei”}
#set p{height:40px;line-height:40px}
#set p font{margin-left:10px;font-weight:700}
#set p span{margin-left:10px;cursor:pointer}
#set p span:hover{color:#ff5722}
#p1 span{display:inline-block;width:30px;height:20px;margin-left:15px}
#btn{border:0;outline-style:none;background:#3cbbf1;border:1px solid #3cbbf1;border-radius:5px;color:#fff;margin-top:15px}
</code></pre>
<br >
JS：
<pre class=“line-numbers language-javascript”><code class=“language-javascript”>
window.onload=function(){
var oBtn=document.getElementById(“btn”);
var oEject=document.getElementById(“eject”);
var oDone=document.getElementById(“done”);
var oBox=document.getElementById(“box”);
var oSpan=document.getElementsByTagName(“span”);

        oBtn.onclick=function(){
            oEject.style.display="block" ;
        };
        oDone.onclick=function(){
            oEject.style.display="none" ;
        };

        for (var i=0;i<9;i++)
        {
            if (i>=0 && i<3)
            {
               oSpan[i].onclick=p1;
            }
            else if (i>=3 && i<6)
            {
                oSpan[i].onclick=p2;
            }
            else
            {
                oSpan[i].onclick=p3;
            }
        }

        function p1 (){
            oBox.style.background = this.style.background;
        };
        function p2 (){
            oBox.style.width= this.innerHTML;
        }
        function p3 (){
            oBox.style.height=this.innerHTML;
        }
    }

</code></pre>
<br >
<a class=“case-show” href=“http://moe.moshanghua.net/小练习.html” target=“_blank”>DEMO演示</a>