JS如何动态显示时间？

JavaScript011

JS如何动态显示时间？,第1张

JS显示动态的日期时间，参考如下：

<body>  

<span id="localtime">2013-10-30 12:33:02  星期三</span>  

<script type="text/javascript">  

function showLocale(objD)  

{  

    var str,colorhead,colorfoot  

    var yy = objD.getYear()  

    if(yy<1900) yy = yy+1900  

    var MM = objD.getMonth()+1  

    if(MM<10) MM = '0' + MM  

    var dd = objD.getDate()  

    if(dd<10) dd = '0' + dd  

    var hh = objD.getHours()  

    if(hh<10) hh = '0' + hh  

    var mm = objD.getMinutes()  

    if(mm<10) mm = '0' + mm  

    var ss = objD.getSeconds()  

    if(ss<10) ss = '0' + ss  

    var ww = objD.getDay()  

    if  ( ww==0 )  colorhead="<font color=\"red\">"  

    if  ( ww > 0 && ww < 6 )  colorhead="<font color=\"red\">"  

    if  ( ww==6 )  colorhead="<font color=\"red\">"  

    if  (ww==0)  ww="星期日"  

    if  (ww==1)  ww="星期一"  

    if  (ww==2)  ww="星期二"  

    if  (ww==3)  ww="星期三"  

    if  (ww==4)  ww="星期四"  

    if  (ww==5)  ww="星期五"  

    if  (ww==6)  ww="星期六"  

    colorfoot="</font>"  

    str = colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + "  " + ww + colorfoot  

    return(str)  

}  

function tick()  

{  

    var today  

    today = new Date()  

    document.getElementById("localtime").innerHTML = showLocale(today)  

    window.setTimeout("tick()", 1000)  

}  

tick()  

</script>  

  

</body>

<!DOCTYPE HTML>

<html>

<head>

<meta charset=UTF-8>

<title>Nothing</title>

<style type="text/css">

div.outer {

margin: auto

width: 30%

}

input[type=text].txt {

border: 5px solid blue

font-weight: bolder

}

.line {

display: inline

}

.time {

font: 20px Consolas, 微软雅黑

color: red

}

div.x {

font: 20px Consolas, 微软雅黑

}

div.x {

font: 20px Consolas, 微软雅黑

cursor: pointer

}

div.x:hover {

color: cyan

}

div.high {

margin: -34px 0px 0px 275px

}

div.low {

margin: -5px 0px 0px 275px

}

</style>

<script type="text/javascript">

onload = function ()

    {

    var txt = document.querySelector (".txt")

    var high = document.querySelector (".high")

    var low = document.querySelector (".low")

    var funny = function (isHigh)

    {

    if (txt.value === "")

    {

    txt.value = "09:00"

    }

    else

    {

    var hour = parseFloat (txt.value.split (":")[0])

    if (isHigh)

    {

    hour++

    hour = hour > 23 ? 0 : hour

    }

    else

    {

    hour--

    hour = hour < 0 ? 23 : hour

    }

    hour = /^\d$/.test (hour) ? "0" + hour : hour

    txt.value = hour + ":00"

    }

    }

    high.onclick = function ()

    {

    funny (1)

    }

    low.onclick = function ()

    {

    funny ()

    }

    }

    document.onselectstart = function ()

    {

    return false

    }

</script>

</head>

<body>

<div class="outer">

<div class="line time">送货时间：</div>

<div class="line wrap">

<input class="txt" type="text" readonly="readonly" />

<div class="x high">+</div>

<div class="x low">-</div>

</div>

</div>

</body>

</html>

var the_s = 188888//定义剩余时间, 必须用时间戳.单位为秒

setInterval(promote,1000)//每秒执行一次下面的函数

function promote() {

var d = Math.floor((the_s / 3600) / 24)

var g = Math.floor((the_s - d * 24 * 3600) / 3600)

var e = Math.floor((the_s - d * 24 * 3600 - g * 3600) / 60)

var f = (the_s - g * 3600) % 60

var html = "还剩<b>" + d + "</b>天<b>" + g + "</b>时<b>" + e + "</b>分<b>" + f + "</b>秒"

document.getElementById("divdown1").innerHTML = html//这个id是你想要显示的div的id

the_s--

}

我这个定时器比你的好, 用我的.  你只要定义了the_s和要显示在哪的id. 就可以用了.

如你要显示剩余4小时, 那么将4小时转化为秒: 4*60*60=14400, 就这样调用:

var the_s = 14400

setInterval(promote,1000)

就ok了. 记得要引用我的函数哟~