文档的标题,也就是打开浏览器后,浏览器上面的标签内容,内容写在页面的<title></title>;
该标签只支持文本内容,假如写了<title><a href="#">这是一个标题</a></title>,输出的内容会是:<a href="#">这是一个标题</a>,a标签并不会被识别为代码;
title的值是可以设置的,JS对应的设置是document.title,输出标题为alert(document.title);
视频示例:
定时器实现了,每隔500毫秒,更新一次标题,当percent的值大于等于20时,替换指定问题并清除定时器
注:setInterval(),定时器,会循环执行内容直到定时器被清除或者窗口被关闭
var percent=0;
var title="这是我的第一个网页";
var textOne='【您有',textTwo='条新消息】';
var timer=setInterval(function () {
if (percent>=20){
document.title=title;
clearInterval(timer);
}
else {
percent=percent+1;
document.title=textOne+percent+textTwo+title;
}
},500);
课后作业:
个人理解:标题滚动特效,当标题内容过长时,字符的不断替换达成滚动xiaogu。
<script>
var percent=0;
var title="【您有6条新消息】这是我的第一个网页";
var timer=setInterval(function () {
if (percent>=20){
document.title="【您有6条新消息】这是我的第一个网页";
clearInterval(timer);
}
else {
percent=percent+1;
roll(title);
}
},500);
function roll(titleText) {
titleText=titleText.substring(1,titleText.length)+titleText.substring(0,1);
document.title=titleText;
title=titleText;
}
</script>
解释:
合并了视频中的示例:通过setInterval()循环了指定次数,次数满足后清除定时器,并赋值指定的标题替换,而不满足if条件时,触发roll函数,将参数title的值传入;
每一次触发roll函数,将通过subtring()方法,两次提取当前参数的值,组成新的字符串,如第一次传入的值为:【您有6条新消息】这是我的第一个网页,那么subtring(1,titleText.length),获取到的值为:您有6条新消息】这是我的第一个网页,而substring(0,1)获取到的值为:【,那么新组成的字符串为:您有6条新消息】这是我的第一个网页【,同时,该新组成的字符串赋值替换了原值,所以,第二次执行循环的时候,参数的值已经变成新替换的值了,并依次循环执行新参数且替换标题,最终达成循环滚动的效果。
作业提升:
能不能达成新消息的数字提升变动的同时标题在滚动?
<script>
var percent=0;
var title="【您有6条新消息】这是我的第一个网页";
var textOne='【您有',textTwo='条新消息】',textMain="这是我的第一个网页";
var titleNew,titleNext;
var timer=setInterval(function () {
if (percent>=20){
document.title="【您有"+percent+"条新消息】这是我的第一个网页";
clearInterval(timer);
}
else {
percent=percent+1;
titleNew=textOne+percent+textTwo+textMain;
if(percent>1){
roll(titleNext,percent);
}
else {
roll(titleNew,percent);
}
}
},500);
function roll(titleText,percent) {
titleText=titleText.substring(1,titleText.length)+titleText.substring(0,1);
var num = titleText.replace(/[^0-9]/ig,"");
//console.log(parseInt(num));
//alert(titleText)
document.title=titleText;
var a=titleText.split(num);
//console.log(a[0]);
//console.log(a[1]);
titleText=a[0]+percent+a[1];
titleNext=titleText;
}
</script>
解释:
思路是在课后作业的基础上,将每次循环的percent插入字符串中,我的想法是初始化一个字符串也就是起始的显示,然后传入roll函数后,按上面一段的方式组成新的字符串,组成新的之后,使用正则匹配提取出新字符串中的数字,通过split()方法,以提取到的数字为界限,将新字符串分割成2个数组,然后将新的数字pencent插入,组成叠加数字后的新字符串,依次循环达到数字变动,且标题滚动的特效。
split(),以括号中的内容为界限,分割成多个数组。