javascript实现的一个随机点名功能


Posted in Javascript onAugust 26, 2014

这个其实是对JS随机数的一个练习方式,先把所有人得名字预先写好在一个数组里,然后让数组里的值快速的显示在区域内,当你按停的时候滚动就会停止达到随机效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JS写的随机点名 - 琼台博客</title>
	<script type="text/javascript">
	var isRun=true;
	var a = ["张三","李四","王五","赵六"];	
	var a2 = new Array();
	function action(str){
		var s = document.getElementById("bt").value;
		if(s=="开始"){
			isRun=true;
			run();
			document.getElementById("bt").value="结束";
		}else{
			isRun=false;
			document.getElementById("bt").value="开始";
		}
	}
	function run(){
		var i = Math.floor(Math.random() * a.length+ 1)-1;
		document.getElementById("show").innerHTML=a[i];
		if(isRun==false){
			var b =true;
			for(var j in a2){
				if(a2[j]==i){
					b=false;
				}
			}
			if(b){
			 	a2[a2.length]=i;
				return;
			}
		}
		setTimeout("run()",10);
	}
</script>

</head>

<body>
	<div style="text-align:center; margin-top:100px;width:100%;">
		<div id="show" style="margin:auto;font-size:50px;width:100px;height:50px; background:#FFEEFF"></div>
		<div style="margin-top:20px;">
			<input id="bt" type="button" onclick="action()" value="开始"/>
		</div>
	</div>
</body>
</html>
Javascript 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
JS按回车键实现登录的方法
Aug 25 #Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 #Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 #Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 #Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 #Javascript
js获取checkbox复选框选中的选项实例
Aug 24 #Javascript
jQuery异步加载数据并添加事件示例
Aug 24 #Javascript
You might like
php使用反射插入对象示例分享
2014/03/11 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP实现微信提现功能
2018/09/30 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
Python实现FTP文件传输的实例
2019/07/07 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
电力安全事故反思
2014/04/27 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
人事任命书范文
2014/06/04 职场文书
工作证明格式及范本
2014/09/12 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2015年班组工作总结
2015/04/20 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android