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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
基于jquery编写分页插件
Mar 07 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 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使用ZipArchive函数实现文件的压缩与解压缩
2015/10/27 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python的faker库用法
2019/11/28 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python图片的横坐标汉字实例
2019/12/04 Python
简单了解Python write writelines区别
2020/02/27 Python
创业计划书中包含的9个方面
2013/12/26 职场文书
单身联谊活动方案
2014/01/29 职场文书
专科生就业求职信
2014/06/22 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
建国大业观后感
2015/06/01 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js