Dom——隔行变色、分时显示问候语

隔行显示

效果

效果如上图所示，当鼠标经过某一行时，该行的背景颜色变深，其余行不变，当鼠标移开，背景颜色恢复。如下图所示。

核心思路

1. 设置一个表格，获取事件源表格的每一行，但不能给每一行设置类名再逐一获取，这样效率太低。我们可以利用for进行遍历获取。
2. 表头那行不需要变色，因此只需要获取tbody的tr即可。
3. 设置事件类型鼠标经过onmouseover和鼠标移开onmouseout，鼠标经过背景颜色发生变化，移开后恢复。（注意：如果不设置ommouseout恢复背景颜色则表格的颜色将无法复原，如下图所示）
   

代码部分

html部分

<table>
    <thead>
        <tr>
            <th>名字</th>
            <th>武器</th>
            <th>能力</th>
            <th>属性</th>
            <th>所属地</th>
            <th>突破材料</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>温迪</td>
            <td>天空之翼</td>
            <td>击飞、聚怪</td>
            <td>风</td>
            <td>蒙德</td>
            <td>塞西莉亚花</td>
        </tr>
        <tr>
            <td>钟离</td>
            <td>护膜之杖</td>
            <td>石化、护盾</td>
            <td>岩</td>
            <td>璃月</td>
            <td>石泊</td>
        </tr>
        <tr>
            <td>可莉</td>
            <td>四风原典</td>
            <td>伤害</td>
            <td>火</td>
            <td>蒙德</td>
            <td>慕风蘑菇</td>
        </tr>
        <tr>
            <td>魈</td>
            <td>和璞鸳</td>
            <td>扣血，下落攻击</td>
            <td>风</td>
            <td>璃月</td>
            <td>清心</td>
        </tr>
        <tr>
            <td>刻晴</td>
            <td>匣里龙吟</td>
            <td>瞬移</td>
            <td>雷</td>
            <td>璃月</td>
            <td>石泊</td>
        </tr>
        <tr>
            <td>琴</td>
            <td>天空之刃</td>
            <td>回血、减抗</td>
            <td>风</td>
            <td>蒙德</td>
            <td>蒲公英籽</td>
        </tr>
    </tbody>
</table>

css部分

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    table {
        width: 600px;
        height: 210px;
        text-align: center;
        line-height: 30px;
        margin: 100px auto;
        border: 2px solid #333;
    }
    
    thead tr {
        height: 30px;
        background-color: skyblue;
    }
    
    tbody tr {
        height: 30px;
    }
    
    tbody td {
        border-bottom: 1px solid #d7d7d7;
        font-size: 12px;
        color: blue;
    }
</style>

javascript部分

<script>
    var trs = document.querySelector('tbody').querySelectorAll('tr');
    for (let i = 0; i < trs.length; i++) {
        trs[i].onmouseover = function() {
            this.style.backgroundColor = '#ccc';
        }
        trs[i].onmouseout = function() {
            this.style.backgroundColor = '';
        }
    }
</script>

分时显示问候语

知识点

Data日期对象是一个构造函数，必须使用new来调用创建我们的日期对象

1. 使用：直接使用var day = new
   Date()输出电脑现在的时间
2. 参数常用写法
   ①数字型 2021,05,29（逗号隔开）
   ②字符串型’2021-05-29’（横杆隔开）
3. 日期格式化
   var date = newDate(); //这句话必须要写，实例化
   date.getFullYear(); // 返回当前日期的年
   date.getMonth()+1; //返回当前的月份（0-11），因此别忘记后面要加1
   date.getDate(); // 返回当前的日期
   date.getDay(); // 周一到周六返回相应的数字，周日返回的是0
   date.getHours(); // 返回时
   date.getMinutes(); // 返回分
   date.getSeconds(); // 返回秒
   // 写一个 “今天是2021年5月29日 星期六”
   var date = new Date();
   year = date.getFullYear();
   month = date.getMonth() + 1;
   dates = date.getDate();// 对象不能和之后定义的变量名冲突,因此这里用dates
   arr = [‘星期日’, ‘星期一’, ‘星期二’, ‘星期三’, ‘星期四’, ‘星期五’, ‘星期六’];
   // 创建一个数字，把星期日放在最前面，用day当索引值输出中文的日期
   day = date.getDay();
   console.log(‘今天是’ + year + ‘年’ + month + ‘月’ + dates + ‘日’ + arr[day]);
   // 写一个时间，格式为00:00:00
   var time = new Date();
   var h = time.getHours();
   h = h < 10 ? ‘0’ + h : h;
   var m = time.getMinutes();
   m = m < 10 ? ‘0’ + m : m;
   var s = time.getSeconds();
   s = s < 10 ? ‘0’ + s : s;
   alert(h + ‘:’ + m + ‘:’ + s)
4. 获得Date总的毫秒数（毫秒数永远不会重复的）
   ①通过valueOf()、getTime()：
   var date = new Date();
   console.log(date.valueOf());
   console.log(date.getTime());
   ②加号前置：
   var date = +new Date();
   console.log(date);
   ③H5新增的：
   console.log(Date.now());

效果

下午时候

晚上时候

由上面的效果可以看出，页面的内容会随着时间的变化而发生改变。

核心思路

1. 首先设置一个图片img和文本p，并分别获取他们的事件源。
2. 设置一个变量h，并利用函数获取当前的时间。
3. 用if、else if语句进行判断时间，更改图片img和文本p的内容

代码

html

<img src="image/温迪背景.jpg" alt="">
<p>早上好，愿风轻抚你的汗水</p>

css部分

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: border-box;
    }
    
    body {
        text-align: center;
    }
    
    img {
        width: 700px;
        margin-bottom: 50px;
    }
    
    p {
        display: block;
        width: 300px;
        height: 25px;
        margin: 0 auto;
        line-height: 25px;
        text-align: center;
        font-family: '仿宋';
        font-size: 18px;
        font-weight: 700;
    }
</style>

javascript部分

<script>
    var img = document.querySelector('img');
    var p = document.querySelector('p');
    var date = new Date();
    var h = date.getHours();
    if (h < 12) {
        img.src = 'image/温迪背景.jpg';
        p.innerHTML = '早上好，愿风轻抚你的汗水';
        p.style.color = 'green';
    } else if (h >= 12 && h < 19) {
        img.src = 'image/可莉背景.jpg';
        p.style.color = 'red';
        p.innerHTML = '下午好，和可莉一起摸鱼吧';
    } else if (h >= 19 && h < 24) {
        img.src = 'image/甘雨背景.jpg';
        p.style.color = 'brown';
        p.innerHTML = '晚上好，祝你有个好的夜晚';
    }
</script>