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 操作XML入门
Dec 25 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
js实现网页收藏功能
Dec 17 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 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实现读取和编写XML DOM代码
2010/04/07 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python3.x提取中文的正则表达式示例代码
2019/07/23 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
什么是数组名
2012/05/10 面试题
幼儿园中秋节活动方案
2014/02/06 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
撤诉书怎么写
2015/05/19 职场文书
起诉意见书范文
2015/05/19 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
美丽人生观后感
2015/06/03 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书