javascript网页特效——日期和时间

最新推荐文章于 2022-08-11 16:25:44 发布

find面码

最新推荐文章于 2022-08-11 16:25:44 发布

阅读量600

点赞数

CC 4.0 BY-SA版权

分类专栏：学习记录文章标签： javascript

本文链接：https://blog.youkuaiyun.com/gemingzhu/article/details/52518155

学习记录专栏收录该内容

37 篇文章

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现四个实用的网页特效：根据时段显示不同标题欢迎词、倒计时功能、判断今天是否为节假日以及计算两个时间点之间的时间差。通过这些实例，读者可以深入理解JavaScript在处理日期和时间方面的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例一：不同时段显示不同的标题欢迎词

<script type="text/javascript">     
            //修改标题的函数
            function start(){   
                var date = new Date();
                var str = '';
                var hour = date.getHours();
                if(hour < 12)
                    str = '早上好';
                if(hour >= 12 && hour < 18)
                    str = '下午好';
                if(hour >= 18)
                    str = '晚上好';
                document.title = str;
            }
</script>

实例二：倒计时效果

<script type="text/javascript">     
    function start(){               
        setInterval(function(){
            var now = new Date();
            var end = new Date(now.getYear() + 1 + 1900,0,1);
            var time = end.getTime() - now.getTime();
            var str = getTimeTxt(time);
            document.getElementById('left').innerHTML = '距离明年年元旦还剩:' + str;
        },1000);                
    }
    function getTimeTxt(time){
        time /= 1000;
        var days = time / (24*60*60);
        var hour = time % (24*60*60) / (60*60);
        var min = time % (24*60*60) % (60*60) / 60;
        var sec = time % (24*60*60) % (60*60) % 60;
        var str = '';
        if(days > 0)
            str += Math.floor(days)+'天';
        if(hour > 0)
            str +=  Math.floor(hour)+'时';
        if(min > 0)
            str +=  Math.floor(min)+'分';
        str +=  Math.floor(sec)+'秒';
        return str;
    }
</script>

实例三：今天是否为节假日

<script type="text/javascript">     
            function start(){               
                setInterval(function(){
                    var now = new Date();
                    var m = now.getMonth() + 1;
                    var d = now.getDate();
                    var str = '';
                    str += now.getYear() + 1900 + '年';
                    str += now.getMonth() + 1 + '月';
                    str += now.getDate() + '日';
                    str += now.getHours() + '时';
                    str += now.getMinutes() + '分';
                    str += now.getSeconds() + '秒';                  
                    if(now.getDay() >= 5){
                        str += ',今天是周末';
                    }else if(m==1 && d==1)
                        str += ',今天是周末';
                    else if(m==5 && d==1)
                        str += ',今天是劳动节';
                    else if(m==10 && d==1)
                        str += ',今天是国庆节';
                    else
                        str += '，今天不是节假日';
                    document.getElementById('left').innerHTML = str;
                },1000);
            }
</script>

实例四：算出两个时间之间的时间差

<script type="text/javascript">     
            //计算时差的函数
            function start(){   
                var time1 = document.getElementById('time1').value;
                var time2 = document.getElementById('time2').value;
                var t1 = parseTime(time1);
                var t2 = parseTime(time2);
                var span = t1.getTime() - t2.getTime();
                span = Math.abs(span / 1000);
                alert('两个时间相差'+span+'秒');
            }
            function parseTime(str){
                var date = str.split(' ')[0];
                var darr = date.split('-');
                var time = str.split(' ')[1];
                var tarr = time.split(':');
                var y = parseInt(darr[0]);
                var m = parseInt(darr[1]);
                var d = parseInt(darr[2]);
                var h = parseInt(tarr[0]);
                var mm = parseInt(tarr[1]);
                var s = parseInt(tarr[2]);
                return new Date(y,m,d,h,mm,s);
            }
</script>