js实现在页面实时显示时间，一个按钮控制时间暂停和开始_js添加一个按钮,当点击按钮后,使网页时钟取消-优快云博客

该博客介绍了使用JS在HTML中实时显示时间，并通过一个按钮控制时间的暂停和开始，还给出了相应代码。

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

js实现在html实时显示时间，一个按钮控制时间暂停和开始.代码如下：

<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<style>
	#main {
		width: 500px;
		height: 250px;
		margin: 20px auto;
		border: 1px solid #000000;
	}
	
	#the_button {
		width: 200px;
		margin: 10px auto;
	}
	
	label {
		display: inline-block;
		float: left;
		margin-right: 10px;
		width: 150px;
		text-align: right;
	}
</style>

<body>
	<div id="main">
		<label>当前的时间是:</label>
		<input type="text" id="text_1" readonly/><br />
		<div id="the_button">
			<input type="button" id="time_button" value="暂停" onclick="controlTime()" />
		</div>
	</div>
</body>
<script>
	/*
	 * 获取时间
	 */
	var myClock = setInterval("nowTime()",1000);
	function nowTime()
	{
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		var hour = date.getHours();
		var min = date.getMinutes();
		var s = date.getSeconds();
		month = check(month);
		day = check(day);
		hour = check(hour);
		min = check(min);
		s = check(s);
		var timeStr = year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + s; 
		document.getElementById("text_1").value = timeStr;
	}
	/*
	*添加0
	*/
	function check(i)
	{
		if( i < 10)
		{
			i = "0" + i;
		}
		return i;
	}
	/*
	*一个按钮实现开始和暂停功能
	*/
	function controlTime()
	{	
		var btnValue = document.getElementById("time_button").value;
		if(btnValue == "暂停")
		{
		 	window.clearInterval(myClock);
		 	document.getElementById("time_button").value = "开始";
		}
		if(btnValue == "开始")
		{
			window.setInterval("nowTime()",1000);
		 	document.getElementById("time_button").value = "暂停";
		}
	}
	
</script>