标题栏显示分时问候语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();

原理一样，都是通过一个字符一个字符的蹦……