javascript内置函数:Math.random()制作简单小页面:随机学号点名、抽奖、随机数。

今天分享一个简单的小页面,利用javascript中的内置函数Math.random()进行随机数的生成。

Math.random()

Math.random();
是JavaScript中的内置函数
console.log(Math.random()); // 0(包含) ~ 1(不包含)之间随机数(这句可以在控制台输出一个随机数,但除刷新外不会改变)

Math.random() 默认是0(包含) ~ 1(不包含)之间随机数

console.log(Math.random() * 10); // 0(包含) ~ 10(不包含)之间随机数(包含小数)

关于Math.random()详细介绍点击:Math.random()菜鸟教程

html部分

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生成随机数title>
		<style>
			.app {
				width: 500px;
				text-align: center;
			}

			#wrapper {
				width: 200px;
				height: 200px;
				border: 1px solid red;
				border-radius: 50%;
				text-align: center;
				line-height: 200px;
				margin: 0 auto;
			}
		style>
	head>
	<body>
		<div class="app">
			<div id="wrapper">01div>
			<button id="btn">开始button>
		div>
		
	body>
html>

JS部分

<script>
			var _btn = document.querySelector("#btn"); //点击按钮
			var _wrapper = document.querySelector("#wrapper"); //随机的学号
			var id; //定时器标识
			_btn.onclick = function() {
				var info = _btn.innerText; //获取按钮内容
				if (info == "开始") {
					btn.innerText = "结束";
					//每个1秒生成新的随机数
					id = setInterval(function() {
						var random = Math.floor(Math.random() * 35 + 1);//1-35之间的随机整数
						if (random < 10) {
							random = '0' + random;
						}
						_wrapper.innerText = `${random}`
					}, 100)

				} else {
					btn.innerText = "开始";
					clearInterval(id);
				}
			}
		script>

你可能感兴趣的:(JS,javascript,前端,html)