基于JavaScript实现简单抽奖功能代码实例


Posted in Javascript onOctober 20, 2020

为什么会做这个东西呢,纯属好玩,闲的

其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答

当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡

先来看看页面效果吧:

基于JavaScript实现简单抽奖功能代码实例

点击抽取就可以抽签了,红色框会显示内容,(PS:红色框是没有的,仅仅做描述)

抽取到的效果图如下,字体会随机滚动,最后停止:

基于JavaScript实现简单抽奖功能代码实例

里面的抽取内容完全可以替换,,,,

下面贴上代码:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{margin: 0px;padding: 0px;}
    li{list-style: none;}
    body{
      font-family: "楷体";
      user-select:none;
      background: url('1.jpg') no-repeat;
      background-size: 100%;
      /*background-color: red;*/
    }
    .section{
      position: relative;
      width:935px;
      height: 460px;
      background-color: rgba(0,0,0,.3);
      margin:165px auto 0;
      text-align: center;
    }
    .section h2{
      height: 90px;
      line-height: 90px;
      font-size: 40px;
      color:#fff;
    }
    .section .s-result{
      height: 400px;
      color: #fff;
    }
    .s-result .number{
      float: left;
      width: 895px;
      height: 300px;
      line-height: 300px;
      margin-left: 20px;
      font-size: 60px;
      font-weight: bold;
    }
    .btn{
      position:absolute;
      left: 50%;
      margin-left: -161px;
      bottom: -40px;
      width: 323px;
      height: 81px;
      border-radius: 30px;
      background-color: #000;
      cursor:pointer;
    }
    .btn p{
      line-height: 81px;
      font-size: 50px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class="section">
    <h2>看看谁最幸运!!</h2>
    <div class="s-result">
    </div>
    <div class="btn">
      <p>点 击 抽 取</p>
    </div>
  </div>
  <script>
    var oBtn = document.getElementsByClassName('btn')[0];
    var oResult = document.getElementsByClassName('s-result')[0];
    var arrName = ['张三','李四','王五','赵六','李xx','杨xx','张xx','A_dmin'];     //抽签的内容
    var step = 1;
    var cnt = 1;
    var flag = true;
    oBtn.onclick = function (){
      if(flag){
        step = 1;
        creatName();
        flag = false;
      }else{
        var d = document.getElementsByClassName('number')[0];
        oResult.removeChild(d);
        step = 1;
        creatName();
      }
    }
    function getName(){
      var num = Math.floor(Math.random()*(arrName.length-1));
      var n = arrName[num];
      arrName.splice(num,1);
      return n;
    }
    function creatName(){
      if(step > cnt){
        return null;
      }
      step++;
      
      var oDiv = document.createElement('div');
      oDiv.className = 'number';
      
      oResult.appendChild(oDiv);
      
      var dis = 1;
      var maxDis = 30;
      var mySet = setInterval(function(){
        dis++;
        if(dis > maxDis){
          oDiv.innerHTML = getName();
          clearInterval(mySet);
          creatName();
          return null;
        }
        oDiv.innerHTML = arrName[Math.floor(Math.random()*(arrName.length-1))];
      },50);
    }
  </script>
</body>
</html>

PS:

有点小瑕疵,可点击多次,每次随机的结果都是不一样的,所以当内容抽取完之后,页面会显示undefined,不过影响不大,啊哈哈哈哈

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
js实现一键复制功能
Mar 16 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
微信小程序使用前置摄像头拍照
Oct 22 #Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
vue3为什么要用proxy替代defineProperty
Oct 19 #Javascript
jQuery实现推拉门效果
Oct 19 #jQuery
小程序实现左滑删除的效果的实例代码
Oct 19 #Javascript
jQuery实现图片切换效果
Oct 19 #jQuery
You might like
php metaphone()函数的定义和用法
2016/05/15 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
小程序实现留言板
2018/11/02 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python编程实现蚁群算法详解
2017/11/13 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
《十六年前的回忆》教学反思
2014/02/14 职场文书
公证委托书模板
2014/04/03 职场文书
法定代表人授权委托书
2014/04/04 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书