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 相关文章推荐
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
js Dialog 实践分享
Oct 22 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 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循环获取GET和POST值的代码
2008/04/09 PHP
linux php mysql数据库备份实现代码
2009/03/10 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python continue语句用法实例
2014/03/11 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python多线程分块读取文件
2019/08/29 Python
python打开使用的方法
2019/09/30 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
YUV转为jpg图像的实现
2019/12/09 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
不要在HTML中滥用div
2021/05/08 HTML / CSS
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis