javascrip第一个web程序

最新推荐文章于 2025-04-22 22:32:39 发布

原创最新推荐文章于 2025-04-22 22:32:39 发布 · 490 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript学习专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，用于创建Bingo卡片，并通过JavaScript填充数字。卡片由5x5表格构成，中间一格标记为“Free”，其余格子通过JavaScript脚本随机填充1到75之间的数字。

效果图：

但里面包含了重复数字

脚本3-1 这个HTML页面建立Bingo卡片的框架

<!DOCTYPE html>
<html>
<head>
<title>Make Your Own Bingo Card</title>
<link rel="stylesheet" href="script01.css">
<script src="script01.js"></script>
</head>
<body>
<h1>Create A Bingo Card</h1>
<table>
<tr>
<th>B</th>
<th>I</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"> </td>
<td id="square5"> </td>
<td id="square10"> </td>
<td id="square14"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td id="square1"> </td>
<td id="square6"> </td>
<td id="square11"> </td>
<td id="square15"> </td>
<td id="square20"> </td>
</tr>
<tr>
<td id="square2"> </td>
<td id="square7"> </td>
<td id="free">Free</td>
<td id="square16"> </td>
<td id="square21"> </td>
</tr>
<tr>
<td id="square3"> </td>
<td id="square8"> </td>
<td id="square12"> </td>
<td id="square17"> </td>
<td id="square22"> </td>
</tr>
<tr>
<td id="square4"> </td>
<td id="square9"> </td>
<td id="square13"> </td>
<td id="square18"> </td>
<td id="square23"> </td>
</tr>
</table>
<p><a href="script01.html" id="reload">Click here</a> to create a new card</p>
</body>

</html>

脚本3-2 这个CSS文件为Bingo卡片添加样式
body {
background-color: white;
color: black;
font-size: 20px;
font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif;
}
h1, th {
font-family: Georgia, "Times New Roman",Times, serif;
}
h1 {
font-size: 28px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 2px #666 solid;
text-align: center;
width: 20%;
}
#free, .pickedBG {
background-color: #f66;
}
.winningBG {
background-image:url(images/redFlash.gif);
}

脚本3-3 欢迎你来到第一个JavaScript循环
window.onload = initAll;
function initAll() {
for (var i=0; i<24; i++) {
var newNum = Math.floor(Math.random() * 75) + 1;
document.getElementById("square" + i).innerHTML = newNum;
}
}
我解释一下上面的代码含义：

1. window.onload = initAll;
这行代码在脚本3-3中。当窗口完成加载时，它调用initAll()函数。使用事件处理程序调用函数
是常用的做法。
2. function initAll() {
这一行开始函数。
3. for (var i=0; i<24; i++) {

这一行开始循环。程序员通常使用变量i作为循环内部的计数器变量。首先，将i设置为0。分
号表示这个语句结束了，这使我们能够在同一行上放置另一个语句。下一部分的意思是，“如果i小
于24，那么执行花括号中的代码”。第二个分号后面的部分将i的值加1。因为这是第一次用到递增，
我们来解释一下。i++部分使用第1章介绍过的++操作符将i的值加1。这个循环将重复24次，所以
循环中的代码将执行24次。在第一次迭代中，i是0；在最后一次迭代中，i是23。
4. var newNum = Math.floor(Math.random() * 75) + 1;
在循环内部，我们创建一个新的变量newNum，并将它赋值为等号右边计算的结果。内置的
JavaScript命令Math.random()生成0～1的一个随机数，比如0.123456789。将Math.random()与最大
值相乘（请记住，Bingo卡片中的值是从1到75）会生成0到最大值之间的结果。对结果进行floor
运算会获得结果的整数部分，即0到（最大值减1）的整数。再加1就会获得1到最大值的数字。
5. document.getElementById("square" + i).innerHTML = newNum;
在这里，我们将刚才获得的随机数写入表格中。我们处理的元素的id属性是square再拼接上i
的当前值。例如，在循环的第一次迭代中，i的值是0，所以这一行处理id为square0的元素。这一
行将square0对象的innerHTML属性设置为newNum的当前值。然后，因为我们还在循环中，步骤4和
步骤5会重复执行，直到整个Bingo卡片填写完毕。