js实现抽奖效果

 更新时间:2017年03月27日 14:06:34   转载 作者:kb码农  
本文主要介绍了js实现抽奖效果的方法实例。具有很好的参考价值。下面跟着小编一起来看下吧

效果图:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随机抽奖</title>
  <style>
    *{margin: 0;padding: 0;}
    body{
       background:darksalmon;
    }
    h1,#ks,#js{
       text-align: center;
     }
    #ks{
       width: 100px;
       height: 70px;
       background: blueviolet;
       border-radius: 10px;
       line-height: 70px;
       margin:3% 0 0 40%;
     }
    #ks:hover{
      width: 100px;
      height: 70px;
      background: tomato;
      border-radius: 10px;
      line-height: 70px;
    }
    #js{
      width: 100px;
      height: 70px;
      background: blueviolet;
      border-radius: 10px;
      line-height: 70px;
      margin:-5% 0 0 50%;
    }
    #js:hover{
      width: 100px;
      height: 70px;
      background: tomato;
      border-radius: 10px;
      line-height: 70px;
    }
    .jp{
      border:3px solid #CD5C5C;
      border-radius:10px;
      width:95px;
      height:23px;
      background:#ff3030;
      padding-top:5px;
      text-align:center;
      color: #ff7ee1;
    }
    #jp{
      width: 100%;
      height: 200px;
      background: orangered;
      position: absolute;
      margin-top: 300px;
    }
    #jp span{
     font-size: 30px;
    }
    #tx{
      font-size: 60px;
      color: #fff;
    }
  </style>
</head>
<body>
   <h1>抽奖了</h1>
   <div id="ks" onclick="ks()">开始抽奖</div><!--如何通过一个按钮实现开始和关闭?-->
   <div id="js" onclick="gb()">停止抽奖</div>
   <div id="jp"><span>恭喜你获得了:</span><span id="tx"></span></div>
<script>
  var arr=["三星","苹果","华为·荣耀","小米","魅族","中兴·努比亚","酷派","vivo(蓝厂)","oppo(绿厂)"];
  //循环添加的数组
  var lieshu=3;//列数
  console.log(arr.length);
  console.log("可以分:"+arr.length/lieshu+"行");
  for(var i=0;i<arr.length/lieshu;i++){//控制行数
    for(var j=0;j<lieshu;j++){//控制列
      if(i*lieshu+j<arr.length){
        console.log("循环最内层:"+i*lieshu+j);
        document.write("<div id=\"jiang"+(i*lieshu+j)+"\" class=\"jp\" style =\"" +
          "position:absolute;left:"+(j*110+500)+"px;" +"top:" +(i*50+200)+"px;\">"+
          arr[i*lieshu+j]+"</div>");
           /*  document.write 网页内写文件
              i*lieshu+j 为个数
           *   (j*110+500) 110 为列边距 500为整个表格;列偏移
           *   (i*40+300)  40 行间距  300为整个表格;列偏移
           *
           * */
       }
    }
  }
  var bs=-1;//用于循环过后变色
  var t;
 function ks(){
   /* 开始变色的方法*/
   if(bs!=-1){
    document.getElementById("jiang"+bs).style.background="#ff3030";
    }
    var shuijisu=Math.floor(Math.random()*arr.length);//生成arr.length个 随机数向下取证
    document.getElementById("jiang"+shuijisu).style.background="#3500cc";

    bs =shuijisu;//shuijisu 代指添加元素的下表
    t =setTimeout("ks()",100);
 }
function gb() {
  clearTimeout(t);
  document.getElementById("tx").innerHTML =document.getElementById("jiang"+bs).innerHTML;
//修改id="tx"类的值

}
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • js replace替换字符串同时替换多个方法

    js replace替换字符串同时替换多个方法

    这篇文章主要介绍了js replace替换字符串同时替换多个方法 的相关资料,需要的朋友可以参考下
    2018-11-11
  • 一道面试题引发的对javascript类型转换的思考

    一道面试题引发的对javascript类型转换的思考

    本文主要介绍了javascript类型转换的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JSON字符串操作移除空串更改key/value的介绍

    JSON字符串操作移除空串更改key/value的介绍

    今天小编就为大家分享一篇关于JSON字符串操作移除空串更改key/value的介绍,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Javascript玩转继承(三)

    Javascript玩转继承(三)

    在前两篇文章中,介绍了构造继承和原型继承。今天把剩下的两种写完,这两种的应用相对于前两种来说应用很少,因此我把他们称为是非主流继承方式
    2014-05-05
  • javascript使用正则控制input输入框允许输入的值方法大全

    javascript使用正则控制input输入框允许输入的值方法大全

    在做项目的时候,我们经常会遇到控制input输入框允许输入的值为数字,字母,汉字或者混排的情况,那么我们怎么来处理呢,下面我们就来探讨怎么通过用javascript正则来实现
    2014-06-06
  • JS解析XML实例分析

    JS解析XML实例分析

    这篇文章主要介绍了JS解析XML的方法,实例分析了javascript针对IE浏览器与非IE浏览器解析XML文件的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • 简单的网页广告特效实例

    简单的网页广告特效实例

    下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 纯js仿淘宝京东商品放大镜功能

    纯js仿淘宝京东商品放大镜功能

    本文主要介绍了纯js仿淘宝京东商品放大镜功能的实例。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 将Sublime Text 3 添加到右键中的简单方法

    将Sublime Text 3 添加到右键中的简单方法

    下面小编就为大家分享一篇将Sublime Text 3 添加到右键中的简单方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • js创建子窗口并且回传值示例代码

    js创建子窗口并且回传值示例代码

    本文为大家详细介绍喜爱使用js创建子窗口并且实现回传值的示例,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07

最新评论