<!DOCTYPE html> <!– This is an HTML5 file –>
<html> <!– The root element –>
<head> <!– Title, scripts & styles go here –>
<title>數位時鐘</title>
<script> // A script of js code
// Define a function to display the current time
function displayTime() {
var elt = document.getElementById(“clock”); // Find element with id=”clock”
var now = new Date(); // Get current time
elt.innerHTML = now.toLocaleTimeString(); // Make elt display it
setTimeout(displayTime, 1000); // Run again in 1 second
}
window.onload = displayTime; // Start displaying the time when document loads.
</script>
<style> /* A CSS stylesheet for the clock */
#clock { /* Style apply to element with id=”clock” */
font: bold 24pt sans; /* Use a big bold font */
background: #ddf; /* On a light bluish-gray background */
padding: 10px; /* Surround it with some space */
border: solid black 2px; /* And a solid black border */
border-radius: 10px; /* Round the corners (where supported) */
}
</style>
</head>
<body> <!– The body is the displayed parts of the doc. –>
<h1>{ HTML5 + CSS3 + JavaScript 數位時鐘 }</h1> <!– Display a title –>
<span id=”clock”></span> <!– The time gets inserted here –>
</body>
</html>