<title>Document</title>
<style>
img {
width: 500px;
}
</style>
</head>
<body>
<img src="images/thunder.jpg" alt="">
<div id="d">上午好</div>
<script>
/*
1.根据系统不同的事件来判断,所有需要用到的日期内置对象
2.利用多分支语句来设置不同的图片
3.一个图片,并且根据事件修改图片,就需要用到操作元素src
4.一个div元素,显示不同问候语,修改元素内容即可
*/
// 1. 获取元素
var img = document.querySelector('img');
var div = document.getElementById('d');
// 2.得到当前的事件 小时
// Date 该实例呈现时间中的某个时刻,即自1970年1月1日(UTC)起经过的毫秒数。
var date = new Date(); // 当前时间
var h = date.getHours(); // 小时
// 3.判断小时数改变图片和文字信息
if (h < 12) {
img.src = 'images/卡卡西.jpg';
div.innerHTML = '美好的一天开始啦'
} else if (h < 18) {
img.src = 'images/大蛇丸.jpg';
div.innerHTML = '下午好,加油'
} else {
img.src = 'images/thunder.jpg'
div.innerHTML = '晚上好,不早点睡小心明天崩溃'
}
</script>
</body>
由于秃头桑的知识能力有限,如果有写的不对的地方,还请各位大佬批评指正,各位小伙伴如果有什么想和秃头桑说的欢迎在下方留言哦。