之前的给网站添加一个动态小人物，有点问题，不能在不同时间显示不同的人物
这个可以了，已经亲自测试过了
不同时间显示不同的猫咪，不同时间显示不同的问候语，问候语是点击显示，显示三秒后自动消失
代码如下，在需要的页面加入就行了
<style>
#carrot {
position: fixed;
bottom: 20px;
left: 1px;
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
animation: shake 1s ease-in-out infinite;
background-image: url("img/0 (6).gif");
}
@keyframes shake {
0%!{(MISSING) transform: rotate(0deg); }
25%!{(MISSING) transform: rotate(5deg); }
50%!{(MISSING) transform: rotate(0deg); }
75%!{(MISSING) transform: rotate(-5deg); }
100%!{(MISSING) transform: rotate(0deg); }
}
#message {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #fff;
border: 1px solid #000;
padding: 10px;
display: none;
z-index: 999;
}
</style>
</head>
<body>
<div id="carrot"></div>
<div id="message"></div>
<script>
var carrot = document.getElementById("carrot");
var message = document.getElementById("message");
var messages = {
morning: "早上好！新的一天开始了！",
noon: "中午好！愿你有个愉快的午后！",
afternoon: "下午好！愿你过一个充实的下午！",
evening: "晚上好！忙碌一天了休息一下吧！",
night: "晚安！愿你有个好梦！",
default: "你好！欢迎来到"
};
var time = new Date().getHours();
if (time >= 6 && time < 9) {
message.innerHTML = messages.morning;
} else if (time >= 9 && time < 12) {
message.innerHTML = messages.noon;
} else if (time >= 13 && time < 18) {
message.innerHTML = messages.afternoon;
} else if (time >= 18 && time < 22) {
message.innerHTML = messages.evening;
} else if (time >= 22 || time < 6){
message.innerHTML = messages.night;
} else {
message.innerHTML = messages.default;
}
if (time >= 6 && time < 9) {
carrot.style.backgroundImage = "url('img/0 (7).gif')";
} else if (time >= 9 && time < 12) {
carrot.style.backgroundImage = "url('img/0 (4).gif')";
} else if (time >= 13 && time < 18) {
carrot.style.backgroundImage = "url('img/0 (14).gif')";
} else if (time >= 18 && time < 22) {
carrot.style.backgroundImage = "url('img/0 (2).gif')";
} else if (time >= 22 || time < 6){
carrot.style.backgroundImage = "url('img/0 (10).gif')";
} else {
carrot.style.backgroundImage = "url('img/0 (1).gif')";
}
carrot.addEventListener("click", function() {
message.style.display = "block";
setTimeout(function() {
message.style.display = "none";
}, 3000);
});
</script>
显示的猫咪图片可以自己随意更改
转载声明：本文为 之前的给网站添加一个动态小人物，有点问题，不能在不同时间显示不同的人物
发表评论：