JavaScript(生成V字,四中方向的切换)

原创
2017/09/08 21:54
阅读数 81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 1000px;
            height:1000px;
            background-color: #cccccc;
           
        }
        #button{
            float: right;}
        #content div{
            width: 100px;
            height: 100px;
            background-color: aqua;
            text-align: center;
            color: #000;
            font-size: 28px;
            position: absolute;

        }
    </style>
</head>
<body>
<input type="button" id="button" value="开始">
<div id="box">
    <div id="content">
    </div>
</div>
</body>
<script>
var button=document.getElementById("button");
var box=document.getElementById("box");
var content=document.getElementById("content");
var num=0;
var left=0;
var top=0;
var l=left;
var t=top;
var str="";
button.onclick=function () {

if (num==0){
    for(i=0;i<9;i++){
        l=i*100;
        if (i<=4){
            t=i*100;
        }else{
            t=800-i*100;
        }
        str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
    }

}
    if (num==1){
        for(i=0;i<9;i++){
            t=i*100;
            if (i<=4){
               l=(9-i)*100;
            }else{
               l=(i+1)*100;
            }
            str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
        }}
        if (num==2){
            for(i=0;i<9;i++){
                l=i*100;
                if (i<=4){
                    t=(9-i)*100;
                }else{
                    t=(i+1)*100;
                }
                str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
            }
    }
    if (num==3){
        for(i=0;i<9;i++){
            t=i*100;
            if (i<=4){
                l=(i+1)*100;
            }else{

                l=(9-i)*100;
            }
            str+='<div style="left: '+l+'px; top: '+t+'px">'+i+'</div>';
        }
    }
    num ++;

    if(num==4){
        num=0;
    }
    content.innerHTML=str;
    str="";
}
</script>
</html>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部