js编写一个简单的大转盘

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>

js编写一个简单的大转盘相关推荐

js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器
原文:js框架jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器源代码下载地址:http://www.zuidaima.com/share/1779633798073344.htm 看到网页上有 ...
自己编写一个简单的微博爬虫
自己编写一个简单的微博爬虫很多做社交媒体数据分析的同学需要采集一些新浪微博上的数据,新浪微博虽然有提供api,但免费的api对获取的数据项和获取的频率都有很大的限制,商业版api据说限制较少,但是作 ...
如何用FFmpeg编写一个简单播放器详细步骤介绍
如何用FFmpeg编写一个简单播放器详细步骤介绍(转载) FFMPEG是一个很好的库,可以用来创建视频应用或者生成特定的工具.FFMPEG几乎为你把所有的繁重工作都做了,比如解码.编码.复用和解复用. ...
如何用 Node.js 实现一个简单的 Websocket 服务？
最近正在研究 Websocket 相关的知识,想着如何能自己实现 Websocket 协议.到网上搜罗了一番资料后用 Node.js 实现该协议,倒也没有想象中那么复杂,除去注释语句和 console ...
cocos2dx 圆盘抽奖_cocos2d编写的类似幸运大转盘抽奖源码
压缩包内容概览: cocos2d编写的类似幸运大转盘抽奖源码-帮你选择 ; 随机 ; 程序委托 ; 背高清 ; 背 ipad ; 返回 ; 默认 ; 默认@2x ; 图标-72 ; 图标@2x ; 我 ...
用python 编写一个简单的游戏
This blog will memory my work and process with the interesting skill. 用python 编写一个简单的游戏这是一个非常简单的游戏, ...
c语言编写一个简单的答题系统
利用c语言编写一个简单的答题系统. 思路是先设计好题目和答案,再输入自己的答案,利用输入的答案与正确答案对比,从而得出你回答的对错. (一)捆绑题目和答案我们可以利用结构体对一个题目捆绑上一个答案. ...
用CSS和JS打造一个简单的图片编辑器
用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...
Python：结合列表和字典，编写一个简单的学生成绩管理系统
本次主要使用新学的列表和字典,结合定义函数等知识点,成功编写了一个简单的学生成绩管理系统.实现了在系统内使用学生的姓名或者学号,即可实现显示.添加.删除.修改.查找(增删改查).成绩排 ...

js编写一个简单的大转盘

js编写一个简单的大转盘相关推荐

最新文章

热门文章