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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery 插件开发 extjs中的extend用法小结
Jan 04 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
javascript数组的定义及操作实例
Nov 10 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新手上路(八)
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php二维数组排序详解
2013/11/06 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
javascript动画浅析
2012/08/30 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
微信小程序实现无限滚动列表
2020/05/29 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
项目建议书怎么写
2014/05/15 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
庆七一宣传标语
2014/10/08 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
大学组织委员竞选稿
2015/11/21 职场文书