1.用try和catch处理错误
welcome10.html
<!DOCTYPE html>
<html>
<head>
<title>Square root</title>
<script>
window.onload = initAll;
function initAll(){
var ans = prompt("Please enter a number bigger than 0: ")
// 如果不加【,""】,则输入框会出现undefined
try{
if (!ans || isNaN(ans) || ans<0){
throw new Error("Not a valid number.");
}
//!ans用于判断是否输入,isNaN(Not a Number)用于判断输入的是否是一个数(无效则返回true)
alert("The square root of " + ans + " is " + Math.sqrt(ans));
}
catch(errMsg){
alert(errMsg.message);
}
}
</script>
</head>
<body>
</body>
</html>
运行结果
换个好看的浏览器
2.制作BINGO卡片
welcome11.html
<!DOCTYPE html>
<html>
<head>
<title>Make my BINGO card</title>
<link rel="stylesheet" href="script11.css">
<!-- rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表 -->
<script src="script11.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="s0"> </td>
<td id="s5"> </td>
<td id="s10"> </td>
<td id="s14"> </td>
<td id="s19"> </td>
</tr>
<tr>
<td id="s1"> </td>
<td id="s6"> </td>
<td id="s11"> </td>
<td id="s15"> </td>
<td id="s20"> </td>
</tr>
<tr>
<td id="s2"> </td>
<td id="s7"> </td>
<td id="free">Free</td>
<td id="s16"> </td>
<td id="s21"> </td>
</tr>
<tr>
<td id="s3"> </td>
<td id="s8"> </td>
<td id="s12"> </td>
<td id="s17"> </td>
<td id="s22"> </td>
</tr>
<tr>
<td id="s4"> </td>
<td id="s9"> </td>
<td id="s13"> </td>
<td id="s18"> </td>
<td id="s23"> </td>
</tr>
</table>
<p><a href="welcome11.html" id="reload">Click here</a> to creat a new card</p>
<!-- 网页设计中定义段落的标记,<p>称为开始标记,</p>称为结束标记 -->
</body>
</html>
script11.css
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);
}
script11.js
window.onload = initAll;
function initAll(){
for (var i=0;i<24;i++){
var newNum = Math.floor(Math.random()*75)+1;
document.getElementById("s"+i).innerHTML = newNum;
// innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;
// 如:<div id="aa">这是内容</div> ,我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容;
// 也可以对某对象插入内容,如 document.getElementById('abc').innerHTML='这是被插入的内容'; 这样就能向id为abc的对象插入内容。
}
}
运行结果
学习心得
迷迷糊糊的敲完了代码,还是有挺多不能理解的东西
~ 为空格占位符
~ <table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。