网页标题(title)动态改变

这是一只小白的突发奇想,实验多次终于有所效果。想要实现什么效果呢,

如图所示 :    网页标题(title)动态改变

要实现这个效果,大体需要两步。

第一,如何像打印似的一个一个字显示文字。要实现这个效果有多种方法。在这里我所运用的是javaScript中的substring()方法

substring()方法是干嘛的简单说一下,它用于提取字符串中介于两个指定下标之间的字符。返回的子串包括开始处的字符,但不包括结束处的字符。

首先,做几个div,放你要打印的文字(不一定是div,能取到就行,这个随意),然后通过节点取到里面的内容

<div style="display:none" id="w">你好呀,欢迎欢迎,点个赞吧!   </div>
<div style="display:none" id="m">嘿嘿,有错误请多指教! </div>
var word=document.getElementById("w").innerHTML;
var ha=document.getElementById("m").innerHTML;

当然,动态修改title内容也有不同的方法,这里用的是 document.title="" 直接修改的,从下边的代码可以看到,substring()方法从0个字符开始,截取的长度每隔300毫秒加一,就实现了类似打印的效果

var type=setInterval(function(){
document.title=word.substring(0,index++);
},300);

其实到这里,大致的效果已经做完了,剩下的只是需要 setInterval()方法与回调函数的配合,来实现循环显示

综合JS代码如下

<script language="javascript">

var index=0;
var inde=0;
var word=document.getElementById("w").innerHTML;
var ha=document.getElementById("m").innerHTML; function hh(){
var type=setInterval(function(){
document.title=word.substring(0,index++);
if(index==word.length+1){
clearInterval(type);
index=0;
var ty=setInterval(function(){
document.title=ha.substring(0,inde++);
if(inde==ha.length+1){
clearInterval(ty);
inde=0;
hh();
}
},300); }
},300); }
setTimeout(hh,2500);
</script>

因为是临时想的,最后还是存在一些小bug.在每次title重新输入时,会卡顿一下,闪烁一下默认的地址,在这虚心求大神指点。

炎炎夏日,敲代码之余还要遭受秀恩爱的成吨伤害,在这诚心求职一份=。=看不见恩爱就没有伤害

上一篇:MySql5.6性能优化


下一篇:数据以Excel形式导出导服务器,再将文件读取到客户端另存 以HSSFWorkbook方式实现