<!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. golang channel 的一次内存错误

    起因 原因调查 原因分析 问题解决 总结 起因 今天在做数据库数据读取时, 首先通过多个 goroutine 将从数据库读取的数据写入 channel, 同时通过另一个 goroutine 从 cha ...

  2. 百度网盘无vip高速下载的方法

    我拿的是谷歌浏览器做实验 首先下载一个可以改user-agent的插件 我chorm里面下载的是User-Agent Switcher for Chrome插件 将百度网盘的url地址中的baidu. ...

  3. (转)一致性Hash

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/23397179     一致性哈希算法在1997年由麻省理工学院提出的一种分布式哈希(DHT) ...

  4. docker安装elasticsearch和head插件

    使用 Docker 拉取ElasticSearch镜像 docker pull elasticsearch:7.0.0 查看镜像 ID docker images 运行 docker run -e E ...

  5. Weather

    Scientists say a lot about the problems of global warming and cooling of the Earth. Indeed, such nat ...

  6. EF工作流程

    1.EF基本的CRUD(增删改查)流程 2.EF的工作过程简析 EDM--Entity Data Model--实体数据模型 概念模型: EF通过领域类,上下文类,默认约定和配置构建概念模型. 存储模 ...

  7. JS定义类的六种方式详解

    转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...

  8. 132. 分割回文串 II

    Q: 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回符合要求的最少分割次数. 示例: 输入: “aab” 输出: 1 解释: 进行一次分割就可将 s 分割成 [“aa”,“b ...

  9. Java基础小知识(一)

     序言:“不积跬步,无以至千里.不积小流,无以成江海.”每一个庞大的知识架构都是由无数个小知识点慢慢积累起来的,没有量变的积累,就没有质变上的飞跃,成功往往离不开积累. 今天就和大家分享一些我在学习J ...

  10. OPC通信原理在数采中的应用

    OPC通信原理在数采中的应用 OPC是Object Linking and Embedding(OLE)for Process Control的缩写,它是微软公司的对象链接和嵌入技术在过程控制方面的应 ...