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

点击抽取就可以抽签了，红色框会显示内容，（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. 《穷查理年鉴》金钱 & 生意 & 律师（关于金钱）

    金钱 025.钱还得快才会借得快. 030.钱和人有着复杂的友谊:人能让钱变坏,钱也能让人变坏. 034.绝望增加债务,勤奋偿还债务. 037.只有一无所有的人才会没有烦恼. 049.穷人为他的胃找食 ...

  2. 【原创】Linux虚拟化KVM-Qemu分析（四）之CPU虚拟化（2）

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: KVM版本:5.9 ...

  3. ansible-主机清单的配置

    1. ansible主机清单的配置 以下是ansible安装完成后的源文件 1 [root@test-1 ~]# cat /etc/ansible/hosts 2 # This is the defa ...

  4. Angluar2 项目搭建

    一 使用 Angular CLI 官方脚手架 1.安装 cli npm install -g @angular/cli 2.创建工作空间和初始应用 ng new my-app 二 tsLint 代码格 ...

  5. Python基础笔记1-Python读写yaml文件（使用PyYAML库）

    最近在搭建自动化测试项目过程中经常遇到yaml文件的读写,为了方便后续使用,决定记下笔记. 一,YAML 简介 YAML,Yet Another Markup Language的简写,通常用来编写项目 ...

  6. Python数据类型--元组（tuple）

    元组与列表非常相似,最大区别在于: (1)元组是不可修改的,定义之后就"固定"了. (2)元组在形式上是用()这样的圆括号括起来 (3)元组不能插入或删除元素 注:元素可修改与不可 ...

  7. 2020已经过去五分之四了，你确定还不来了解一下JS的rAF?

    不会吧,不会吧,现在都2020年了不会还真人有人不知道JS的rAF吧??? rAF 简介 rAF是requestAnimationFrame的简称: 我们先从字面意思上理解requestAnimati ...

  8. centos8平台给sudo配置日志

    一,sudo日志的用途: 我们可以记录下来用户账号在哪个时间进行过sudo 这样不需要再从secure日志中查找用户的sudo记录 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://w ...

  9. navicate premium黄色版本破解下载

    百度网盘下载 提取码: tsua 按照电脑安装32位或者64位 安装完成后点击最后一个进行破解汉化

  10. XSS攻击 js 脚本注入

    原文地址:http://www.cnblogs.com/robot/archive/2009/04/15/1436107.html 1.不要相信Request.QueryString: 相信在asp时 ...