Case sharing demo of carousel lottery (with code)

  
 
1
 
2
 
3
 
  
 
a
 
b
 
c
 
d
 
e
 
f
 
 
 
    开始 

* { margin: 0; } .rotate { position: relative; margin: 0 auto; width: 400px; height: 400px; text-align: center; color: #fff; font-size: 50px; border-radius: 50%; background: antiquewhite; } .tn { transition: all 3s cubic-bezier(.11,.77,.2,.94); transform-origin: 50% 50%; } .out-circle { position: absolute; width: 300px; height: 300px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /*基础旋转的圆*/ .out-circle p { position: absolute; display: block; margin: 0 auto; left: 0; right: 0; width: 30px; height: 30px; line-height: 30px; background: red; /*以自己的宽度的一半 为 x，以父盒子的高度一半 为 y， 作为旋转点。*/ transform-origin: 15px 150px; border-radius: 50%; font-size: 16px; } .inner-circle { position: absolute; width: 200px; height: 200px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /*基础旋转的圆*/ .inner-circle p { position: absolute; display: block; margin: 0 auto; left: 0; right: 0; width: 30px; height: 30px; line-height: 30px; background: #4eff00; transform-origin: 15px 100px; border-radius: 50%; font-size: 16px; } .p11 { transform: rotate(0deg); } .p12 { transform: rotate(60deg); } .p13 { transform: rotate(120deg); } .p14 { transform: rotate(180deg); } .p15 { transform: rotate(240deg); } .p16 { transform: rotate(300deg); } .p1 { transform: rotate(0deg); } .p2 { transform: rotate(120deg); } .p3 { transform: rotate(240deg); } a { padding: 2.5px 10px; background: #0ebeff; border-radius: 5px; color: #fff; text-decoration: none; } .start-game { position:absolute; top: 20px; left: 20px; }

(function () { let deg = 0; // 基础角度 let baseDeg = 120; let $input = $('#num'); // 多少个旋转点 let blocks = 360 / baseDeg; let k = null; let flag = false; const $rotate = $('.rotate'); // 0 1 2 $('a').on('click', function () { var num = $input.val(); // 当前旋转 位置 var curLc = deg % 360 / 120; // 待旋转的角度 deg = deg + 4 * 360 + (2*blocks - num - curLc) * baseDeg; if (flag === true) { return false; } flag = true; clearInterval(k); k = null; $rotate.addClass('tn'); $rotate.css({ 'transform': `rotate(${deg}deg)` }); // 监听过渡结束效果！--没加入兼容性 $rotate.on('transitionend', function () { flag = false; $(this).removeClass('tn'); let timeK = null; // 抽奖后 圆盘动旋转 setTimeout(() => { k = timeK = setInterval( () => { var temDeg = deg.toString(); if (k !== timeK) { clearInterval(timeK); return false; } if ($rotate.hasClass('tn')) { return false; } // 一下代码 正则是为了解决 js 小数点 计算 问题。 temDeg = (/\./).test(temDeg) ? temDeg.replace(/\.\d+/, function ($1) { var result = $1.length === 2 ? `${$1.substr(1)}0`: `${$1.substr(1)}`; return result }) : `${temDeg}00`; temDeg = parseInt(temDeg); temDeg += 5; temDeg = temDeg.toString().split(''); temDeg.splice(temDeg.length - 2, 0, '.'); temDeg = temDeg.join(''); deg = parseFloat(temDeg); $(this).css({ 'transform': `rotate(${deg}deg)` }); }, 13) }, 1000); }); }) })()