标题栏显示分时问候语js
效果图如下:
代码如下:
<script> var now = new Date(); var hour = now.getHours(); if(hour < 6) { document.title="早上好!"; }else if(hour < 9) { document.title="早上好!"; }else if(hour < 12) { document.title="上午好!"; }else if(hour < 14) { document.title="中午好!"; }else if(hour < 17) { document.title="下午好!"; }else if(hour < 19) { document.title="傍晚好!"; }else if (hour < 22) { document.title="晚上好!"; }else{ document.title="夜里好!"; } </script>
原理:
先定义个时间变量,然后通过判断时间去显示标题的内容。
如果想让标题走马灯效果,使用.substring()函数就行
代码如下:
<script> var position = 0; var now = new Date(); var hour = now.getHours(); if(hour < 6) { msg="早上好!"; }else if(hour < 9) { msg="早上好!"; }else if(hour < 12) { msg="上午好!"; }else if(hour < 14) { msg="中午好!"; }else if(hour < 17) { msg="下午好!"; }else if(hour < 19) { msg="傍晚好!"; }else if (hour < 22) { msg="晚上好!"; }else{ msg="夜里好!"; } var position = 0; function shijian(){ // document.querySelector('p').innerHTML=msg.substring(position,position+100); document.title = msg.substring(position,position+100); if (position--==0) { position = msg.length; } setTimeout("shijian()",200); } shijian();
原理:把判断的结果赋予个变量,然后通过.substring()函数进行截取,再然后进行判断即可。
添加部分:
var position = 0; function shijian(){ // document.querySelector('p').innerHTML=msg.substring(position,position+100); document.title = msg.substring(position,position+100); if (position--==0) { position = msg.length; } setTimeout("shijian()",200); } shijian();
如果将
if (position--==0) { position = msg.length; }
换成
if (position++==msg.length) { position = 0; }
就是整体往左移动。
显示打字效果就添加如下代码:
var pos = 0; var l = msg.length; function textticker(){ document.title = msg.substring(0,pos)+"_"; if (pos++==l) { pos=0; setTimeout("textticker()",400); }else{ setTimeout("textticker()",200); } } textticker();
原理一样,都是通过一个字符一个字符的蹦……