首页前端开发HTMLweb前端：HTML5抽奖转盘demo

web前端：HTML5抽奖转盘demo

时间2024-01-26 19:28:02发布访客分类HTML浏览604
导读：收集整理的这篇文章主要介绍了html5教程-web前端：HTML5抽奖转盘demo，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 网上下载了一些转...
收集整理的这篇文章主要介绍了html5教程-web前端：HTML5抽奖转盘demo，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

网上下载了一些转盘demo来学习，记录如下：

实现方式

1、转盘要么为纯图片，利用rotate控制图片旋转

2、转盘要么是JS手绘的，使用canvas标签，通过控制CSS改变来旋转

重要的地方

概率：初始化权重值，使用Math.floor(Math.random()*sum取得随机数

旋转基数：转盘旋转一圈后并不是回到原点，所以下次改变角度的时候要算上之前旋转过的度数，所以转盘转过一圈的时候要把旋转基数+1

旋转度数：旋转度数控制停留的位置，使用setTimeout来控制旋转的时间

代码带详细注释：【图片实现方式】

 .bkgd{
      margin: auto;
      margin-top:10rem;
      background: url("../images/disc-bg.gif") no-rePEat scroll 0 0 transparent;
      background-size: 100%;
      height:15rem;
      width:15rem;
      posITion: relative;
 }
 .imgs{
      position: absolute;
      width: 12rem;
      height: 12rem;
      margin-top:1.4rem;
      margin-left:1.6rem;
 }
 .arrow{
      background: url("../images/arrow.png") no-repeat scroll 0 0 transparent;
      background-Size: 100%;
      height: 7rem;
      width: 1.1rem;
      margin-left: 7rem;
      margin-top: 3rem;
      position: absolute;
 }
 .lot-BTn{
      background: url("../images/buttons_02.png") no-repeat scroll 0 0 transparent;
      background-size: 100%;
      height: 2.9rem;
      width: 2.9rem;
      overflow: hidden;
      position: absolute;
      border: none;
      cursor: pointer;
      margin-left: 6.1rem;
      margin-top: 6rem;
 }

 $(function(){
      VAR clickNum = 5;
    //可抽奖次数  var rotNum = 0;
    //旋转基数,转盘转过一圈则旋转基数+1  var angles;
    //旋转角度  var notice = null;
//中奖公告   var data = [   {
    "info":"100G永久免费空间",    "PRobability":10   }
,   {
    "info":"360经验值",    "probability":10   }
,   {
    "info":"100M空间",    "probability":10   }
,   {
    "info":"36经验值",    "probability":100   }
,   {
    "info":"360M空间",    "probability":10   }
,   {
    "info":"100经验值",    "probability":10   }
,   {
    "info":"36M空间",    "probability":10   }
  ]    $("#lot-btn").click(function(){
       if (clickNum >
= 1){
        clickNum = clickNum-1;
     //可抽奖次数减一    rotNum ++;
     //旋转基数加一    runCup();
     //转盘旋转    $('#lot-btn').attr("disabled", true);
    setTimeout(function(){
         alert(notice);
         $("#lot-btn").attr("disabled", false);
    }
    ,1800);
   }
   else{
        alert("亲，抽奖次数已用光！");
   }
  }
)    //转盘旋转，将各个变量结果赋值  function runCup(){
       var resultinfo = getResult();
       notice = '恭喜获得：' + resultinfo;
       angles = rotNum*1080 + getAngles(resultinfo);
     $("#imgs").rotate({
    aniMATETo: angles,    duration: 1800   }
    );
  }
   //随机一个结果用以展示  function getResult(){
       var sum = 0;
       var rand = 0;
     //随机数   var result = 0;
        //取得权重总数   for (var i = 0;
     i  data.length;
 i++) {
    sum += data[i].probability   }
       console.LOG( sum );
        //从总数里面随机一个数，并对应输入随机的值   for (var i = 0;
     i  data.length;
 i++) {
        rand = Math.floor(Math.random()*sum + 1);
         if (data[i].probability >
= rand) {
         result = data[i].info;
         break;
    }
 else {
        sum -= data[i].probability;
    }
   }
       console.log( result );
       return result;
  }
   //获得旋转结果对应的旋转度数  function getAngles(resultinfo){
       var num   //查找结果的位置   for (var i = 0;
     i  data.length;
 i++) {
    if( resultinfo == data[i].info ){
         num = i;
     break    }
else{
         console.log( "不相等，继续循环" );
    }
   }
       console.log( num );
   if( num == 0 ){
    angles = 1825;
   }
else if( num == 1 ){
    angles = 1775;
   }
else if( num == 2 ){
    angles = 1725;
   }
else if( num == 3 ){
    angles = 1675;
   }
else if( num == 4 ){
    angles = 1625;
   }
else if( num == 5 ){
    angles = 1925;
   }
else if( num == 6 ){
    angles = 1875;
   }
else{
    console.log( "error" );
   }
       return angles;
  }
 }
)

