Home > Web Front-end > JS Tutorial > Write a clock in html web page

Write a clock in html web page

黄舟
Release: 2017-02-27 14:55:17
Original
2102 people have browsed it

Question? Write a clock in html web page

1.js format to write

<!DOCTYPE html>
<html>
<head>
	<title北京时间</title>
	<script type="text/javascript" charset="utf-8" language="javascript">
	function time1(){
	var today = new Date();
	var hour = today.getHours(),
	minute = today.getMinutes(),
	second = today.getSeconds();

	minute = checkTime(minute);
	second = checkTime(second);

	document.getElementById(&#39;txt&#39;).innerHTML=hour+":"+minute+":"+second;
	t = setTimeout(&#39;time1()&#39;,500);
}

function checkTime(i){
	if (i<10) {
		i="0" + i;
	}
  return i;
}
	</script>
</head>
<body onload="time1()">
	<p id="txt"></p>
</body>
</html>
Copy after login


2. Write in the form of jquery:

<!DOCTYPE html>
<html>
<head>
	<title>时钟</title>
	<link rel="shortcut icon" href="ico/11.ico">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(A);
		function A(){
			var today = new Date();
			var h = today.getHours();
			var m = today.getMinutes();
			var s = today.getSeconds();
			m = C(m);
			s = C(s);
			$("#a1").html("当前时间为:"+h+":"+m+":"+s)
			setTimeout(&#39;A()&#39;,500);
		}
		function C(i){
			if(i<10){
				i="0"+i;
			}
			return i;
		}
	</script>
</head>
<body>
	<p id="a1"></p>
</body>
</html>
Copy after login

The above is the content of writing a clock on the html web page. For more related content, please pay attention to PHP Chinese website (m.sbmmt.com)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template