转盘抽奖——我自己手淫

时间：2023-04-05 15:17:33 HTML5

很厉害，这是毋庸置疑的。所以上个星期天试试水，看看我能不能写一个光盘彩票的演示。//githubL6zt开发思路layoutcssrotatelayout;彩票转场效果，使用css3转场；动态计算抽签结束时的角度，赋值给被选中的元素。效果图代码1

<输入类型="text"id="num"name="num"placeholder="请输入外层数(0-2))"/>开始

*{三月杜松子酒：0；}.rotate{位置：相对；保证金：0自动；宽度：400px；高度：400px；文本对齐：居中；颜色：#fff；字体大小：50px；边界半径：50%；：古董白；}.tn{transition:all3scubic-bezier(.11,.77,.2,.94);变换原点：50%50%；}.out-circle{位置：绝对；宽度：300px；高度：300px；左：0；右：0；顶部：0；底部：0；保证金：自动；}/*基础旋转圆*/.out-circlep{position:absolute;显示：块；保证金：0自动；左：0；右：0；宽度：30px；高度：30px；行高：30px；是旋转点*/transform-origin:15px150px;边界半径：50%；字体大小：16px；}.inner-circle{位置：绝对；宽度：200px；高度：200px；左：0；右：0；顶部：0；底部：0；保证金：自动；}/*基本旋转的圆*/.inner-circlep{position:absolute;显示：块；保证金：0自动；左：0；右：0；宽度：30px；高度：30px；行高：30px；背景：#4eff00；变换原点：15px100px；边界半径：50%；字体大小：16px；}.p11{变换：旋转（0度）；}.p12{变换：旋转（60度）；}.p13{变换：旋转（120度）；}.p14{变换：旋转（180度）；}.p15{变换：旋转（240度）；}.p16{变换：旋转（300度）；}.p1{变换：旋转（0度）；}.p2{变换：旋转（120度）；}.p3{变换：旋转（240度）；}a{填充：2.5px10px；背景：#0ebeff；边界半径：5px；颜色：#fff；文字修饰：无；}.start-game{位置：绝对；顶部：20px；左：20px；}(function(){letdeg=0;//基本角度letbaseDeg=120;let$input=$('#num');//多少个旋转点letblocks=360/baseDeg;letk=null;letflag=false;const$rotate=$('.rotate');//012$('a').on('click',function(){varnum=$input.val();//当前旋转位置为curLc=deg%360/120；//要旋转的角度deg=deg+4*360+(2*blocks-num-curLc)*baseDeg;如果（标志===真）{返回假;}标志=真；清除间隔（k）；k=空；$rotate.addClass('tn');$rotate.css({'transform':`rotate(${deg}deg)`});//过渡效果列表！--没有添加兼容性$rotate.on('transitionend',function(){flag=false;$(this).removeClass('tn');lettimeK=null;)=>{k=timeK=setInterval(()=>{vartemDeg=deg.toString();if(k!==timeK){clearInterval(timeK);返回假；}if($rotate.hasClass('tn')){返回假；}//下面代码正则解决js小数点计算问题temDeg=(/\./).test(temDeg)?temDeg.replace(/\.\d+/,function($1){varresult=$1.length===2?`${$1.substr(1)}0`:`${$1.substr(1)}`;返回结果}):`${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);});})})()演示地址

上一篇：Ionic3环境配置

下一篇：css实现等高布局的多种方式

转盘抽奖——我自己手淫相关文章