用jsp怎么写秒表

2023-04-09 09:02:01html-css028

用jsp怎么写秒表,第1张

这样写就可以了不过是用JavaScript的：

<html>

<head>

<!-- Hide

var timerID = null

var timerRunning = false

function MakeArray(size)

{

this.length = size

for(var i = 1i <= sizei++)

{

this[i] = ""

}

return this

}

function stopclock (){

if(timerRunning)

clearTimeout(timerID)

timerRunning = false

}

function showtime () {

var now = new Date()

var year = now.getYear()

var month = now.getMonth() + 1

var date = now.getDate()

var hours = now.getHours()

var minutes = now.getMinutes()

var seconds = now.getSeconds()

var day = now.getDay()

Day = new MakeArray(7)

Day[0]="SUN"

Day[1]="MON"

Day[2]="TUE"

Day[3]="WED"

Day[4]="THU"

Day[5]="FRI"

Day[6]="SAT"

var timeValue = ""

timeValue += (Day[day]) + " "

timeValue += ((month <10) ? " 0" : " ") + month + "-"

timeValue += date + "-" + year + " "

timeValue += ((hours <= 12) ? hours : hours - 12)

timeValue += ((minutes <10) ? ":0" : ":") + minutes

timeValue += ((seconds <10) ? ":0" : ":") + seconds

timeValue += (hours <12) ? " AM" : " PM"

document.jsfrm.face.value = timeValue

timerID = setTimeout("showtime()",1000)

timerRunning = true

}

function startclock () {

stopclock()

showtime()

}

//-->

</script>

</head>

</form>

</body>

</html>

首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：

getTime() // 返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似

setTimeout(code,millisec) // 在指定的毫秒数后调用函数

实例演示如下

创建Html元素

<span>距离2015年国庆节还剩：</span><br>

<input type="text" id="time_d">天<input type="text" id="time_h">时<input type="text" id="time_m">分<input type="text" id="time_s">秒

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box>span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

input[type='text']{width:45pxheight:35pxpadding:5px 10pxmargin:5px 0border:1px solid #ff9966}

编写jquery代码

$(function(){

show_time()

})

function show_time(){

var time_start = new Date().getTime() //设定当前时间

var time_end = new Date("2015/10/01 00:00:00").getTime() //设定目标时间

// 计算时间差

var time_distance = time_end - time_start

// 天

var int_day = Math.floor(time_distance/86400000)

time_distance -= int_day * 86400000

// 时

var int_hour = Math.floor(time_distance/3600000)

time_distance -= int_hour * 3600000

// 分

var int_minute = Math.floor(time_distance/60000)

time_distance -= int_minute * 60000

// 秒

var int_second = Math.floor(time_distance/1000)

// 时分秒为单数时、前面加零

if(int_day < 10){

int_day = "0" + int_day

}

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

}

// 显示时间

$("#time_d").val(int_day)

$("#time_h").val(int_hour)

$("#time_m").val(int_minute)

$("#time_s").val(int_second)

// 设置定时器

setTimeout("show_time()",1000)

}

观察效果

某个时刻的截图

几秒后的截图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

BODY { FONT-SIZE:12pxMARGIN:autoFONT-FAMILY:tahoma, Verdana, Arial, Helvetica, sans-serif, "宋体"}

A { COLOR:#666FONT-SIZE:12pxTEXT-DECORATION:None }

A:link { COLOR:#666FONT-SIZE:12pxTEXT-DECORATION:None }

A:visited { COLOR:#666FONT-SIZE:12pxTEXT-DECORATION:None }

A:hover { COLOR:#a92400FONT-SIZE:12pxTEXT-DECORATION:underline }

A:active { TEXT-DECORATION:none }

#Error1 { width:488pxmargin:86px auto 0 autopadding:2pxbackground:#FAFAFAborder:1px solid #F1F1F1overflow:hiddenheight:1% }

#Error1 .kuan { padding:1pxbackground:#EFFFD0border:1px solid #E0E9F1 }

#Error1 .kuan span { font:normal 12px Arialcolor:#666padding:14px 0 10px 50pxmargin:5px 20px 0 40px}

#Error1 .kuan h3 { font:bold 14px Arialcolor:#666border-bottom:1px dashed #CCCCCCheight:36pxpadding:5px 0 0 50pxmargin:5px 20px 0 40pxbackground:url(icon_info.gif) no-repeat top left }

.btn { background:#d9d9d9border-width:1pxvertical-align:middleheight:21pxpadding-left:0.15empadding-right:0.15emborder:1px solidborder-color:#c0c0c0 #555 #555 #c0c0c0margin-bottom:3px }

</style>

</head>

<tr>

<td><h3>系统提示您：</h3></td>

</tr>

<tr>

</tr>

<tr>

<td><span><a href="cssTest.html">如果没有跳转，请点这里...</a></span></td>

</tr>

</table>

</div>