JavaScript中的随机数--随机点名器

同学小H闲来无事，拿起手机，找到列表里最帅的人，进行聊天。

小H：在吗？

新白：在

小H:你知道随机数吗

新白：知道啊，Random函数嘛
在这里插入图片描述

小H：这几天刚做了几个关于这个题

新白：好吧，给我讲讲呗，开始你的表演。
在这里插入图片描述

小H:请输入要生成随机数的位数？

新白：这个我来，看我代码。

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>请输入要生成随机数的位数：</p>
		<form name="form">
			<input type="text" name="digit"/>
						<input type="button"  onclick="come(form.digit.value)"    value="生成" />
		</form>
		<script>
			function come(digit){
 				if(digit==""||isNaN(digit)){//isNaN() 函数用于检查其参数是否是非数字值
					alert("还没有输入数字")
				}
				else{
					var ss="";
					for(var i=0;i<digit;i++){
					var num=Math.floor(Math.random()*10);//[0,1,2,3,4,5,6,7,8,9]
					ss+=num;
					}
					alert("你输入的数字是:"+ss);
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

小H：还行，我来个升级版，加上字母。

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>请输入要生成随机数的位数：</p>
		<form name="form">
			<input type="text" name="digit"/>
						<input type="button"  onclick="come(form.digit.value)"    value="生成" />
		</form>
		<script>
			function come(digit){
 				if(digit==""||isNaN(digit)){//isNaN() 函数用于检查其参数是否是非数字值
					alert("还没有输入数字")
				}
				else{
					var tempStr="";
					var chars = 'ABCDEFGHIJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789';
					for(var i=0;i<digit;i++){
					var num=Math.floor(Math.random()*10);//[0,1,2,3,4,5,6,7,8,9]
					tempStr+= chars.charAt(Math.floor(Math.random() * chars.length));//[0,41]
					}
					alert("输出为:"+tempStr);
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述
新白：厉害啊。

小H：再给你来个随机点名器吧

新白：好，学到了，到时候在宿舍来个随机点名决定谁去买饭，哈哈哈。

小H：这也可以的，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击按钮随机点名-样式布局</title>
		<style type="text/css">
			#bodybj {
				background: url(img/timg.jpg);
			}

			#box {
				margin: auto;
				width: 660px;
				font-size: 66px;
				height: 94px;
				color: #138eee;
				text-align: center;
				margin-top: 200px;
			}

			#bt {
				margin: auto;
				width: 200px;
				text-align: center;
				margin-top: 75px;
				color: #fff;
				font-size: 25px;
				cursor: pointer;
			}
		</style>

	</head>
	<body id="bodybj">
		<div id="box">亲，准备好点名了吗？</div>
		<div id="bt" onClick="doit()">开始点名</div>
		<script type="text/javascript">
			var namelist = ["张三", "李四", "王五", "贺六", "孙九", "赵十", "刘一"];
			var mytime = null;

			function doit() {
				var bt = window.document.getElementById("bt");
				if (mytime == null) {
					//innerHTML在JavaScript中是双向功能：获取对象的内容或向对象插入内容；
					bt.innerHTML = "停止点名";
					show();
				} else {
					bt.innerHTML = "开始点名";
					//clearTimeout()方法可取消由setTimeout()方法设置的timeout
					//参数必须是setTimeout()方法返回的ID值
					clearTimeout(mytime);
					mytime = null;
				}
			}

			function show() {
				var box = window.document.getElementById("box");
				var num = Math.floor(Math.random() * 100000) % namelist.length;
				box.innerHTML = namelist[num];
				//setTimeout()方法用于在指定毫秒数后调用函数或计算表达式
				mytime = setTimeout("show()", 1);
			}
		</script>
	</body>
</html>

背景图：
在这里插入图片描述
结果图：

新白：
在这里插入图片描述

小H：

JavaScript中的随机数--随机点名器

猜你喜欢