用JavaScript实现页面上有一个按钮，点击后能在文本框内显示出当前系统时间

南归.

于 2019-01-24 20:17:07 发布

阅读量9.7k

点赞数 5

本文链接：https://blog.youkuaiyun.com/weixin_44439442/article/details/86632629

版权

本文介绍了一个简单的HTML页面，该页面使用JavaScript定时更新显示在输入框中的当前时间，包括小时、分钟和秒，并在时间的小时、分钟和秒小于10时自动补零。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">点击</button>
	<input type="text" name="" id="ipt">

	<script type="text/javascript">
		//查找页面的元素
		var o=document.getElementById('btn');
		var oc=document.getElementById('ipt');
		//添加点击事件
		o.onclick=function(){
			function showTime(){
             var date=new Date;
			 var hour=date.getHours();
			 var minute=date.getMinutes();
			 var second=date.getSeconds();
             //为小于10的数字补零
			 if(hour<10){
			 	hour='0'+hour;
			 }
			 if(minute<10){
			 	minute='0'+minute;
			 }
			 if(second<10){
			 	second='0'+second;
			 }
			 var time=hour+':'+minute+':'+second;
             oc.value=time;
		 }
            showTime();
		    setInterval(showTime,1000);
		}
		
		
		
	</script>
</body>
</html>