Digitaluhr etwas anders
Eine Digitaluhr die etwas animiert ist beim Zahlenwechsel
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<title>Analogue/Digital Clock</title>
<script>
new Image().src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAACVJREFUKFNj/P///6NPDFQHcnwMDA8//qcRGqJGA8OaFgECNBYAGoZXXjOwCCkAAAAASUVORK5CYII=';//;
new Image().src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAABhJREFUGFdjZGj4z4ACgHxkhMIBqcUvDwAeIx9tuVr9PAAAAABJRU5ErkJggg==';//'./graphics/dot.png';
new Image().src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAAChJREFUKFNj/P//P2MjA9XB/3qgkQ3/aYVoZS7QxTQ0GhjWtDAdaCwAEc+7gw0o8VgAAAAASUVORK5CYII=';//;
</script>
</head>
<body onload="go()">
<canvas id="canvas1" height="110" width="350">
Sorry, your browser does not support the element so you cannot view this demo.
</canvas>
<script>
function go(){
var OFFSET_X = 20;
var OFFSET_Y = 15;
var imgLine = new Image();
imgLine.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAAChJREFUKFNj/P//P2MjA9XB/3qgkQ3/aYVoZS7QxTQ0GhjWtDAdaCwAEc+7gw0o8VgAAAAASUVORK5CYII=';//;
var imgBgLine = new Image();
imgBgLine.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAIAAADdQ8utAAAABGdBTUEAALGPC/xhBQAAACVJREFUKFNj/P///6NPDFQHcnwMDA8//qcRGqJGA8OaFgECNBYAGoZXXjOwCCkAAAAASUVORK5CYII=';//'./graphics/bgline.png';
var imgDot = new Image();
imgDot.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAABGdBTUEAALGPC/xhBQAAABhJREFUGFdjZGj4z4ACgHxkhMIBqcUvDwAeIx9tuVr9PAAAAABJRU5ErkJggg==';//;
var LINE_WIDTH = imgLine.height;
var LINE_LENGTH = imgLine.width;
var DOT_WIDTH = imgDot.width;
var GAP = 2 * DOT_WIDTH;
var TICKS_PER_SEC = 30;
var DIGIT_X_1 = OFFSET_X;