盒马js分时问候案例

最新推荐文章于 2024-10-06 04:03:15 发布

不会前端的前端猿

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量76

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_69172270/article/details/124745976

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        img {
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
<div>
    上午好
</div>
<img src="image/s.gif" alt="">
<script>
    // 获取元素
    var div = document.querySelector('div')
    var img = document.querySelector('img')
    // 返回当前小时
    var date = new Date();
    var h = date.getHours();
    // 上午时区
    if (h < 12) {
        img.src = 'image/s.gif'
        div.innerHTML = '上午好'
    }
    // 下午时区
    else if (h < 18) {
        img.src = 'image/x.gif'
        div.innerHTML = '下午好'
    }
    // 晚上时区
    else {
        img.src = 'image/w.gif'
        div.innerHTML = '晚上好'
    }
</script>
</body>
</html>