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数组操作常用方法
May 08 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
微信小程序删除处理详解
Aug 16 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
详解Require.js与Sea.js的区别
Aug 05 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
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代码的53条建议
2008/03/27 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python+opencv实现动态物体识别
2018/01/09 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
房地产开发计划书
2014/01/10 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
2015年春节标语口号
2014/12/09 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL