根据不同时间，页面显示不同图片，同时显示不同问候语

最新推荐文章于 2023-10-12 20:25:39 发布
最新推荐文章于 2023-10-12 20:25:39 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： javascript经典案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45896126/article/details/109367583
版权

要求：
如果过上午时间打开页面，显示上午好，同时显示上午的图片
如果过中午时间打开页面，显示中午好，同时显示中午的图片
如果过晚上时间打开页面，显示晚上好，同时显示晚上的图片
思路分析：
根据系统不同时间来判断，所以需要用到日期内置对象
利用多分支语句来设置不同的图片
需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
需要一个div对象，显示不同问候语，修改元素内容即可。
代码展示：
效果展示：

秃头男神
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js显示当前系统时间的代码
10-27
有时候我们需要用js获取当前系统时间，那么就可以参考下面的代码
04-WebApl
人俗话不多
03-08 563
Web Apis 和 JS基础关联性 JS 的组成 API 和 Web api ​ MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API API 是为我们程序提供的一个接口 , 帮助我们实现某种功能 Web API 主要针对 于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果 Web API 一般都有输入和输出 ( 函数的传参和返回值...
根据不同的时间，页面显示不同图片，同时显示不同的问候语
weixin_52065872的博客
04-27 776
根据不同的时间，提示不同的问候语
Vue 条件渲染 v-if 与 v-show
郊眠寺
06-18 426
在 Vue 中，有两种方法可以有条件地渲染应用程序的某些部分： 和 。条件渲染是控制是否渲染模板代码的能力。我们可以使用应用程序的当前状态来实现这一点。让我们看一个例子。假设我们正在创建一个表单，如果密码长度小于6个字符，我们希望显示一条无效的输入错误消息。 在本例中，我们使用 指令，然后传入一个布尔语句，如果语句为 ，渲染元素。如果为 ，则不会渲染。回到例子，我们将 替换为 ： 可以看到，它们有同样效果，但它们的工作方式是不同的。关键区别在于 有条件地渲染元素，而 有条件地显示元素。这意味着 在
iview条件渲染列表，后台返回的是状态码，怎么在表格里面条件渲染数据显示不同的内容
jattxgt的博客
07-17 515
iview官方文档：渲染展开区域与自定义列模板方法类似，使用 render 函数。 render本身就是一个函数，我们无非就是修改里面的内容，页面加载时函数调用，我们就在这个时候做判断就可以实现根据后台返回的状态码，根据不同的条件将数据显现在页面上 { title: "类别", key: "materType", render: (h, params) => { let texts=''; ..
微信小程序——条件渲染
weixin_45890771的博客
01-19 1373
获取用户基本信息 1. 用户未授权(首次登陆) button open-type=‘getUserInfo’ 2. 用户已经授权(再次登陆) wx.getUserInfo 一、语法说明 1. wx:if=’条件’ 2. wx:elif=’条件‘ 3. wx:else （1）wx:if 在框架中，使用wx:if=""来判断是否需要渲染该代码块 也可以使用 wx:elif 和 wx:else 来添加一个else块 二、 wx:if VS hidd...
分时显示不同图片，显示不同的问候语
weixin_43188011的博客
09-16 897
【案例】 分时显示不同图片，显示不同的问候语 要求： 根据不同的时间，页面显示不同的图片，同时显示不同的问候语。 1：如果是早上时间打开页面，显示上午好，显示上午图片； 2：如果是下午时间打开页面，显示下午好，显示 下午图片； 3：如果是晚上时间打开页面，显示晚上好，显示晚上图片； 分析 1：根据系统不同时间来判断，所以需要用到日期对象 2：利用多分支语句来设置不同的图片。 3：需要一个图片标签，并根据时间修改图片，就需要用到操作元素src属性 4：需要一个div元素，显示不同的问候语，修改元素内容即可。
小程序云开发（十三）：条件渲染
左手の明天的博客
04-05 254
在前面已经知道WXML中的动态数据来自于对应页面Page里的data，而data里面的数据无论是数字、字符串、数组、对象我们都可以将它们渲染到WXML页面，接下来我们会把data里面的数据作为条件来控制页面的渲染，而条件的核心就在于前面所说的布尔值Boolean是true还是false。
【小程序教程】微信小程序之条件渲染
最新发布
shenchengyv的博客
10-12 1082
微信小程序条件渲染在微信小程序中，条件渲染是一种非常实用的技术，它允许我们根据条件来决定是否显示某个组件或页面。通过条件渲染，我们可以动态地呈现用户界面，根据用户的输入、数据或其他条件来做出相应的调整。
根据时间显示不同图片
qq_41619968的博客
04-03 240
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>12345</div> <img src="#"> <script> var img=document.
根据不同时间，显示不同图片，显示不同问候语
茂茂的博客
01-26 3698
用Javascript实现分时间问候并显示不同图片 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 实现功能打开一个页面，根据用户目前的时间来判断，并表示问候 例如：9点，早上好，并显示早上的图片 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$Title$</title> <style>
The Fall Day - A Fall Tab-crx插件
04-08
秋季（一个秋季标签）-在新标签页上...L-叶子F-薄片D-日期T-时间G-问候语B-背景图像F11-全屏窗口如果您有任何问题，支持反馈，更改请求或有任何改进的想法，请使用以下页面进行报告它。 语言:English (United States)
时尚新标签「Fashion New Tab」-crx插件
03-16
和Google搜索•自定义背景：上传您的个人图像•触手可及的Chrome应用和书签•个性化的问候语•待办事项列表功能•快速访问访问最多和最近关闭的页面•可自定义的仪表板和设置•天气信息•时间•寒冷播放音乐播放列表...
dreamweaver上PHP网站开发相关插件
09-01
为你创建在早、中、晚不同时段出现不同的问候语。 Expandable Outlines.mxp 建立一个目录树样式的导航菜单。 Flash Text.mxp 使文字象打字效果一样显示。 Letterbox Frameset.mxp 创建一个中间的框架总是居于...
PHP动态网站开发插件
06-18
为你创建在早、中、晚不同时段出现不同的问候语。 Expandable Outlines.mxp Download 点击下载 建立一个目录树样式的导航菜单。 Flash Text.mxp Download 点击下载 使文字象打字效果一样显示。 Letterbox Frameset....
ajax用户登录注册
车明强的博客
11-04 5686
首先在服务器环境下运行，访问php接口 调用封装好的Ajax方法 前端js操作代码： 后端数据接口 <?php /* 接口说明文档 url: './data/user.php' type: post 参数： user 用户账号 pass 用户密码 type 登录或注册 = login 登录 = add 注册 返回值示例： {"err":0,"msg":"登录成功"} */// 允许任何来源 header(
javascript for循环练习
车明强的博客
09-28 1611
// 1. 求1-100之间所有数的平均值 思路：需要一个 sum 和的变量 还需要一个平均值 average 变量 var sum = 0; var average = 0; for (var i = 1; i <= 100; i++) { sum = sum + i; } average = sum / 100; console.log(average); // 2. 求1-100之间所有偶数和
js for循环创造小星星⭐⭐⭐
车明强的博客
10-05 1386
⭐⭐⭐这里有星星组成的各式各样的形状
根据当前时间显示不同问候语，并附带图片
05-26
好的，以下是根据当前时间显示不同问候语，并附带图片的 Python 代码： ```python import datetime from PIL import Image # 获取当前时间 now = datetime.datetime.now() # 根据当前时间选择问候语和图片 if now...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值