泉州制作网站开发,建设工业,wordpress获取分类子分类所有文章,公司建网站多少让我为大家介绍一下转盘的实现过程与原理#xff0c;介绍都放在下面代码块中#xff0c;一步一步的教会你。 我们转盘使用线段来实现
!DOCTYPE html
html
headmeta charsetutf-8title/titlestyle type介绍都放在下面代码块中一步一步的教会你。 我们转盘使用线段来实现
!DOCTYPE html
html
headmeta charsetutf-8title/titlestyle typetext/css.boss {width: 400px;height: 400px;border: 5px solid #000;margin: 0 auto;border-radius: 50%;position: relative;}.box1 {width: 2px;height: 200px;position: absolute;background-color: #000;top: 0;left: 50%;margin-left: -1px;transform-origin: bottom;}.box2 {width: 1px;height: 200px;background-color: red;position: absolute;top: 0;left: 50%;transform-origin: bottom;z-index: 99;transition: 2s;}/style
/headbody!-- boss是最大的容器 --div classboss!-- box2是旋转需要用到的指针 --div classbox2/div/div!-- 动态设置转盘的份数 需要用到表单与按钮 --份数input typenumber idinputs placeholder请输入份数 /!-- 确定按钮 行内点击事件 --button typebutton onclickfunc()确定份数/button!-- 点击开始旋转 行内点击事件--button typebutton onclickmyFunc()点击旋转/button!-- boss1存放设置概率的表单 --div classboss1/div
/body
script typetext/javascript// 获取input表单var inputs document.getElementById(inputs);// 获取boss容器var boss document.querySelector(.boss);// 获取存放概率表单的boss1var boss1 document.querySelector(.boss1);var num 0;// 点击确定分成多少等份function func() {// 点击后会清空设置好的份数 但我们的指针不能删除boss.innerHTML div classbox2/div;// 点击后控制概率的表单也得清空boss1.innerHTML ;// 把inputs.value也就是控制份数的表单的value值存到num中num inputs.value;// 判断 如果我表单中输入了1那么就返回if (num 1) {return;}// 循环创建线段 转盘的份数 小于我表单输入的数字 因为是从0开始循环// 就不需要等于numfor (var i 0; i num; i) {// 创建div 相当于线段var divs document.createElement(div);// 创建input表单 控制每一份的概率var inp document.createElement(input);// 我们把事先准备好的box1类名添加给divsdivs.className box1;// 旋转的角度 360/份数 * i 就可以得出我们份数旋转到的位置divs.style.transform rotate(${360 / num * i}deg)// 我们把divs添加到boss里boss.appendChild(divs);// 把inp添加到boss1里boss1.appendChild(inp);}}// 存一个sum 0 到时候控制度数var sum 0;// 控制点击旋转按钮不能连点var isFlag true// 点击旋转function myFunc() {// 当isFlag为真时执行if (isFlag true) {// 创建一个新数组 存概率 如果我在第一个概率表单中输入100 就生成100个1var arrs [];var nums 0;// 获取指针var box2 document.querySelector(.box2);// 获取控制概率的表单的集合var boss1_inp document.querySelectorAll(.boss1 input);// 循环 j概率表单的长度for (var j 0; j boss1_inp.length; j) {// 使用我们事先准备好的nums 概率表单总体的概率总和// 我们需要把概率表单中的字符串变为Number 要不然就是字符串拼接了nums Number(boss1_inp[j].value);// 循环添加进arrsfor (var i 0; i boss1_inp[j].value; i) {// j1 如果是下标为0 且给的概率为50 就是50个1arrs.push(j 1)}}// 判断nums 不能大于 100if (nums 100) {console.log(总和值不能大于100);alert(总和值不能大于100);} else {// 如果小于100 给一个随机数去随机0-arrs.length范围中的数 向下取整// 用随机下标去获取arrs数组中的元素var aa arrs[Math.floor(Math.random() * arrs.length)];// 随机的角度 要不然指针一直指向一个地方var bb Math.floor(Math.random() * 360 / boss1_inp.length);// sum1 控制连续点击 如果不设置指针会从最开始的地方再进行旋转sum 1;// 指针旋转角度控制概率后 // 旋转的角度 数组随机的值*360度/概率表单的长度1080(先让指针旋转1080度)*连续点击的次数-随机的角度box2.style.transform rotate(${aa * 360 / boss1_inp.length 1080 * sum - bb}deg);}// 点击后isFlag赋值为false 就不可以连点了isFlag false// 这里我使用比较暴力的办法我直接就看它的间隔时间 2s后isFlag为true// 就可以继续点击了setTimeout(function () {isFlag true}, 2000)}}
/script/html效果图
感谢大家的阅读如有不对的地方可以向我提出感谢大家
