JavaScript实现秒级动态时钟的两种代码示例
作者:拾光时间:2026-10-22 09:28:49浏览:334
本文介绍了两种使用JavaScript实现秒级动态时钟的方法。第一种通过setInterval定时器每秒调用函数更新显示;第二种在页面加载时获取年月日时分秒并格式化输出。两种方案均展示了前端时间处理的基本逻辑,适合初学者参考。
第一种实现方式:定时器动态更新
第一种实现方式利用定时器机制。代码中定义了一个showtime函数,该函数内部实例化Date对象获取当前时间,并提取时、分、秒拼接成字符串。通过setInterval函数设置每1000毫秒(即1秒)执行一次showtime,将结果写入id为timeBox的输入框中。
<html>
<head>
<title>时间</title>
<script type="text/javascript">
setInterval("showtime()", 1000);
function showtime() {
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() + ":"
+ date.getSeconds();
document.getElementById("timeBox").value = time;
}
</script>
</head>
<body>
<div style="text-align:center;">
当前时间:<input type="text" name="timeBox" id="time" />
</div>
</body>
</html>
第二种实现方式:页面加载时格式化显示
第二种方式侧重于页面加载时的时间格式化展示。showLeftTime函数在页面onload事件中触发,获取当前Date对象的年、月、日、时、分、秒。其中月份需加1以符合常规显示。函数将获取的时间数据拼接为包含年月日及换行符的字符串,并赋值给id为show的元素innerHTML。注意此示例中未使用定时器循环,仅展示初始状态或需手动刷新。
<html>
<head>
<title>时间</title>
<script type="text/javascript">
//获得当前时间,刻度为一千分一秒
function showLeftTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
document.all.show.innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + "";
//document.getElementById("show").innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + "";
//一秒刷新一次显示时间
setTimeout(showLeftTime, 1000);
}
</script>
</head>
<body onload="showLeftTime()">
<label id="show"></label><br/>
<!-- <script type="text/javaScript">
showLeftTime();
</script> -->
</body>
</html>
以上分享了两种基于JavaScript控制时间显示的实例,分别对应定时更新与单次格式化输出。希望这些代码示例能为您提供参考,助您更好地掌握前端时间处理技巧。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
