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 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
js汉字转拼音实现代码
Feb 06 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
vue登录路由验证的实现
Dec 13 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
pandas重新生成索引的方法
2018/11/06 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
计算机毕业大学生推荐信
2013/12/01 职场文书
普通话宣传标语
2014/06/26 职场文书
农业项目建议书
2014/08/25 职场文书
党员先进事迹材料
2014/12/19 职场文书
爱国主义电影观后感
2015/06/18 职场文书
升学宴祝酒词
2015/08/11 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Python办公自动化之Excel(中)
2021/05/24 Python