当前位置：首页 > article >正文

网页制作13-Javascipt时间特效の显示动态时间

article 2025/3/17 11:04:49

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示当前时间</title>
</head>
<body onload="startTime()">
<form name="formclock" onSubmit="0">
	<input type="text" name="show" size="10" style="background-color:pink;border-width:3;"></form>
<div id="txt"></div>

<script>
function startTime() {
    var today = new Date();//获得现在时间
    var h = today.getHours();//抽取小时
    var m = today.getMinutes();//抽取分钟
    var s = today.getSeconds();//抽取秒数
	
	var amatime=""+((h>12)?h-12:h);//小时赋值；
	amatime+=((m<10)?":0":":")+m;//分钟赋值；
	amatime+=((s<10)?":0":":")+s;//秒钟赋值；
	
	amatime+=((h<12)?"am":"pm");//判断上午下午
	
    // 在 numbers<10 的数字前加上 0
    m = checkTime(m);
    s = checkTime(s);
	
    document.getElementById("txt").innerHTML = h + ":" + m + ":" + s;
	
    var t = setTimeout(function(){ startTime() }, 500);//自动调佣函数更新；
	
	document.forms["formclock"]["show"].value=amatime;//把时间放进表单内
}

function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
	
</script>
</body>
</html>

效果显示：