canvasを使ったシンプルな時計の例
時刻に応じて横幅が変わるというだけですが，，
<!DOCTYPE html>
<html>
<head>
<title>Time</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで スマホの挙動を制限している -->
</head>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function myTokei(){
context.clearRect(0, 0, canvas.width, canvas.height);
myDate = new Date();
myHours = myDate.getHours();
myMin = myDate.getMinutes();
mySec = myDate.getSeconds();
//console.log(myHours + ":"+ myMin + ":"+ mySec);
context.fillStyle = "#FF0000";//赤
context.fillRect(0, 0, (myHours/23)*300, 99);
context.fillStyle = "#00FF00";//緑
context.fillRect(0, 100, (myMin/59)*300, 100);
context.fillStyle = "#0000FF";//青
context.fillRect(0, 200, (mySec/59)*300, 100);
}
setInterval("myTokei()",1000);
</script>
</body>
</html>