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

点击抽取就可以抽签了，红色框会显示内容，（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. vue中，使用 es6的 ` 符号给字符串之间换行

    我这里分功能是点击"复制范围",就相当于复制图上的坐标点一样的数据和格式: "复制功能"的代码如下: copyPoints() { const vm = thi ...

  2. Java 将Html转为PDF（二）

    前面介绍了如何通过插件的方式将Html文件转为PDF,该方法需要使用Spire.PDF for Java 3.6.6或者之后的新版本,可根据自己的系统选择不同插件来实现转换.本文提供另外一种转换方法, ...

  3. JVM 内存分配和占用

    我们从一个简单示例来引出JVM的内存模型 简单示例 我从一个简单示例谈起这一块,我在看一篇文章的时候看到这么一个场景并且自己做了尝试,就是分配一个2M的数组,使用Xmx即最大内存为12M的话,会报错J ...

  4. Brew error: Could not symlink, path is not writable

    As explained here by Rick: Start with brew doctor which will show you errors with your brew setup. Y ...

  5. 【矩阵乘优化DP】涂色游戏

    题目大意 用 \(p\) 种颜色填 \(n\times m\) 的画板,要求任意相邻两列的颜色数都不少于 \(q\) ,求方案数. 数据范围 \(1\leq n\leq 100,1\leq m\leq ...

  6. go 不停模拟 写日志

    package main import ( "os" "errors" "math/rand" "time" " ...

  7. ansible用user/group模块管理受控机上的用户和组(ansible2.9.5)

    一,ansible的user/group模块的用途: ansible的user模块用来实现:生成用户.删除用户等用户的管理ansible的group模块用来实现:生成组.删除组等组的管理 说明:刘宏缔 ...

  8. <bdi> 标签

    bdi 指的是 bidi 隔离. <bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置. 在发布用户评论或其他您无法完全控制的内容时,该标签很有用. 实例 把用户名从周围的文 ...

  9. 修改apt，pip，npm为国内镜像源

    apt 原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 编辑源列表文件 sudo vim /etc/apt/sources. ...

  10. python 实现多层列表拆分成单层列表

    有个多层列表:[1, 2, 3, 4, [5, 6, [7, 8]], ['a', 'b', [2, 4]]],拆分成单层列表 使用内置方法 结果和原列表顺序不同 def split(li): pop ...