js实现抽奖效果


Posted in Javascript onMarch 27, 2017

效果图:

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>

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

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
javascript globalStorage类代码
Jun 04 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
微信小程序中显示html格式内容的方法
Apr 25 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 #Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 #Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 #Javascript
JS简单实现数组去重的方法示例
Mar 27 #Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
基于JavaScript实现焦点图轮播效果
Mar 27 #Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 #Javascript
You might like
PHP 图像尺寸调整代码
2010/05/26 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
python实现人脸识别代码
2017/11/08 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
python每天定时运行某程序代码
2019/08/16 Python
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
目标责任书范文
2014/04/14 职场文书
销售口号大全
2014/06/11 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
教师节活动总结
2014/08/29 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
婚礼父母答谢词
2015/01/04 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
高三教师工作总结2015
2015/07/21 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书