实现目标
案例分析
- 根据系统的不同时间来判断,所以需要调用日期内置对象
- 利用多分支语句来设置不同的图片
- 需要一个图片,并根据时间修改图片,就需要用到操作元素src属性
- 需要一个div元素,显示不同的问候语,修改元素内容即可
代码演示
<body>
<img src="images/morning.jpg" alt="">
<div>上午好</div>
<script>
//1.获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
//2.得到当前的小时数
var date = new Date();
var h = date.getHours();
//3.根据小时数改变图片和文字信息
if (h < 12) {
img.src = 'images/morning.jpg';
div.innerHTML = '亲,上午好,赶紧写代码'
} else if (h < 18) {
img.src = 'images/noon.jpg';
div.innerHTML = '亲,中午好,好好写代码'
} else {
img.src = 'images/afternoon.jpg';
div.innerHTML = '亲,下午好,玩命写代码'
}
</script>
</body>
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容