Bingo卡片案例笔记【三】、随机生成数字并填写到表格中去

最新推荐文章于 2020-08-14 09:14:17 发布

原创最新推荐文章于 2020-08-14 09:14:17 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

javascript琐碎专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JavaScript生成1到75之间的随机数字，并填充到HTML表格中指定的24个单元格内，除了标记为'free'的单元格外。

在前面的步骤中，我们建立生成了html和css文件。下面我们要通过javascript来随机生成1～75中的数字并填写到除“free”以外的所有表格中去。

window.onload=newCard;


function newCard(){
	//共有24个格子需要填入数字，所以需要循环生成24个数字填入
	for(var i=0;i<24;i++)
	{
		var newNums=Math.floor(Math.random()*75)+1;
		//Math.random生成一个随机小数 Math.floor取整
		document.getElementById("square"+i).innerHTML=newNums;
	}
	
}

首先明确了一共有24个空格需要填写，那么就使用javascript来循环生成24个1～75的数字并填入空格中。

var newNums=Math.floor(Math.random()*75)+1;

1、Math.random()生成一个0～1之间的小数，乘以75后生成一个0～75之间的数

2、Math.floor进行取整，则产生的数字为0～74的整数。加1后暨生成1～75之间的随机整数。

document.getElementById("square"+i).innerHTML=newNums;

将产生的数字，通过html中的id标记传入表格中。


生成的页面，效果如下：