基于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 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
jquery 插件学习(三)
Aug 06 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
微信小程序 标签传入数据
May 08 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
在vue项目中使用md5加密的方法
Sep 14 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
php遍历数组的方法分享
2012/03/22 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php经典趣味算法实例代码
2020/01/21 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
Python的requests网络编程包使用教程
2016/07/11 Python
python爬虫的工作原理
2017/03/05 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
基层党支部整改方案
2014/10/25 职场文书
婚庆答谢词
2015/01/04 职场文书
地震慰问信
2015/02/14 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL