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 面向对象 命名空间
May 13 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
详解webpack babel的配置
Jan 09 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 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制作新闻系统的思路
2006/10/09 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
js 动态文字滚动的例子
2011/01/17 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python表示矩阵的方法分析
2017/05/26 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
英语专业个人求职自荐信
2013/09/21 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
2014年安全员工作总结
2014/11/13 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers