生成v字且点击切换

最新推荐文章于 2022-05-26 11:28:52 发布

能吃一大碗

最新推荐文章于 2022-05-26 11:28:52 发布

阅读量199

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/xiaoshiqi17/article/details/78674374

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            position: relative;
        }

        .box {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            display: none;
        }

        #oDiv {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<input type="button" value="点击生成一个V">
<div id="oDiv"></div>

<script>
    var oBtn = document.getElementsByTagName('input')[0];
    var oDiv = document.getElementById('oDiv');
    var num = 1;


    for (var i = 0; i < 5; i++) {
        var aDiv = oDiv.getElementsByTagName('div');
        oDiv.innerHTML += '<div class = "box">' + i + '</div>'
        oBtn.onclick = function () {
            switch (num) {
                case 1:
                    var j = 0;
                    for (var i = 0; i < aDiv.length; i++) {
                        if (i < aDiv.length / 2) {
                            aDiv[i].style.top = 30 + i * 50 + 'px';
                        } else {
                            j = j + 2;
                            aDiv[i].style.top = 30 + (i - j) * 50 + 'px';
                        }
                        aDiv[i].style.display = 'block';
                        aDiv[i].style.left = 30 + i * 50 + 'px';
                    }
                    num++;
                    break;
                case 2:
                    var j = 0;
                    for (var i = aDiv.length - 1; i >= 0; i--) {
                        if (i > aDiv.length / 2 - 1) {
                            aDiv[i].style.left = (i * 50 - 70) + 'px';
                        } else {
                            j = j + 2;
                            aDiv[i].style.left = (i + j) * 50 - 70 + 'px';
                        }
                        aDiv[i].style.display = 'block';
                        aDiv[i].style.top = 30 + i * 50 + 'px';
                    }
                    num++;
                    break;
                case 3:
                    var j = 0;
                    for (var i = aDiv.length - 1; i >= 0; i--) {
                        if (i > aDiv.length / 2 - 1) {
                            aDiv[i].style.top = i * 50 - 70 + 'px';
                        } else {
                            j = j + 2;
                            aDiv[i].style.top = (i + j) * 50 - 70 + 'px';
                        }
                        aDiv[i].style.display = 'block';
                        aDiv[i].style.left = 30 + i * 50 + 'px';
                    }
                    num++;
                    break;
                case 4:
                    var j = 0;
                    for (var i = 0; i < aDiv.length; i++) {
                        if (i < aDiv.length / 2) {
                            aDiv[i].style.left = 30 + i * 50 + 'px';
                        } else {
                            j = j + 2;
                            aDiv[i].style.left = 30 + (i - j) * 50 + 'px';
                        }
                        aDiv[i].style.display = 'block';
                        aDiv[i].style.top = 30 + i * 50 + 'px';
                    }
                    num = 1;
                    break;
                default:
                    break;
            }
        }
    }

</script>
</body>

</html>