文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript 显示一个倒计时广告牌的实现示例

2024-04-02 19:55

关注

本文主要介绍了JavaScript 显示一个倒计时广告牌的实现示例,分享给大家,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var date_in=prompt("请输入未来的年月日:");
        var date_out=new Date(date_in);
        var future_year=date_out.getFullYear();
        var future_month=date_out.getMonth()+1;
        var future_date=date_out.getDate();
        
        var TimerID,TimerRunning;
        function array_ping(){ //定义平年的月份天数数组
            this.length=12;
            this[0]=31;this[1]=28;this[2]=31;this[3]=30;this[4]=31;this[5]=30;
            this[6]=31;this[7]=31;this[8]=30;this[9]=31;this[10]=30;this[11]=31;
        }
        function array_run(){  //定义闰年的月份天数数组
            this.length=12;
            this[0]=31;this[1]=29;this[2]=31;this[3]=30;this[4]=31;this[5]=30;
            this[6]=31;this[7]=31;this[8]=30;this[9]=31;this[10]=30;this[11]=31;
        }

        var Clock_ping=new array_ping();  //实例化自定义方法
        var Clock_run=new array_run();

        function SHTime(){
            var today=new Date();  //实例化类
            var current_month=today.getMonth()+1;     //获取本地月份1~12
            var current_date=today.getDate();         //获取本地一个月中的日期值
            var current_year=today.getFullYear();     //获取本地年份
            var Dateleft,Monthleft,Yearleft;
             if(future_year%4==0&&future_year%100!=0||future_year%400==0){
                if(future_date-current_date<0){  //如果天数为负时,则加上月份对应的天数            
                    Dateleft=Clock_run[current_month-1]-current_date+future_date;
                    //用当前这个月的总天数减去当前天数,再加上多余的下个月的天数
                    Monthleft=future_month-current_month-1;//减一是因为天数间隔不够,月份来凑
                    if(Monthleft<0){
                        Monthleft=future_month-current_month-1+12;
                        Yearleft=future_year-current_year-1;
                    }
                    else{
                        Yearleft=future_year-current_year;
                    }
                }
                else{
                    Dateleft=future_date-current_date;
                    Monthleft=future_month-current_month;
                    Yearleft=future_year-current_year;
                }
             }
            else{
                if(future_date-current_date<0){            
                    Dateleft=Clock_run[current_month-1]-current_date+future_date;
                    Monthleft=future_month-current_month-1;
                    if(Monthleft<0){
                        Monthleft=future_month-current_month-1+12;
                        Yearleft=future_year-current_year-1;
                    }
                    else{
                        Yearleft=future_year-current_year;
                    }
                }
                else{
                    Dateleft=future_date-current_date;
                    Monthleft=future_month-current_month;
                    Yearleft=future_year-current_year;
                }
            }
            document.YMD.a.value=Yearleft;
            document.YMD.b.value=Monthleft;
            document.YMD.c.value=Dateleft;
            TimerID=setTimeout('SHTime()',1000);
            TimerRunning=true;
        }
        function STTime(){
            if(TimerRunning)
                clearTimeout(TimerID);  //取消定时操作
                var TimerRunning=false;
        }
        function DownTime(){
            STTime();SHTime();
        }
    </script>
</head>
<body bgcolor="#FFA9FF" onload="DownTime()">
    <br><br>
    <center>
        <font color="#551CBA"><h2>倒计时</h2></font>
    </center>
    <hr width=300>
    <br><br>
    <center>
        <form action="" name="YMD" method="get"> <!--get发送只有少数简短字段的小表单-->
            <label for="txt" id="txt"></label> 
            <script>
            var txt=document.getElementById("txt");
            txt.innerHTML="距离"+future_year+"年"+future_month+"月"+future_date+"日只剩下";
            </script>
            <input type="text" name="a" size=3 value="">年
            <input type="text" name="b" size=3 value="">月
            <input type="text" name="c" size=3 value="">日
        </form>
    </center>
</body>
</html>

个人觉得,难就难在这个条件判断语句,怎么构思是个问题。
首先,我先判断是否闰年,然后判断天数间隔是否大于0,大于0的情况下,月份就不用减1,天数直接等于未来天数减去当前天数;小于0的情况下,天数等于当前月份的总天数减去当前天数再加上未来月份的天数,再判断月份间隔是否小于0,月份间隔小于0时:月份就要减1并加12,因为一个月份轮回是12,并将年份减1;月份间隔大于0时:月份间隔直接等于未来月份减当前月份。(天数指的是,一个月中过了几天)

输入的是2027/4/3,我的当前年月日为2022/4/16

在这里插入图片描述

第二种,计算总天数倒计时,相对来说比较简单。我想过用总天数换算成相应的年月日,但思想懒惰爱摸鱼,做出来了一半,就没进行下去。我的思路大致是,循环用总天数减去年份对应的天数,剩下天数要大于等于365或366,间隔年份++,否则循环结束。月份同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var adiv=document.getElementById("a");
            var bdiv=document.getElementById("b");
            var cdiv=document.getElementById("c");
            var date_in=prompt("请输入未来的年月日:");

            function get_time(){
                
                var date_out=new Date(date_in);//未来日期的实例化
                var date_now=new Date();       //当前日期的实例化
                var interval=date_out.getTime()-date_now.getTime();//毫秒间隔
                var Secondleft=interval/1000;//毫秒除以1000等于总秒数
                var day=Secondleft/60/60/24;//总秒除以60等于分钟,总分钟除以60等于小时,总小时除以24等于天数
                var hour=Secondleft%86400/60/60;//总天数多出来未过完天数的秒数,即取余;
                //多出来那一天的秒数除以60等于分钟,分钟数再除以60即等于小时
                var min=Secondleft%86400%3600/60;//除完3600是多余小时的秒数,再除以60等于分钟
                var sec=Secondleft%60;
                
                adiv.innerHTML=date_now+"&nbsp;与";
                bdiv.innerHTML=date_out+"&nbsp;相隔";
                cdiv.innerHTML=todo(day)+"天"+todo(hour)+"时"+todo(min)+"分"+todo(sec)+"秒";
            }
            get_time();//调用函数
            setInterval(get_time,1000);
            function todo(num){
                if(num<10){
                    return '0'+Math.floor(num);
                }
                else{
                    return Math.floor(num);
                }
            }
        }
    </script>
</head>
<body style="background-color:lightblue;">
    <div id="a"></div><div id="b"></div><div id="c"></div>
</body>
</html>

输入的是2025/4/18,我的当前日期为2022/4/18

在这里插入图片描述

到此这篇关于JavaScript 显示一个倒计时广告牌的实现示例的文章就介绍到这了,更多相关JavaScript 倒计时广告牌内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