简单js+css实现滚动彩色不同时段问候语

2018年5月18日 0条评论

给网站侧边栏添加一个滚动颜色问候文字。

方法：

直接把下面代码复制到侧边栏添加一个组件即可。。

代码如下：

<style type="text/css">
.menu-list{list-style:none;  margin:auto 80px 10px 0px;}
.menu-list li{display:block;}
.list{list-style: none;   height:30px; overflow:hidden; }
.list li{height: 30px; position: relative; animation: myfirst 18s infinite ;line-height: 30px;text-align: center; font-size: 20px;color:#fff;}
@keyframes myfirst
{
	0%    {background-color:rgba(78, 199, 243, 0.76);  top:30px;}
	20%   {background-color:rgba(78, 199, 243, 0.76);  top:0px;}
	40%  {background:rgba(156, 39, 176, 0.06); top:-30px;}
	60%  {background:#f90; top:-60px;}
	80%  {background:#2196f36e; top:-90px;}
	100%  {background:rgba(66, 197, 138, 0.75); top:-120px;}
}           
</style>
<div style="background:url(http://img382.ph.126.net/8He8SZph91ZZwMQ7juu1yg==/2446017547616643388.jpg);background-size:100% 100%;text-align: center;">
<div style="background:url(https://www.cnblogs.com/skins/CodingLife/images/body_bg.png)repeat-x scroll 0 0 ;">
<span style="font-size:18px; font-weight:bold;color:#ffffff9e;">《小洋fy导航设置中心》</span><?php if(isset($_GET['setting'])){echo "<span class='actived'>设置保存成功!</span>";}?>
<ul class="menu-list" style="background:url(https://www.cnblogs.com/skins/CodingLife/images/title-yellow.png)no-repeat center 21px;background-size:100% 100%;height: 260px;
    clear: both;
    position: relative;">
	<li>
		<ul class="list">
		<li class="one"><script type="text/javascript">
<!--//你可以将下面的代码单独存为JS文件来引用。
document.write('<span id="show_time"></span>');
setInterval("document.all.show_time.innerHTML=new Date().toLocaleString()+' 周'+'日一二三四五六'.charAt(new Date().getDay());",1000);
//-->
</script></li>
		<li class="two"><script type="text/javascript">
		document.write('<span id="show_msg"></span>');
		//如果你不需要显示当前日期，请删除上面的那行代码。
function msg(obj){
var text="";
var time=parseInt(obj);
if((time>=0)&&(time<1))
text="全新的一天开始了哟!";
if((time>=1)&&(time<2))
text="一点过了,该休息了哦！！！";
if((time>=2)&&(time<3))
text="还在坚持吗，两点多了哦！";
if((time>=3)&&(time<4))
text="饿吗，吃点夜宵吧！";
if((time>=4)&&(time<5))
text="还不休息?明天不上班吗？";
if((time>=5)&&(time<6))
text="唉,困了,眼睛直“打架”。";
if((time>=6)&&(time<7))
text="看一下天亮了吗?";
if((time>=7)&&(time<8))
text="吃过早餐了吗?";
if((time>=8)&&(time<9))
text="准备上班了哟！";
if((time>=9)&&(time<10))
text="开始上班了,今天工作多吗?";
if((time>=10)&&(time<11))
text="有一个好心情是最好的事情了!";
if((time>=11)&&(time<12))
text="时间走快点呀,我要去吃饭了。";
if((time>=12)&&(time<13))
text="吃过午饭了吗？";
if((time>=13)&&(time<14))
text="中午休息吗?可别睡过头了哟。";
if((time>=14)&&(time<15))
text="网是要上的,工作也是要做的。";
if((time>=15)&&(time<16))
text="望望窗外,别累坏眼睛哦。";
if((time>=16)&&(time<17))
text="嗯，现在感觉有点困了哈！";
if((time>=17)&&(time<18))
text="累了一天，终于快下班了。";
if((time>=18)&&(time<19))
text="快做饭,先解决“肚皮”问题。";
if((time>=19)&&(time<20))
text="怎么样，吃过晚饭了吗？";
if((time>=20)&&(time<21))
text="OK,现在该坐下来在网上散散心了。";
if((time>=21)&&(time<22))
text="网上东西真多啊!找到想要的了吗?";
if((time>=22)&&(time<23))
text="有点晚了,准备休息了哦！";
if((time>=23)&&(time<24))
text="这么晚了，你还在啊！";
document.all.show_msg.innerHTML=text;
}
msg(new Date().getHours());
function ref(){
var day=new Date();
var h=day.getHours();
var m=day.getMinutes();
var s=day.getSeconds();
if(m==0&&s==0){msg(h);}
setTimeout("ref()",1000);
}
ref();</script></li>
		<li class="three"><script type="text/javascript">
var now=(new Date()).getHours();
if(now>0&&now<=6){
document.write("午夜好骚年，快睡觉去，妹纸等你久了会不耐烦的哦...");
}else if(now>6&&now<=11){
document.write("早上好骚年，昨夜运动那么长时间还这么早起床，真爷们...");
}else if(now>11&&now<=14){
document.write("中午好骚年，停下手中的工作，快去吃饭晚了就没的吃了...");
}else if(now>14&&now<=18){
document.write("下午好骚年，累了一上午了，快去休息会扒根烟喝杯茶...");
}else{
document.write("晚上好骚年，快睡觉吧别忙了，明天的日头照样红...");
}
</script></li>
		<li class="four">欢迎您的光临</li><li class="five">小洋QQ：1162771270</li>
		<li class="six">吾爱搜=资源网</li>
	</ul>