1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>随机选择器</title>
  6. </head>
  7. <style>
  8.     *{
  9.         margin: 0px;
  10.         padding: 0px;
  11.         user-select: none;
  12.     }
  13.  
  14.     #show{
  15.         width: 480px;
  16.         height: 320px;
  17.         background: rgb(, , );
  18.         margin: 0px auto;
  19.         margin-top: 100px;
  20.         overflow: hidden;
  21.         border-radius: 20px;
  22.     }
  23.  
  24.     #uname{
  25.         width: 320px;
  26.         height: 80px;
  27.         background: blue;
  28.         color: #FFF;
  29.         font-size: 30px;
  30.         text-align: center;
  31.         margin:  auto;
  32.         line-height: 80px;
  33.         margin-top: 60px;
  34.         border-radius: 10px;
  35.         margin-top: 80px;
  36.     }
  37.  
  38.     #btn{
  39.         width: 200px;
  40.         height:60px;
  41.         border: none;
  42.         background: #FFF;
  43.         border-radius: 10px;
  44.         margin:  auto;
  45.         margin-top: 30px;
  46.         display: block;
  47.         color: blue;
  48.         font-size: 40px;
  49.         text-align: center;
  50.     }
  51.     #btn:hover{
  52.         cursor: pointer;
  53.     }
  54. </style>
  55. <body>
  56.     <div id="show">
  57.         <div id="uname">答案</div>
  58.         <div id="btn">开始</div>
  59.     </div>
  60. <script>
  61.     var uname = document.getElementById("uname");
  62.     var btn = document.getElementById("btn");
  63.     var select = ["A", "B", "C", "D"];
  64.     var start;
  65.     var rand = function(m, n) {
  66.         var num = Math.floor(Math.random()*(n - m) + m);
  67.         return num;
  68.     }
  69.     btn.onclick = function() {
  70.         if(this.innerHTML == "开始") {
  71.             /*解决定时器叠加*/
  72.             if(start) {
  73.                 return;
  74.             }
  75.             start = setInterval(function() {
  76.                 var index = rand(, select.length - );
  77.                 uname.innerHTML = select[index];
  78.             },);
  79.             this.innerHTML = "停止";
  80.  
  81.         }else{
  82.             clearInterval(start);
  83.             start = "";
  84.             this.innerHTML = "开始";
  85.         }
  86.     }
  87. </script>
  88. </body>
  89. </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. BSGS求解离散对数问题

    离散对数问题是求解axΞb mod(n) 同余方程 以下模板使用于gcd(a,n)=1的情况 ; int hs[mod],head[mod],Next[mod],id[mod],top; void i ...

  2. Web Workers - （Worker（专有） and SharedWorker（共享））

    Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法 线程可以执行任务而不干扰用户界面 可以使用XMLHttpRequest执行 I/O (尽管responseXML和channe ...

  3. 深入浅出聊一聊Docker

    网易云信IM私有化部分用到Docker技术,今天我们就深入浅出来聊聊Docker. Docker是什么? Docker是一个工具,能把应用打包部署于container里,这里可以把container看 ...

  4. Linux下用Bash语言实现判断素数的功能

    题目链接: 题目描述 写一个判断素数的函数,在主函数输入一个整数,输出是否是素数的消息. 输入 一个数 输出 如果是素数输出prime 如果不是输出not prime 样例输入 97 样例输出 pri ...

  5. socket编程执行远程命令实现_python

    一.单客户端连接的例子: 服务端: import socket,os,subprocess server=socket.socket() server.bind(('localhost',1234)) ...

  6. nvm —— Node版本管理工具

    nvm下载 下载地址 下载nvm-setup.zip文件 nvm安装 1.以管理员身份运行install.cmd文件,设置文件路径 root: C:\Users\Administrator\AppDa ...

  7. vue报错[Vue warn]: The data property "record" is already declared as a prop. Use prop default value instead.

    当我写了一个子组件,点击打开子组件那个方法时报了一个错 这句话说明意思呢?谷歌翻译一下↓ 数据属性“record”已声明为prop. 请改用prop默认值. 感觉翻译的有点怪,通过最后修改代码后大概意 ...

  8. TF file

    To software:Design rules for placement and routing interconnect resistance /capacitance data for gen ...

  9. python 音频可视化

    代码整理好放在 github 上了: https://github.com/darkchii/visualize bilibili 演示视频:https://www.bilibili.com/vide ...

  10. AcWing 487. 金明的预算方案

    #include <cstring> #include <iostream> #include <algorithm> #include <vector> ...