qq_45609569
qq_45609569
2021-06-02 18:38
采纳率: 100%
浏览 27

用Math.random随机了一个角度,结果不转了,求解

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>转盘</title>

  <style>/*css样式*/

  *{/*通配符,选择到所有的标签元素*/

  margin:0;

  padding:0;

 }

 body{

 background:#00ffff;

 }

 

  #rotate{/* # id选择器*/

    position:relative;/*相对定位*/

  width:480px;/*宽*/

  height:480px;/*长*/

  background:url("images/2.jpg");

  margin:50px auto;/*添加一个外边距*/

  }

  .rotateArrow{/*class类选择器*/

        position:absolute;/*绝对定位*/

  left:183px;/*距离参考物左端的距离*/

  top:125px;/*距离参考物上端的距离*/

  width:112px;

  height:224px;

  background:url("images/3.png");

  }

  .result{

    display:none;/*隐藏*/

        position:absolute;

  left:41px;

  top:188px;

  width:400px;

  height:100px;

  background:rgba(0,0,0,0.7)/*透明颜色*/

  }

  .result p{

  width:400px;

  height:120px;

  color:#fff;/*文本颜色*/

  text-align:center;/*文本左右对齐:居中*/

  line-height:100px;/*行高*/

  }

   .result i{

        position:absolute;

  right:0;

  top:0;

  width:24px;

  height:24px;

  background:url("images/4.png");

  }

 

  </style>

 </head>

 <body>

 <div id="rotate">

  <div class="rotateArrow"></div>

  <div class="result">

   <p>谢谢参与</p>

   <i></i>

  </div>

 </div>

 <script src="js/jquery.min.js"></script>

 <script src="js/jQueryRotate.js"></script>

 <script>/*点击旋转指针开始抽奖*/

  $(".rotateArrow").click(function(){//点击实现什么功能

   /*

   Math.random() 生成0-1之间的随机数

   Math.random()*12 生成0-12之间的随机数

   Math.floor() 向下取整

   */

   var n = Math.floor(Math,random()*12);//0-11之间的随机整数

   switch (n)

   {

   case 0:

    rotateFun(0,"恭喜你中了一等奖!");

    break;

   case 1:

    rotateFun(30,"谢谢参与");

    break;

   case 2:

    rotateFun(60,"很遗憾没中奖");

    break;

   case 3:

    rotateFun(90,"很遗憾,要加油哦");

    break;

   case 4:

    rotateFun(120,"恭喜你中了三等奖");

    break;

   case 5:

    rotateFun(150,"运气先攒着");

    break;

   case 6:

    rotateFun(180,"很遗憾没中奖");

    break;

   case 7:

    rotateFun(210,"很遗憾,再接再厉");

    break;

   case 8:

    rotateFun(240,"恭喜你中了二等奖");

    break;

   case 9:

    rotateFun(270,"祝你好运");

    break;

   case 10:

    rotateFun(300,"很遗憾没中奖");

    break;

   case 11:

    rotateFun(330,"不要灰心");

    break;

    }

  })

  //自定义一个旋转的功能

  function rotateFun (deg,text) {

   $(".rotateArrow").rotate({

    angle:0,//初始位置

    duration:5000,//旋转的时间

    animateTo: deg + 1440,//旋转多少角度

    callback:function(){//当旋转结束,返回结果}

     //让结果框显示

     $(".result").show();

     //把结果改成相应的箭头指向的结果

     $(".result p").html(text);

     }

   })

  }

  //获取关闭按钮,隐藏关闭按钮隐藏结果框

  $(".result i").click(function(){

   //让结果框隐藏

   $(".result").hide();

  })

 

 

 </script>

 </body>

</html>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • technologist_45
    CSDN专家-林老师 2021-06-02 18:51
    已采纳

    麻烦将代码稍微格式化一下,我复制下来本地调试一下子。

    将“,”改成“,”

    点赞 评论
  • QA_Assistant
    有问必答小助手 2021-06-03 15:15

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    点赞 评论

相关推荐