原始demo来源网络，应该很容易搜到~~CSS修改是想弄个移动端自适应，但是并没有做得很好r(s-t)q

网上下载了一些转盘demo来学习，记录如下：

实现方式

1、转盘要么为纯图片，利用rotate控制图片旋转

2、转盘要么是JS手绘的，使用canvas标签，通过控制CSS改变来旋转

重要的地方

概率：初始化权重值，使用Math.floor(Math.random()*sum取得随机数

旋转基数：转盘旋转一圈后并不是回到原点，所以下次改变角度的时候要算上之前旋转过的度数，所以转盘转过一圈的时候要把旋转基数+1

旋转度数：旋转度数控制停留的位置，使用setTimeout来控制旋转的时间

代码带详细注释：【图片实现方式】

 .bkgd{
      margin: auto;
      margin-top:10rem;
      background: url("../images/disc-bg.gif") no-repeat scroll 0 0 transparent;
      background-size: 100%;
      height:15rem;
      width:15rem;
      position: relative;
 }
 .imgs{
      position: absolute;
      width: 12rem;
      height: 12rem;
      margin-top:1.4rem;
      margin-left:1.6rem;
 }
 .arrow{
      background: url("../images/arrow.png") no-repeat scroll 0 0 transparent;
      background-size: 100%;
      height: 7rem;
      width: 1.1rem;
      margin-left: 7rem;
      margin-top: 3rem;
      position: absolute;
 }
 .lot-btn{
      background: url("../images/buttons_02.png") no-repeat scroll 0 0 transparent;
      background-size: 100%;
      height: 2.9rem;
      width: 2.9rem;
      overflow: hidden;
      position: absolute;
      border: none;
      cursor: pointer;
      margin-left: 6.1rem;
      margin-top: 6rem;
 }

 $(function(){
      var clickNum = 5;
    //可抽奖次数  var rotNum = 0;
    //旋转基数,转盘转过一圈则旋转基数+1  var angles;
    //旋转角度  var notice = null;
//中奖公告   var data = [   {
    "info":"100G永久免费空间",    "probability":10   }
,   {
    "info":"360经验值",    "probability":10   }
,   {
    "info":"100M空间",    "probability":10   }
,   {
    "info":"36经验值",    "probability":100   }
,   {
    "info":"360M空间",    "probability":10   }
,   {
    "info":"100经验值",    "probability":10   }
,   {
    "info":"36M空间",    "probability":10   }
  ]    $("#lot-btn").click(function(){
       if (clickNum >
= 1){
        clickNum = clickNum-1;
     //可抽奖次数减一    rotNum ++;
     //旋转基数加一    runCup();
     //转盘旋转    $('#lot-btn').attr("disabled", true);
    setTimeout(function(){
         alert(notice);
         $("#lot-btn").attr("disabled", false);
    }
    ,1800);
   }
   else{
        alert("亲，抽奖次数已用光！");
   }
  }
)    //转盘旋转，将各个变量结果赋值  function runCup(){
       var resultinfo = getResult();
       notice = '恭喜获得：' + resultinfo;
       angles = rotNum*1080 + getAngles(resultinfo);
     $("#imgs").rotate({
    animateTo: angles,    duration: 1800   }
    );
  }
   //随机一个结果用以展示  function getResult(){
       var sum = 0;
       var rand = 0;
     //随机数   var result = 0;
        //取得权重总数   for (var i = 0;
     i  data.length;
 i++) {
    sum += data[i].probability   }
       console.log( sum );
        //从总数里面随机一个数，并对应输入随机的值   for (var i = 0;
     i  data.length;
 i++) {
        rand = Math.floor(Math.random()*sum + 1);
         if (data[i].probability >
= rand) {
         result = data[i].info;
         break;
    }
 else {
        sum -= data[i].probability;
    }
   }
       console.log( result );
       return result;
  }
   //获得旋转结果对应的旋转度数  function getAngles(resultinfo){
       var num   //查找结果的位置   for (var i = 0;
     i  data.length;
 i++) {
    if( resultinfo == data[i].info ){
         num = i;
     break    }
else{
         console.log( "不相等，继续循环" );
    }
   }
       console.log( num );
   if( num == 0 ){
    angles = 1825;
   }
else if( num == 1 ){
    angles = 1775;
   }
else if( num == 2 ){
    angles = 1725;
   }
else if( num == 3 ){
    angles = 1675;
   }
else if( num == 4 ){
    angles = 1625;
   }
else if( num == 5 ){
    angles = 1925;
   }
else if( num == 6 ){
    angles = 1875;
   }
else{
    console.log( "error" );
   }
       return angles;
  }
 }
    )

原始demo来源网络，应该很容易搜到~~CSS修改是想弄个移动端自适应，但是并没有做得很好r(s-t)q

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

CSSdivDOMpost-format-gallery

若转载请注明出处： web前端：HTML5抽奖转盘demo
本文地址： https://pptw.com/jishu/587180.html
HTML5实现手机上发短信，电话的功能 HTML5是什么？CSS3新增了什么特性？

游客 回复需填写必要信息
↑