js编写一个简单的大转盘

2024-02-28 13:02:10

1.首先用css创建一个圆并等分

代码如下：

 
.box {
            width: 596px;
            height: 596px;
            border: 2px dotted gold;
            margin: 100px auto;
            border-radius: 50%;
            position: relative;
        }
 .item1 {transform: rotate(30deg); bacground: rgb(243, 111, 4);};
.item2 {transform: rotate(60deg); bacground: rgb(243, 111, 4);};
.item3 {transform: rotate(90deg); bacground: rgb(243, 111, 4);};
.item4 {transform: rotate(120deg); bacground: rgb(243, 111, 4);};
.item5 {transform: rotate(150deg); bacground: rgb(243, 111, 4);};
.item6 {transform: rotate(180deg); bacground: rgb(243, 111, 4);};

2.在创建好的等分圆内添加一个指针

代码如下

.pointer {
           
            width: 0;
            height: 0;
            position: absolute;
            top: 300px;
            left: 295px;
            border-top: 250px solid black;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            transform-origin: 5px 0px;

        }

3.最后实现点击按钮可控制指针是否转动

代码如下

css部分：

   p {
            width: 2px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 300px;
            background: #fff;
        }
  .btn {
            width: 100px;
            height: 50px;
            display: block;
            margin: 20px auto;
            border-radius: 20px;
            cursor: pointer;
            font-size: 20px;
            background-color:pink;
            color:red;
        }

js部分：

 <script>
        var rot = 10 - 0;
        var time;
        var is_zhuan = false;
        function zhuan() {
            if (is_zhuan == true) {
                window.clearInterval(time);
                is_zhuan = false;
                document.getElementById("btn").value = "开始";
            }
            else {
                time = window.setInterval(begin, 10);
                is_zhuan = true;
                document.getElementById("btn").value = "暂停";
            }
        }
        function begin(time) {
            document.getElementById("pointer").style.transform = "rotatez(" + rot + "deg)";
            rot += 100;
        }
    </script>

总体代码如下：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 596px;
            height: 596px;
            border: 2px dotted gold;
            margin: 100px auto;
            border-radius: 50%;
            position: relative;
        }

        .pointer {
            /* width:7px;
            height:200px;
            border-radius: 50px 0 0 0;
            background-color: rgb(13, 90, 235);
            position: absolute;
            top:300px;
            left: 300px;
            animation: zhizhen 0.9s  linear infinite;
            transform-origin:0px 0px; */
            width: 0;
            height: 0;
            position: absolute;
            top: 300px;
            left: 295px;
            border-top: 250px solid black;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;

            transform-origin: 5px 0px;


        }


        p {
            width: 2px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 300px;
            background: #fff;
        }

        .item1 {
            transform: rotate(30deg);
            background: rgb(243, 111, 4);
        }

        .item2 {
            transform: rotate(60deg);
            background: rgb(243, 111, 4);
        }

        .item3 {
            transform: rotate(90deg);
            background: rgb(243, 111, 4);
        }

        .item4 {
            transform: rotate(120deg);
            background: rgb(243, 111, 4);
        }

        .item5 {
            transform: rotate(150deg);
            background: rgb(243, 111, 4);
        }

        .item6 {
            transform: rotate(180deg);
            background: rgb(243, 111, 4);
        }

        .btn {
            width: 100px;
            height: 50px;
            display: block;
            margin: 20px auto;
            border-radius: 20px;
            cursor: pointer;
            font-size: 20px;
            background-color:pink;
            color:red;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="item1"></p>
        <p class="item2"></p>
        <p class="item3"></p>
        <p class="item4"></p>
        <p class="item5"></p>
        <p class="item6"></p>
        <div class="pointer" id="pointer"></div>
    </div>
    <input type="button" id="btn" class="btn" value="开始" onclick="zhuan()" />
    </div>
    <script>
        var rot = 10 - 0;
        var time;
        var is_zhuan = false;
        function zhuan() {
            if (is_zhuan == true) {
                window.clearInterval(time);
                is_zhuan = false;
                document.getElementById("btn").value = "开始";
            }
            else {
                time = window.setInterval(begin, 10);
                is_zhuan = true;
                document.getElementById("btn").value = "暂停";
            }
        }
        function begin(time) {
            document.getElementById("pointer").style.transform = "rotatez(" + rot + "deg)";
            rot += 100;
        }
    </script>
</body>
</html>

码农公寓

相关文章