找回密码
当前位置：前端开发者 > JavaScript > 正文

前端效果点击按顺序变换方向的V字

2018-10-11 分类：JavaScript / 面试 阅读(689) 评论(0)

黑马前端与移动开发基础视频 移动前端开发原则 前端移动端开发单位

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <style>
            #bg {
                width: 290px;
                height: 386px;
                margin: 0 auto;
                border: 1px solid #000;
                padding-top: 100px;
                background-color: pink;
                position: relative;
            }
            #box {
                width: 250px;
                height: 250px;
                margin: 0 auto;
                position: relative;
            }
            #box div {
                width: 50px;
                height: 50px;
                background: rgb(252, 84, 112);
                color: #86d5ee;
                text-align: center;
                line-height: 50px;
                position: absolute;
            }
            #btn {
                width: 100px;
                height: 40px;
                border: 1px solid #86d5ee;
                background: green;
                color: #86d5ee;
                font-size: 18px;
                position: absolute;
                right: 90px;
                bottom: 30px;
            }
        </style>
    </head>
<body>
    <div id=”bg”>
        <div id=”box”>
            <!–<div></div>
<div></div>
<div></div>
<div></div>
<div></div>–>
        </div>
        <button id=”btn”>生成</button>
    </div>
    <script src=”../js文件/点击变换方向.js”></script>
    <script>
        var btn = document.getElementById(‘btn’)
        // 赋予box为变量，从全文档中寻找box
        var box = document.getElementById(“box”)
        // 赋予sty 为变量，初始字符为空
        var str = ”
        // 赋予变量n=1
        var n = 1;
        // 创建按钮事件，点击按钮的时候，切换模式
        btn.onclick = function () {
            if (n == 1) {
                str = ”;
                // 赋变量i为0，最大为4，每次自增1
                for (var i = 0; i < 5; i++) {
                    // 设置条件，如果i<=2,当前div上边与左边的数值为i*50px
                    if (i <= 2) {
                        // str = ”+<div style=top:+i+px + left:+i+px;></div>
                        str += ‘<div style=”top:’ + (i) * 50 + ‘px;left:’ + (i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                        // 否则就执行
                    } else {
                        str += ‘<div style=”left:’ + (i) * 50 + ‘px;top:’ + (4 – i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                    }
                }
                n = 2;
                box.innerHTML = str;
            } else if (n == 2) {
                str = ”;
                // 赋变量i为0，最大为4，每次自增1
                for (var i = 0; i < 5; i++) {
                    // 设置条件，如果i<=2,当前div上边与左边的数值为i*50px
                    if (i <= 2) {
                        // str = ”+<div style=top:+i+px + left:+i+px;></div>
                        str += ‘<div style=”right:’ + (i) * 50 + ‘px;bottom:’ + (i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                        // 否则就执行
                    } else {
                        str += ‘<div style=”bottom:’ + (i) * 50 + ‘px;right:’ + (4 – i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                    }
                }
                n = 3;
                box.innerHTML = str;
            } else if (n == 3) {
                str = ”;
                // 赋变量i为0，最大为4，每次自增1
                for (var i = 0; i < 5; i++) {
                    // 设置条件，如果i<=2,当前div上边与左边的数值为i*50px
                    if (i <= 2) {
                        // str = ”+<div style=top:+i+px + left:+i+px;></div>
                        str += ‘<div style=”bottom:’ + (i) * 50 + ‘px;right:’ + (i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                        // 否则就执行
                    } else {
                        str += ‘<div style=”top:’ + (i) * 50 + ‘px;left:’ + (4 – i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                    }
                }
                n = 4;
                box.innerHTML = str;
            } else if (n == 4) {
                str = ”;
                // 赋变量i为0，最大为4，每次自增1
                for (var i = 0; i < 5; i++) {
                    // 设置条件，如果i<=2,当前div上边与左边的数值为i*50px
                    if (i <= 2) {
                        // str = ”+<div style=top:+i+px + left:+i+px;></div>
                        str += ‘<div style=”top:’ + (i) * 50 + ‘px;left:’ + (i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                        // 否则就执行
                    } else {
                        str += ‘<div style=”top:’ + (i) * 50 + ‘px;left:’ + (4 – i) * 50 + ‘px;”>’ + (i) + ‘</div>’
                    }
                }
                n = 1;
                box.innerHTML = str;
            }
            //box.innerHTML = str;
        }
    </script>
</body>
</html>
</head>
<body>
</body>
</html>

移动端前端开发库 移动前端开发面试题 移动端开发属于前端吗

赞(0)
前端开发者 » 前端效果点击按顺序变换方向的V字
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论