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

点击抽取就可以抽签了，红色框会显示内容，（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. 【题解】NOIP2018 填数游戏

    题目戳我 \(\text{Solution:}\) 题目标签是\(dp,\)但是纯暴力打表找规律可以有\(65\)分. 首先是对于\(O(2^{nm}*nm)\)的暴力搜索,显然都会. 考虑几条性质: ...

  2. python自动化实现验证码登录过程

    (自动化实现验证码登录,这里内容是入坑后,整合了几个文档的内容)|以下模块是使用时需要用到的首先:安装pillow库,它的作用是对图片进行简单的处理,在pytharm中使用pip install pi ...

  3. 【数量技术宅|金融数据分析系列分享】为什么中证500（IC）是最适合长期做多的指数

    更多精彩内容,欢迎关注公众号:数量技术宅.探讨数据分析.量化投资问题,请加技术宅微信:sljsz01 投资股票指数相比个股的优势 我们在投资股票的时候,如果持仓集中在一只或者有限几只股票上,恰好不幸遇 ...

  4. Consul 快速入门

    Consul是什么 Consul是一个服务网格(微服务间的 TCP/IP,负责服务之间的网络调用.限流.熔断和监控)解决方案,它是一个一个分布式的,高度可用的系统,而且开发使用都很简便.它提供了一个功 ...

  5. Redis哨兵知识点总结

    1.Redis哨兵介绍 sentinal,中文名是哨兵 A.哨兵是redis集群架构中非常重要的一个组件,主要功能如下 集群监控,负责监控redis master和slave进程是否正常工作 消息通知 ...

  6. 网站搭建-云服务器是什么-云服务器ECS是什么

    学习上瘾了,本博客关闭,后期再总结整理.

  7. Java结构体系

  8. 搭建ipse隧道

    我没有太多的物理服务器,实验环境只能用四台装了linux的虚拟机来模拟,用户层工具是openswan.大致拓扑如下(我有点懒,公网地址我用的194.168.10.0/24,别和192.168.xx.x ...

  9. 关于.netMVC 出现@ViewBag 出现错误(波浪红线)的解决方法

    解决vs2015.vs2013解决mvc5 viewbag问题 1.关闭vs2015或者vs2013 打开我的电脑或者文件夹 2.打开我的电脑 在地址栏输入 %UserProfile%\AppData ...

  10. 【循环矩阵乘优化DP】BZOJ 2510 弱题

    题目大意 有 \(M\) 个球,一开始每个球均有一个初始标号,标号范围为 \(1\) - \(N\) 且为整数,标号为 \(i\) 的球有 \(a_i\) 个,并保证 \(\sum a_i = M\) ...