如何用javascript动态显示键盘输入时间和当前时间的时差（小时分钟秒）？

JavaScript06

如何用javascript动态显示键盘输入时间和当前时间的时差（小时分钟秒）？,第1张

<html>

<head><title>test</title></head>

<body>

<input id="hour" style="width:2em" value="5" />:<input id="min" style="width:2em" value="20" />

<button id="do">确定</button>

<div id="info" style="display:none">

当前时间：<span id="cur_time"></span><br>

时 间 差：<span id="time_span"></span>

</div>

<script type="text/javascript">

function $(id){ return document.getElementById(id)}

function time_add_sec(secs){

if(secs != 0){ secs = 1}

window.curtime += secs

var span = Math.abs(curtime - starttime)

var cur_time = []

var time_span = []

cur_time[0] = Math.floor(curtime / 3600)

cur_time[1] = Math.floor((curtime % 3600) / 60)

cur_time[2] = Math.floor(curtime % 60)

time_span[0] = Math.floor(span / 3600)

time_span[1] = Math.floor((span % 3600) / 60)

time_span[2] = Math.floor(span % 60)

$("cur_time").innerHTML = cur_time.join(":")

$("time_span").innerHTML = time_span.join(":")

}

function time_span(){

var now = new Date()

var cur_time = []

cur_time[0] = now.getHours()

cur_time[1] = now.getMinutes()

cur_time[2] = now.getSeconds()

window.curtime = cur_time[0]*3600+cur_time[1]*60+cur_time[2]

window.starttime = $("hour").value*3600+$("min").value*60

time_add_sec(0)

$("info").style.display = "block"

setInterval(time_add_sec,1000)

}

window.onload=function (){ $("do").onclick = time_span}

</script>

</body>

</html>

这个算法占用系统资源相当少了，跳动应该是你电脑卡吧，我的电脑一点问题都没有。

document.getElementById("文本框ID").value=new Date()

如果你没有使用任何前端框架，且需要重手写，那么

1、如果需要设置日期的格式，就需要手动拼装日期了，如document.getElementById("文本框ID").value=(new Date().getFullYear())+"-"+(new Date().getMonth()+1)+"-"+(new Date().getDate())

2、如果要实时显示，就需要setTimeout或者seTinterval不停的赋值。

setTimeout使用请参考：http://www.w3school.com.cn/jsref/met_win_settimeout.asp

seTinterval使用请参考：http://www.w3school.com.cn/jsref/met_win_setinterval.asp