This article example describes how JS implements simple display time on web pages. Share it for your reference. The details are as follows:
This is a web clock JS code, pure javascript implementation, displaying time, minutes and seconds. There are many web time displays and web clocks, which is really simple. Friends with good artists can further beautify and improve them on this basis.
Copy the code as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple web clock</title>
<style>
body,div{margin:0;padding:0;}
body{color:#ffff;font:16px/1.5 /5fae/8f6f/96c5/9ed1;}
#clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
var oClock = document.getElementById("clock");
var aSpan = oClock.getElementsByTagName("span");
setInterval(getTimes, 1000);
getTimes();
function getTimes ()
{
var oDate = new Date();
var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];
for (var i in aDate) aSpan[i].innerHTML = format(aDate[i])
}
function format(a)
{
return a.toString().replace(/^(/d)$/, "0$1")
}
}
</script>
</head>
<body>
<div id="clock">
<span></span>points<span></span>minutes<span></span>seconds
</div>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.