HTML当前日期和倒计时展示

最新推荐文章于 2024-06-12 11:55:25 发布

神探小五

最新推荐文章于 2024-06-12 11:55:25 发布

阅读量1.1w

点赞数 9

分类专栏： HTML倒计时和当前日期文章标签： html 当前日期倒计时

HTML倒计时和当前日期专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、展示当前日期：

代码如下：转载自：http://blog.csdn.net/a13432421434/article/details/70173250

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>show_time</title>
</head>

<body>
<div id="main">
    <div id="show_time">
        <script>
            setInterval("show_time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
        </script>
    </div>
</div>
</body>

</html>

或者：转载自： http://blog.csdn.net/mr_gly_di/article/details/53668592

<html>
<head>
    <SCRIPT language=JavaScript>
        function tick() {
            var years,months,days,hours, minutes, seconds;
            var intYears,intMonths,intDays,intHours, intMinutes, intSeconds;
            var today;
            today = new Date(); //系统当前时间
            intYears = today.getFullYear(); //得到年份,getFullYear()比getYear()更普适
            intMonths = today.getMonth() + 1; //得到月份，要加1
            intDays = today.getDate(); //得到日期
            intHours = today.getHours(); //得到小时
            intMinutes = today.getMinutes(); //得到分钟
            intSeconds = today.getSeconds(); //得到秒钟
            years = intYears + "-";

            if(intMonths < 10 ){
                months = "0" + intMonths +"-";
            } else {
                months = intMonths +"-";
            }
            if(intDays < 10 ){
                days = "0" + intDays +" ";
            } else {
                days = intDays + " ";
            }
            if (intHours == 0) {
                hours = "00:";
            } else if (intHours < 10) {
                hours = "0" + intHours+":";
            } else {
                hours = intHours + ":";
            }
            if (intMinutes < 10) {
                minutes = "0"+intMinutes+":";
            } else {
                minutes = intMinutes+":";
            }
            if (intSeconds < 10) {
                seconds = "0"+intSeconds+" ";
            } else {
                seconds = intSeconds+" ";
            }
            timeString = years+months+days+hours+minutes+seconds;
            Clock.innerHTML = timeString;
            window.setTimeout("tick();", 1000);
        }
        window.onload = tick;
    </SCRIPT>
</head>
<BODY>
        <SPAN id="Clock"></SPAN>
</BODY>
</HTML>

2、倒计时时间展示,以双十一倒计时为例：

代码如下：转载自：http://blog.csdn.net/u011415782/article/details/53814517

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <style type="text/css">
        div{
            font-size:58px;
        }
    </style>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS时间倒计时</title>
    <script type="text/javascript">
        var time_now_server,time_now_client,time_end,time_server_client;

        time_end=new Date("2017/11/11 00:00:0");//结束的时间
        time_end=time_end.getTime();//获取的是毫秒

        time_now_server=new Date();//开始的时间
        time_now_server=time_now_server.getTime();
        setTimeout("show_time()",1000);

        function show_time()
        {
            var timer = document.getElementById("timer");
            var hourid = document.getElementById("hour");
            if(!timer){
                return ;
            }
            timer.innerHTML =time_now_server;

            var time_now,time_distance,str_time;
            var int_day,int_hour,int_minute,int_second;
            var time_now=new Date();
            time_now=time_now.getTime();
            time_distance=time_end-time_now;
            if(time_distance>0)
            {
                int_day=Math.floor(time_distance/86400000)
                time_distance-=int_day*86400000;
                int_hour=Math.floor(time_distance/3600000)
                time_distance-=int_hour*3600000;
                int_minute=Math.floor(time_distance/60000)
                time_distance-=int_minute*60000;
                int_second=Math.floor(time_distance/1000)

                if(int_hour < 10)
                    int_hour="0"+int_hour;
                if(int_minute<10)
                    int_minute="0"+int_minute;
                if(int_second<10)
                    int_second="0"+int_second;
                str_time=int_day+"天"+int_hour+"小时"+int_minute+"分钟"+int_second+"秒";
                timer.innerHTML=str_time;
                setTimeout("show_time()",1000);
            }
            else
            {
                timer.innerHTML =0;
            }
        }
    </script>
</head>

<body>
<div id="timer"></div>
</body>
</html>

神探小五

关注

9
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
HTML当前日期和倒计时展示

1、展示当前日期：代码如下：转载自：http://blog.csdn.net/a13432421434/article/details/70173250 show_time setInterval("show_time.innerHTML=new Date().toLocaleString()+' 星期'+'
复制链接

扫一扫