js编写一个简单的大转盘

这篇博客介绍如何利用CSS和JavaScript创建一个简单的大转盘。首先通过CSS制作一个等分的圆形,接着添加指针元素。然后,通过JavaScript实现点击按钮驱动指针旋转的功能,从而完成大转盘的基本交互效果。
摘要由CSDN通过智能技术生成

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-rad
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值