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 相关文章推荐
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
Vue实现简单的留言板
Oct 23 Javascript
使用Vue实现一个树组件的示例
Nov 06 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中如何判断AJAX提交的数据
2012/02/05 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
JavaScript Prototype对象
2009/01/07 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
numpy.delete删除一列或多列的方法
2018/04/03 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python操作cfg配置文件方式
2019/12/22 Python
python 穷举指定长度的密码例子
2020/04/02 Python
python要安装在哪个盘
2020/06/15 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
医院信息公开实施方案
2014/05/09 职场文书
敬老模范事迹
2014/05/21 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
2014年转正工作总结
2014/11/08 职场文书
公司欠款证明
2015/06/24 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
再谈python_tkinter弹出对话框创建
2022/03/20 Python