HTML和webAPI之根据时间和事件来变实现图片的转换

一:概述

在一些前端的设计场景中，我们会发现有很多的场景需要根据时间然后去变换图片。在不同时间都会出现不同的图片。下面来写一个案例，来更换图片，并显示当前的时间(xx年xx月xx日)。

二：案例实现

在这里需要用到的知识是事件的使用以及JavaScript内置对象(时间函数)的使用。以及时间的格式化输出。虽然案例不难，但涉及的知识点也不少。

 <!-- // 根据系统不同时间来判断，所以需要用到日期对象
         // 利用多分支语来设置不同的图片
         // 需要一个图片,并且根据时间修改图片，就需要用到操作元素src属性
         // 需要一个div元素，显示不同问候语，修改元素内容即可
    -->
    <img src="images/s.gif" alt="">
    <div>上午好</div>

<script>
        // 1.获取元素
        var img = document.querySelector("img");
        var div = document.querySelector("div");

        // 创建时间对象
        var time = new Date();
        // 得到系统的年份
        var year = time.getFullYear();
        // 得到系统的月份  注意得到月份比真实的月份少一个月，所以需要 + 1
        var month = time.getMonth() + 1;
        // 得到系统是哪一天
        var date = time.getDate();
        // 得到系统的星期数
        var day = time.getDay();
        // 得到系统当前的小时数
        var hours = time.getHours();
        // 得到系统的分钟数
        var minutes = time.getMinutes();
        // 得到系统的秒数
        var seconds = time.getSeconds();

        // 利用数组的匹配，实现对星期的格式化
        // 首先去定义一个数组去存储星期几
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        // 利用三元运算符去实现对时分秒的格式化显示
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        // 通过判断去实现不同时间对图片的操作
        if (hours >= 5 && hours < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '早上好啊！现在是：' + year + '年' + month + '月' + date + '日' + hours + ':' + minutes + ':' + seconds + arr[day];
        } else if (hours == 12 && hours <= 13) {
            img.src = 'images/19.jpg';
            div.innerHTML = '中午好啊！现在是：' + year + '年' + month + '月' + date + '日' + hours + ':' + minutes + ':' + seconds + arr[day];
        } else if (hours > 13 && hours <= 18) {
            img.src = 'images/20.jpg';
            div.innerHTML = '下午好啊！现在是：' + year + '年' + month + '月' + date + '日' + hours + ':' + minutes + ':' + seconds + arr[day];
        } else if (hours > 18 && hours <= 24) {
            img.src = 'images/21.jpg';
            div.innerHTML = '晚上好啊！现在是：' + year + '年' + month + '月' + date + '日' + hours + ':' + minutes + ':' + seconds + arr[day];
        } else if (hours > 24 && hours <= 3) {
            img.src = 'images/22.jpg';
            div.innerHTML = '午夜好啊！现在是：' + year + '年' + month + '月' + date + '日' + hours + ':' + minutes + ':' + seconds + arr[day] + '该睡觉了！！';
        } else {
            img.src = 'images/23.jpg';
            div.innerHTML = '凌晨好啊！现在是：' + year + '年' + month + '月' + date + '日' + hours + ':' + minutes + ':' + seconds + arr[day];
        }

运行之后，可以实现

图片素材如下：分别是19.jpg,20.jpg,21.jpg,22.jpg,23.jpg,s.png