JavaScript小案例——分时显示不同图片，显示不同问候语

最新推荐文章于 2024-07-11 17:05:07 发布

momo不吃辣

最新推荐文章于 2024-07-11 17:05:07 发布

阅读量877

点赞数 1

文章标签： HTML CSS JavaScript 时间判断页面动态更新

本文链接：https://blog.csdn.net/weixin_54645034/article/details/126474751

版权

要求：

1.根据不同时间，页面显示不同的问候语。

2.如果上午时间打开画面，显示上午好，显示上午的照片。中午，晚上同理。

分析：

1.根据不同系统不同时间来判断，所有需要用到日期内置对象。

2.利用多分支语句来设置不同的图片。

3.需要一个图片，并且根据时间修改时间，就需要用到操作元素src属性。

4.需要一个div元素，元素不同问候语，修改元素内容即可。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="早上好.jpeg" alt="">
    <div>早上好</div>
    <script