js 点名
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>点人名</title> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"/> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"/> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style>
h2{
font-size: 5em;
text-align: center;
margin-top: 50px;
height: 250px;
width: 350px;
margin: 50px auto;
border: 1px solid #ccc;
box-shadow: 5px #;
line-height: 250px;
}
.btn{
text-align:center; }
.btn input{
padding:10px 20px;
margin:10px 30px;
color:#;
}
.texrt{
text-shadow: 1px 2px 4px red;
}
</style>
</head> <body> <h2 id="num">
开始点人
</h2> <div class="btn">
<input type="button" value="开始" id="start"/>
<input type="button" value="结束" id="stop"/>
</div> <script> var arry = ['张武','赵欣','赵瑛','赵子怡','菲菲','雷囧','马季','小辣椒','龙卷风','名阿凡','秒速','艾莉婕','奥拉基'];
var num = document.getElementById('num');
var start = document.getElementById('start');
var stop = document.getElementById('stop');
var time = null;
start.onclick=function(){
num.className = 'texrt';
this.disabled=true;
time = setInterval(function(){
var n = Math.round(Math.random()*(arry.length-)); //随机产生 0 - arry.length 之间的数字
num.innerHTML = arry[n];
},);
}; stop.onclick=function(){
start.disabled=false;
clearInterval(time);
}; </script>
</body>
</html>
js 点名的更多相关文章
- 原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
- js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
- js随机点名
定时器案例. <!-- Author: XiaoWen Create a file: 2016-12-08 12:27:32 Last modified: 2016-12-08 12:51:59 ...
- js随机点名系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js实现简单的随机点名系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- JS: 随机点名程序与万年历
随机点名程序 document.write(Math.random()); var stu = ["张三", "王五", "张二", &qu ...
- js 随机点名
1.对象构造函数 设置节点与人名 constructor({ printElement, startElement, stopElement , person }) { this.list = per ...
- 原生JS实现随机点名项目
核心思想 随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 Math.random() * num: 产生从0到num的随机数 Math.floor(): 向下取整 ...
- 走进vue.js(一)
走进vue.js(一) vue.js作为目前最具前景的前端框架之一,既然如此,博主贯彻以往的作风,肯定要捣鼓一番,经过为期半个多月的研究,算是对vue有了深刻的理解与认识,下面分三个章节解开vue.j ...
随机推荐
- 网络流(最大流) HDU 1565 方格取数(1) HDU 1569 方格取数(2)
HDU 1565 方格取数(1) 给你一个n*n的格子的棋盘,每个格子里面有一个非负数.从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的 ...
- 【最小生成树】Codeforces 707B Bakery
题目链接: http://codeforces.com/problemset/problem/707/B 题目大意: 给你N个点M条无向边,其中有K个面粉站,现在一个人要在不是面粉站的点上开店,问到面 ...
- Unique Paths II ——LeetCode
Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...
- Unique Binary Search Trees——LeetCode
Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...
- HDOJ 2052 Picture
Problem Description Give you the width and height of the rectangle,darw it. Input Input contains a n ...
- 最小生成树问题(Kruskal 算法)(克鲁斯卡尔)
如图就是Kuskal算法 将图中的每条边按照权值从小到大排序,每次加起来就行,注意的是不要形成回路: 重点是如何用代码实现不能形成回路 看代码; #include <cstdio> #in ...
- [JAVA关键字] static & final
JAVA十分常见的关键字static & final 总的来说final表示常量,即不可更改的:而static表示静态,即全局的 1. final 类:不能被继承 2. final 方法:能被 ...
- JUnit basic annotation
一个标准的Junit 4的运行流程,大致如下:测试类实例化 -> @BeforeClass -> @Before -> @Test -> @After -> @After ...
- jsp判断手机访问和电脑访问
<% //取用户操作系统信息 String agent = request.getHeader("User-Agent") == null ? "": r ...
- hdu4010 Query On The Trees
Problem Description We have met so many problems on the tree, so today we will have a query problem ...