JS入门小练习

陌上花

分类: Javascript案列 2406 6

学前端也有段时间了,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演示

  • 2人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 2人 Angry
for、JavaScript、var、小练习

作者简介: 陌上花

CSS|JavaScript|Python|诗词|文学|生活 所知甚少,唯善学

共 6 条评论关于 “JS入门小练习”

Loading...