前端学习(四) 文档标题(html)

文档的标题,也就是打开浏览器后,浏览器上面的标签内容,内容写在页面的<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(),以括号中的内容为界限,分割成多个数组。

猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80615190