<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>随机选择器</title>

</head>

<style>

    *{

        margin: 0px;

        padding: 0px;

        user-select: none;

    }

    #show{

        width: 480px;

        height: 320px;

        background: rgb(, , );

        margin: 0px auto;

        margin-top: 100px;

        overflow: hidden;

        border-radius: 20px;

    }

    #uname{

        width: 320px;

        height: 80px;

        background: blue;

        color: #FFF;

        font-size: 30px;

        text-align: center;

        margin:  auto;

        line-height: 80px;

        margin-top: 60px;

        border-radius: 10px;

        margin-top: 80px;

    }

    #btn{

        width: 200px;

        height:60px;

        border: none;

        background: #FFF;

        border-radius: 10px;

        margin:  auto;

        margin-top: 30px;

        display: block;

        color: blue;

        font-size: 40px;

        text-align: center;

    }

    #btn:hover{

        cursor: pointer;

    }

</style>

<body>

    <div id="show">

        <div id="uname">答案</div>

        <div id="btn">开始</div>

    </div>

<script>

    var uname = document.getElementById("uname");

    var btn = document.getElementById("btn");

    var select = ["A", "B", "C", "D"];

    var start;

    var rand = function(m, n) {

        var num = Math.floor(Math.random()*(n - m) + m);

        return num;

    }

    btn.onclick = function() {

        if(this.innerHTML == "开始") {

            /*解决定时器叠加*/

            if(start) {

                return;

            }

            start = setInterval(function() {

                var index = rand(, select.length - );

                uname.innerHTML = select[index];

            },);

            this.innerHTML = "停止";

        }else{

            clearInterval(start);

            start = "";

            this.innerHTML = "开始";

        }

    }

</script>

</body>

</html>

JS生成简单随机答案选择器,小抽奖器的更多相关文章

  1. js生成简单二维码

    js文件下载地址:https://download.csdn.net/download/weixin_38296752/10554485 一.引入qrcode.js文件 <script type ...

  2. 原创SQlServer数据库生成简单的说明文档小工具(附源码)

    这是一款简单的数据库文档生成工具,主要实现了SQlServer生成说明文档的小工具,目前不够完善,主要可以把数据库的表以及表的详细字段信息,导出到 Word中,可以方便开发人员了解数据库的信息或写技术 ...

  3. js 创建简单的表单同步验证器

    SyncValidate declare const uni: any; export interface SyncValidateOpt { [key: string]: SyncValidateF ...

  4. jQuery中的选择器及筛选器

    1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...

  5. 前端开发：mock.js的简单应用（生成随机数据，拦截 Ajax 请求）

    摘要 在前端开发过程中,后端接口还没有完全开发完成时,前端开发人员就需要学会自己模拟后端接口数据,更快更好的完成开发任务.模拟后端接口数据的js库有很多,今天就简单就简单的分享下mock.js在前端开 ...

  6. js实现简单的俄罗斯方块小游戏

    js实现简单的俄罗斯方块小游戏 开始 1. 创建一个宽为 200px,高为 360px 的背景容器 <!DOCTYPE html> <html lang="en" ...

  7. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  8. JS生成指定范围内的随机数（支持随机小数）

    直接需要函数的话,直接到文章的最后面找. ============================================================= 转载:https://www.cn ...

  9. JS生成随机字符串的多种方法

    这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript"> ...

随机推荐

  1. Docker最全教程——从理论到实战（十八）

    前言 VS Code是一个年轻的编辑器,但是确实是非常犀利.通过本篇,老司机带你使用VS Code玩转Docker——相信阅读本篇之后,无论是初学者还是老手,都可以非常方便的玩转Docker了!所谓是 ...

  2. day30 nfs服务器配置

    04. NFS服务部署流程 RPC: 远程过程调用服务程序--- 相当于租房的中介(网络编程支持) 服务端部署 第一个历程: 下载安装软件 rpm -qa|grep -E "nfs|rpc& ...

  3. 分类问题（三）混淆矩阵，Precision与Recall

    混淆矩阵 衡量一个分类器性能的更好的办法是混淆矩阵.它基于的思想是:计算类别A被分类为类别B的次数.例如在查看分类器将图片5分类成图片3时,我们会看混淆矩阵的第5行以及第3列. 为了计算一个混淆矩阵, ...

  4. 配置hosts快速访问GitHub

    经常要clone github中的一些项目,无奈如果不爬梯子的话速度实在是龟速,经常1k/s,于是搜了下解决方法,改HOSTS大法.Windows下在C:/Windows/system32/drive ...

  5. 解决laravel 429请求错误

    429 Too Many Requests(过多请求) 用户在在指定的时间里发送了太多的请求.用于限制速率. 这是laravel的api访问频率 找出throttle  这个中间件,注释掉.429问题 ...

  6. 你所不知道的locust

    from locust import HttpLocust, TaskSet, task import uuid, time import logging,json # https://docs.lo ...

  7. spring aop使用，spring aop注解，Spring切面编程

    ================================ ©Copyright 蕃薯耀 2020-01-21 https://www.cnblogs.com/fanshuyao/ 一.第一步, ...

  8. Ueditor百度编辑器中 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...

  9. 谈谈近期学习Nativejs和reactNative的一些感受

    因为前段时间,对dcloud推出的Nativejs和facebook推出的reactNative都做了一点点浅薄的研究.因为研究的很浅薄,所以仅代表我个人观点,谈谈对运用这两个产品的些许感受. 说起d ...

  10. OSI协议

    物理层: 网线连接在客户端计算机上,其实是连接在了计算机的一个叫做网卡的设备上,网卡是专门负责与外界通信的.网线一般是双绞线或者光缆,也可以使用无线电波,中间经过交换机,路由器,防火墙等等一堆设备统称 ...