1. 程式人生 > >HTML當前日期和倒計時展示

HTML當前日期和倒計時展示

1、展示當前日期:

<!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、倒計時時間展示,以雙十一倒計時為例:

<!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>