根據系統時間顯示不一樣的問候語

時間 2020-06-01

標籤根據系統時間顯示不一樣問候简体版

原文原文鏈接

上午下午晚上分別顯示不一樣的問候語html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="110.jpg" alt="">
    <div>上午好</div>
    <script>
        //不一樣時間顯示不一樣的問候語
        //1.根據系統不一樣時間來判斷，多以須要用到日期內置對象
        //2.利用多分支語句來設置不一樣的圖片
        //3.須要一個圖片，而且根據時間修改圖片，就須要用操做元素src屬性
        //4.須要一個div元素，顯示不一樣的問候語，修改元素內容便可
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //獲得當前的小時數
        var date = new Date();
        var h = date.getHours();
        //判斷小時數 改變圖片和小時信息
        if(h<12) {
            img.src = '110.jpg';
            div.innerHTML = '上午好';
        }else if(h>12 && h<18){
            img.src = '122.jpg';
            div.innerHTML = '下午好';
        }else
        {
            img.src = '222.jpg';
            div.innerHTML = '晚上好';
        }

    </script>
</body>
</html>

相關標籤/搜索