DOM操作元素对象:分图问候显示不同图片

最新推荐文章于 2024-10-15 14:00:48 发布
最新推荐文章于 2024-10-15 14:00:48 发布
阅读量70 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69096723/article/details/123933346
版权

JavaScript DOM操作 时间判断 图片切换 前端交互
关键词由CSDN通过智能技术生成

<!DOCTYPE html>

<html>

<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>

<style>

img{

width: 300px;

}

</style>

</head>

<body>

<img src="images/ morning . gif" alt= "Good Morning" >

<div>上午好</div>

<script>

var img = document . querySelector( ' img');

var div = document . querySelector( ' div');

var date=new Date();

var h = date. getHours();

if (h<12){

img.src = 'images/morning.gif';

div. innerHTML ='亲，上午好，好好写代码';

}else if (h<18) {

img.src = 'images/afternoon.gif';

div. innerHTML ='亲，下午好，好好写代码';

} else {

img.src='images/evening.gif';

div.innerHTML = '亲，晚上好，好好写代码';

}

</script>

</body>

</html>

 

m0_69096723
关注
javascript DOM(2) 一个网页上切换显示不同的图片或文本
weixin_30525825的博客
07-11 207
摘自： javascript DOM 编程艺术 1. 在一个网页上切换显示不同的图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://...
html js remove图片,使用原生js、html2canvas来实现拖拽标记（删除标记）并截取图片范围的dom结构变成一张图片...
weixin_39984105的博客
06-04 182
* {margin:0;padding:0;}html,body {width:100%;height:100%;}.drag {position:absolute;width:50px;height:50px;background-color:red;z-index: 999;}.drag span{margin-left: 38px;display: none;}.drag:hover spa...
DOM操作元素对象：分时问候显示不同图片
Crafts_Neo的博客
04-03 358
<!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>案.
DOM操作元素——分时问候案例
thisisxiaohei的博客
09-27 383
在电脑开机时，右下角都会跳出来一个窗口，有图片和文字的向用户问好。这一功能是如何实现的呢？实现一个图片，并根据时间来修改图片，需要DOM操作元素，来。执行事件的三步：获得事件源，绑定事件，添加事件处理程序。同时文字也会随着时间的改变改变，则要对div中的。进行对不同时间段的判断，需要js日期内置对象。不同时间的图片和文字都不一样，则需要通过。（改变img中的src属性）if判断语句设置分支。
Javascript-API-DOM-操作元素对象的属性、文本内容、子元素、样式、事件
qq_39206750的博客
10-21 992
API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 简单理解:API是给程序员提供的一种工具、以便能更轻松的实现想要完成的功能 例如 C语言中有一个函数 fopen()可以打开...
DOM对象（一）——DOM对象介绍、获取元素、事件和样式操作（包括案例：仿京东显示密码 点击关闭二维码等）
m0_53619602的博客
07-14 1092
## 常见的鼠标事件 |鼠标事件| 触发条件 | |--|--| | onclick | 鼠标点击左键触发 | | onmouseover |鼠标经过触发 | | onmouseout | 鼠标离开触发 | | onfocus |获得鼠标焦点触发 | |onblur |失去鼠标焦点触发 | |onmousemove | 鼠标移动触发 | |onmouseup | 鼠标弹起触发 | |onmousedown |鼠标按下触发 |...
JavaScript之DOM操作获取元素、事件、操作元素、节点操作
weixin_53155105的博客
08-07 2737
什么是 DOM？ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式 DOM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node.
Dom——隔行变色、分时显示问候语
zx2014567296的博客
06-14 287
隔行显示 效果 效果如上图所示，当鼠标经过某一行时，该行的背景颜色变深，其余行不变，当鼠标移开，背景颜色恢复。如下图所示。 核心思路 设置一个表格，获取事件源表格的每一行，但不能给每一行设置类名再逐一获取，这样效率太低。我们可以利用for进行遍历获取。 表头那行不需要变色，因此只需要获取tbody的tr即可。 设置事件类型鼠标经过onmouseover和鼠标移开onmouseout，鼠标经过背景颜色发生变化，移开后恢复。（注意：如果不设置ommouseout恢复背景颜色则表格的颜色将无法复原，如下图所
JS学习之DOM操作元素
weixin_53317758的博客
05-16 425
显然JS学习没有HTML节奏快，感觉知识点还要琐碎难记，但是只要花时间努力攻克难关就能跟上老师的脚步，不能轻易放弃 常用元素的属性操作 innerText.innerHTML改变元素内容 scr href id alt title 只要是元素.属性值 就能改变属性 案例：分时显示不同图片，显示不同问候语 根据不同时间，页面显示不同图片，同时显示不同的问候语 如果上午时间打开页面，显示上午好，显示上午的图片 如果下午时间打开页面，显示下午好，显示下午的图片 如
不同时间段显示不同问候语.rar
07-04
标题“不同时间段显示不同问候语.rar”所暗示的知识点是关于使用JavaScript编程语言来实现一个动态功能，即根据当前的时间段显示相应的问候语。在网页应用中，这种功能可以增加用户体验，让页面更具互动性和个性化。...
DOM操作：获取和修改HTML元素
它将每个文档的组件，如元素、属性和文本，表示为对象，开发人员可以使用这些对象来操作文档的内容和结构。 ## 1.2 DOM的重要性 DOM提供了一种方便的方式来操作HTML页面的元素和内容。通过使用DOM，开发人员可以...
DOM—事件基础 操作元素（改变元素内容、修改元素属性、表单属性设置、样式属性操作）
m0_59030524的博客
01-02 752
1.事件基础 1.1 事件三要素 事件源、事件类型、事件处理程序 <body> <button id='btn'>唐伯虎</button> <script> // 点击一个按钮，弹出对话框 // 1. 事件三要素：事件源、事件类型、事件处理程序 // （1）事件源：事件被触发的对象——按钮 var btn = document.getElementById('btn');.
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1460
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1336
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 491
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
最新发布
Fisher的专栏
10-15 521
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 473
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
如何使用Python爬虫处理JavaScript动态加载的内容？
Z_suger7的博客
10-11 705
JavaScript动态加载的内容为爬虫带来了挑战，但也提供了新的机遇。通过使用Selenium、分析API请求或Pyppeteer，我们可以有效地爬取这些动态内容。这些方法各有优势，Selenium适合模拟复杂的用户交互，API请求适合直接获取数据，而Pyppeteer则提供了更强大的JavaScript控制能力。在实际应用中，开发者应根据目标网站的特点和需求选择合适的方法。随着技术的不断发展，我们也需要不断学习和适应新的工具和方法，以保持在数据获取领域的竞争力。复制再试一次分享。
探秘纯前端Excel表格：构建现金流量表的完整指南
葡萄城技术团队博客
10-10 1129
现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值