为什么会做这个东西呢，纯属好玩，闲的
其实是在上次班会的时候想到的，班会的时候叫人回答问题，没人回答
当时就想，我如果抽签抽到你了，你还是不回答吗？？好吧，一切都是扯淡
先来看看页面效果吧：

点击抽取就可以抽签了，红色框会显示内容，（PS：红色框是没有的，仅仅做描述）
抽取到的效果图如下，字体会随机滚动，最后停止：

里面的抽取内容完全可以替换，，，，
下面贴上代码：

<!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，不过影响不大，啊哈哈哈哈

HTML+JavaScript实现一个简单抽奖功能的更多相关文章

  1. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  2. jquery实现简单抽奖功能

    一直纠结要怎么用jquery实现抽奖功能,看别人很多都是用flash制作的,找了很多资料,最终找到一个比较适合需求的,我做了些许调整,以下是代码展示(复制下来可以直接使用). 先上图:

  3. 使用JavaScript实现一个简单的编译器

    在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...

  4. 用JavaScript实现一个简单的树结构

    数据源用数组混json结构,实现了基本的功能.效率一般,跟 dhtree 梅花雪树对比了下,都差不多. (ps感觉比dhtree快点,跟梅花雪树差不多,个人测试) 这个实现树的原理是根据json,不断 ...

  5. 使用javascript完成一个简单工厂设计模式。

    在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...

  6. 手摸手。完成一个H5 抽奖功能

    要完成一个这样的抽奖功能 构思 奖励物品是通过接口获取的(img) 奖励结果是通过接口获取的(id) 抽奖的动画需要由慢到快再到慢 抽奖转动时间不能太短 抽奖结束需要回调 业务代码和功能代码要分离 先 ...

  7. 用JavaScript写一个简单的计算器

    本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...

  8. JavaScript实现一个简单的密码输入功能

    常见的密码输入框当输入字符后会被替换成‘*’,而且旁边会有个小眼睛可以查看原本的字符,虽然input标签有这个功能,但这只是自己正在看正则表达式的时候突然想到的,就当做个练习,自己手动实现下: < ...

  9. JavaScript 实现一个简单的MVVM前端框架(ES6语法)

    前言 随着前端各大框架的崛起,为我们平时的开发带来了相当的便利,我们不能一直停留在应用层面,今天就自己动手实现一个乞丐版的MVVM小框架 完整代码github地址 效果 html代码 <div ...

随机推荐

  1. Spring的BeanFactory是什么？

    什么是BeanFactory? 提到Spring,总是让人第一时间想起IOC容器,而IOC容器的顶层核心接口就是我们的BeanFactory,如果能够理解BeanFactory的体系结构想必能让我们对 ...

  2. Oracle报错>记录被另外一个用户锁定

    原因 当一个用户对数据进行修改时,若没有进行提交或者回滚,Oracle不允许其他用户修改该条数据,在这种情况下修改,就会出现:"记录被另外一个用户锁定"错误. 解决 查询用户.数据 ...

  3. 多测师讲解selenium _下拉框的定位_高级讲师肖sir

    from selenium import webdriver from selenium.webdriver.support.ui import Select#导入类from time import ...

  4. 从源码的角度解析Mybatis的会话机制

    坐在我旁边的钟同学听说我精通Mybatis源码(我就想不通,是谁透漏了风声),就顺带问了我一个问题:在同一个方法中,Mybatis多次请求数据库,是否要创建多个SqlSession会话? 可能最近撸多 ...

  5. python 登陆三次错误退出

    登陆出现三次错误,退出程序 1 #登陆 2 def Login(): 3 a = input() 4 if a == 'Kate': 5 b = input() 6 if b == '666666': ...

  6. pytest文档56-插件打包上传到 pypi 库

    前言 pytest 的插件完成之后,可以上传到 github,方便其他小伙伴通过 pip 源码安装.如果我们想通过 pip install packages 这种方式安装的话,需上传到 pypi 仓库 ...

  7. Elasticsearch 基于external的乐观锁的版本控制

    version_type=external,唯一的区别在于,_version,只有当你提供的version与es中的_version一模一样的时候,才可以进行修改,只要不一样,就报错:当version ...

  8. ScanTailor-ScanTailor 自动矫正图像歪斜

    ScanTailor 自动矫正图像歪斜   下面操作某一步可能会卡住,别担心情等待它处理完毕.   New Project ... Input Directory "Browse" ...

  9. selenium基础 --获取内容

    from time import sleep from selenium import webdriver browser = webdriver.Chrome() url = "http: ...

  10. laravel重写

    laravel location / { try_files $uri $uri/ /index.php?$query_string; } ci location / { try_files $uri ...