任务1
小练习，练习使用循环实现一个九九乘法表
第一步，最低要求：在Console中按行输出 n * m = t
然后，尝试在网页中，使用table来实现一个九九乘法表
<script>
document.createElement(table);
for (var i = 9; i > 0; i--) {
for (var j = i; j > 0; j--) {
console.log(i+'*'+j+'='+i*j);
}
}
</script>
直接输出是没有问题的，但如何用JS创建table呢？
这里要用到接下来要用的DOM。
JavaScript HTML DOM 文档
文档对象代表您的网页。
如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。
使用 document 对象可以访问和操作 HTML 。
表格table的创建：
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>两行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
代码来自JS在页面输出九九乘法表：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td {
width: 200px;
height: 40px;
border: 1px solid #CCCCCC;
}
tr {
text-align: center;
}
</style>
</head>
<body>
<!--小练习，练习使用循环实现一个九九乘法表
第一步，最低要求：在Console中按行输出 n * m = t
然后，尝试在网页中，使用table来实现一个九九乘法表
-->
<table>
<th>九九乘法表</th>
</table>
<script>
for(var i=1;i<=9;i++){
var str="";
var arr=[];
var tr=document.createElement("tr");
for(var j=1;j<=i;j++){
str=i+"*"+j+"="+i*j;
arr.push(str);
// console.log(arr);
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=arr[j-1]; //注意这里是j-1 因为当i=1 j=1的时候 由于 arr[1]不存在 所以会报错
//console.log(str);把每次内部循环的结果也都输出了 第一行：3*1=3 第二行：3*1=3 3*2=6 第三行：3*1=3 3*2=6 3*3=9
}
//
// console.log(str); //将一次外循环作为一次输出
var table=document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
</script>
</body>
</html>
任务2
实现一个，当用户访问页面的时候，根据当前时间，在页面中输出不同的问候语。
比如早上的时候，输出早上好，晚上的时候是晚上好。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<h1>JavaScript 事件</h1>
<button id="buttont">时间是？</button>
<p id="demo">当前时间</p>
<script>
// document.getElementById("buttont").onclick= function {
// document.getElementById("demo").innerHTML=Date();
// }
// function后面没有带括号的惨痛遭遇
document.getElementById('buttont').onclick=function() {
var d = new Date();
var chinesehour = d.getUTCHours() + 8;//东八区
// getUTCHours() 方法可根据世界时 (UTC) 返回时间的小时
if(chinesehour>=5&&chinesehour<=10){
document.getElementById('demo').innerHTML = '早上好';
}else if(chinesehour>=11&&chinesehour<=14) {
document.getElementById('demo').innerHTML = '中午好';
}else if(chinesehour>=15&&chinesehour<=18) {
document.getElementById('demo').innerHTML = '下午好';
}else {
document.getElementById('demo').innerHTML = '晚上好';
}
}
</script>
</body>
</html>
date对象是一串很详细的日期时间，可以用正则提取hour，也有专门的方法：getUTCHours方法，可以直接获得小时。这里是标准时间，需要+8转换为东八区时间。
JavaScript Date 对象
Date 对象的getUTCHours方法
网友评论