JavaScript(生成V字,四中方向的切换)
JavaScript(生成V字,四中方向的切换)
feifei080366 发表于2个月前
JavaScript(生成V字,四中方向的切换)
  • 发表于 2个月前
  • 阅读 0
  • 收藏 0
  • 点赞 0
  • 评论 0
摘要: JavaScript(生成V字,四中方向的切换)
<!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
博文 7
码字总数 1528
×
feifei080366
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: