花开陌上

学前端也有段时间了，js放着几个月了，都快凉了，到今天为止也还没学多少，归根于近期比较忙，事多的要命，而且还是在大山里做的，一待就是好几天（貌似并是不偷懒的理由╭(╯^╰)╮，好吧，我承认，这段时间我确实懒了点!!!∑(ﾟДﾟノ)ノ），时间匆匆的走了，我还在原地一样，自己掉队了，进度慢了点，我还在努力，对自己说一声加油！未来继续努力，离年底不远了，得学出一点成绩才行(〃'▽'〃)


下边是一个js入门小练习，html+css结合js里的var 和for 做出来的！
代码如下：


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>

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}

JS：

        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;
            }
        }

DEMO演示