基于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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
什么是PEAR?什么是PECL?PHP中两个容易混淆的概念解释
2015/07/01 PHP
php数据序列化测试实例详解
2017/08/12 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
JavaScript的Function详细
2006/11/14 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
django框架cookie和session用法实例详解
2019/12/10 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
python元组拆包实现方法
2021/02/28 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript