javascript - 如何每隔一定时间间隔显示一次div

Question

我正在创建一个用户问候消息，它根据时间用早安、下午好和晚上好等消息问候用户。一切正常，但我想知道如何在显示一次后隐藏消息直到日期时间改变，随着消息改变的日期时间再次显示消息。

例如，当您在早上第一次打开网站时，它只会向您打招呼一次早上好消息，然后每次刷新页面时都不会显示此问候消息，直到一天的下一部分开始，例如下午或晚上，反之亦然。

这可能吗？

Answer 1

是的，您可以在 Javascript

中使用简单的 LocalStorage(用于维护最后一条消息显示的历史记录)和日期时间比较来做到这一点

<script>
    setInterval(greet , 1000*60);
    function greet(){

        var date = new Date();
        try{
            if(!localStorage.lastGreeted || !localStorage.lastGreetedPeriod)
                greetWithMessage(date);
            else if(getDate(localStorage.lastGreeted)!=getDate(date))
                greetWithMessage(date);
            else if(divideDayTime(date.getHours())!=localStorage.lastGreetedPeriod)
                greetWithMessage(date);
        }
        catch(err){

             greetWithMessage(date);
        }

    }



    function getDate(obj){
        if(!(obj instanceof Date) )
            obj = new Date(obj);
        return obj.getDate()+'-'+(1+obj.getMonth())+'-'+obj.getFullYear();
    }

    function divideDayTime(hours){
     //Update Message and It's Period Here 
        if(hours<12)
            return 'MORNING';
        else if(hours>=12 && hours <=16)
            return 'AFTERNOON';
        else if(hours>16 && hours<=20)
            return "EVENING";
        else 
            return "NIGHT";

    }
    function greetWithMessage(d){
        localStorage.lastGreeted=d;
        var message = localStorage.lastGreetedPeriod=divideDayTime(d.getHours());

        alert("Good "+ message);
    }


    </script>