基于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 相关文章推荐
ajax中get和post的说明及使用与区别
Dec 23 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
vue实现菜单切换功能
May 08 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
微信小程序使用前置摄像头拍照
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获取客户端电脑屏幕参数的方法
2015/01/09 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
JavaScript中json使用自己总结
2013/08/13 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
python 切片和range()用法说明
2013/03/24 Python
详解Python中break语句的用法
2015/05/14 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
EJB发布WEB服务一般步骤
2012/10/31 面试题
4s客服专员岗位职责
2013/12/01 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
质量提升方案
2014/06/16 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
师德师风学习材料
2014/12/19 职场文书
给老婆的保证书
2015/01/16 职场文书
公司租车协议书
2015/01/29 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers