基于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 相关文章推荐
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
ES6中Symbol、Set和Map用法详解
Aug 20 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
调频问题解答
2021/03/01 无线电
php查看session内容的函数
2008/08/27 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
React中的refs的使用教程
2018/02/13 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
Python制作CSDN免积分下载器
2015/03/10 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python实现批量修改文件名
2020/03/23 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
高分子材料个人求职信范文
2013/09/25 职场文书
责任担保书范文
2014/05/21 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
教师工作态度自我评价
2015/03/05 职场文书
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL