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

要求：

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>//获取元素var img= document.querySelector('img');var div= document.querySelector('div');//得到当前小时数var date= new Date()var h=date.getHours();//判断小时数改变图片和文字信息if(h<12){img.src='早上好.jpeg';div.innerHTML='早上好，好好学习。';}else if(h<18){mg.src='中午好.jpeg';div.innerHTML='中午好，好好干饭。';}else{mg.src='#';div.innerHTML='晚上好，好好休息。';}</script>
</body>
</html>

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

html首页问候语,HTML5通过Javascript网页调用日期显示、根据时间判断问候语显示...
HTML5通过Javascript网页调用日期显示.根据时间判断出不同时间段的问候语并显示增加一段小小的问候语,就可以增加访客们对你网站的关照. 效果展示: 代码: 今天是: var day=&qu ...
CSS排版练习小作业，文字围绕图片显示，基本的float浮动定位
简单的css排版基本的float浮动定位文字围绕图片显示 css代码,float分成两块 <style type="text/css">div.float1{flo ...
uniapp微信小程序rich-text图片显示不全图片显示不了
问题 uniapp里头要展示富文本内容,就得用rich-text标签,配合nodes属性,今天要显示如下的富文本,但是图片显示不了 <p>很不错的商品,可以选购下哦</p>&l ...
JavaScript小案例程序保存（完整代码+效果展示）
1.案例--点击button换照片 html部分 <!DOCTYPE html> <html lang="en"> <head><meta ...
Javascript小案例（一）：仿淘宝搜索框用户输入事件的实现
淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: (截图日期:2017年6月18日) 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋 ...
javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
android+背景图片不显示,背景图片显示问题图片显示错误 android开发
先贴出我的配置文件代码 android:layout_width="fill_parent" android:layout_height="fill_parent&quo ...
微信小程序内七牛云图片显示异常
接口返回的图片有些是存储在七牛云里面的,部分图片有可能是因为图片过大的缘故,导致在云内进行了压缩,导致图片显示异常这里的异常是指图片被翻转了90° 复现过程把该链接置入Chrome,下载图片,发 ...

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

要求：

分析：

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

最新文章

热门文章