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 json2 使用方法
Mar 16 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
原生js实现自定义滚动条组件
Jan 20 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中break及continue两个流程控制指令区别分析
2011/04/18 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
如何在php中正确的使用json
2013/08/06 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
十佳大学生村官事迹
2014/01/09 职场文书
仓管员岗位责任制
2014/02/19 职场文书
保护母亲河倡议书
2014/04/14 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
党员公开承诺书内容
2014/05/20 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
介绍信范文
2015/01/31 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
小学运动会开幕词
2016/03/04 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
用Python实现Newton插值法
2021/04/17 Python