任务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的创建：
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。

   <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方法