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

点击抽取就可以抽签了，红色框会显示内容，（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. 一个漂亮的JavaScript“警告”替代品

    下载 一个漂亮的JavaScript"警告"替代品 安装 $ npm安装-节省sweetalert 使用 从"sweetalert"进口swal; 横波测井(& ...

  2. Java 移位运算、符号位扩展

    类型取值范围 short 是1字节,即8位.而且 Java 中只有有符号数,所以最大值 0111,1111=2^7-1. 同时计算机中以补码形式存负数,所以可以多表示一个数,则最小值 1000,000 ...

  3. 微信小程序 audio组件 默认控件 无法隐藏/一直显示/改了controls=‘false’也没用2019/5/28

    <audio>默认控件,如果需要隐藏,不需要特意设置controls = 'false',直接把这个属性删除即可,不然无论如何都会存在 之前,设置了controls = 'false' & ...

  4. IIS日志文件越来越大导致C盘空间变小处理方法

    问题概述 C:\inetpub\logs\LogFiles\W3SVC文件夹越来越大,IIS日志会消耗大量的硬盘空间,有潜在写满整个硬盘空间的风险,为了解决这个问题很多用户会选择关闭日志,但显然IIS ...

  5. frida- registernatives获取so层动态注册函数

    frida获取so层动态注册函数 谢谢大佬的无私奉献https://github.com/lasting-yang/frida_hook_libart 一.js模板一 function hook_Re ...

  6. 渗透测试之GoogleHack

    GoogleHack 1,介绍: 使用google等搜索引擎对某些特定的网络主机漏洞(一般是服务器上的脚本漏洞)进行搜索,都能达到快速找到1漏洞的目的,然而,google相对百度讲,没有广告,搜索引擎 ...

  7. E. Copying Data 解析(線段樹)

    Codeforce 292 E. Copying Data 解析(線段樹) 今天我們來看看CF292E 題目連結 題目 給你兩個陣列\(a,b\),有兩種操作:把\(a\)的一段複製到\(b\),或者 ...

  8. vue中iframe加载慢，给它加loading效果

    js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...

  9. puk1251 最小生成树

    Description The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid ...

  10. MVC IIS 403.14

    描述:HTTP Error 403.14 - Forbidden The Web server is configured to not list the contents of this direc ...