js编写一个简单的大转盘

2021-09-26 14:03:37 阅读：251 来源： 互联网

标签：rotate transform js 大转盘 rgb 111 243 编写 border

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>

标签：rotate,transform,js,大转盘,rgb,111,243,编写,border
来源： https://blog.csdn.net/Candyandhxl/article/details/120487509

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js编写一个简单的大转盘