Пример цветных часов в моём исполнении

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="700" height="600"
style="border:1px solid #d3d3d3;">

</canvas>

<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.font = "75px Arial";
ctx.fillStyle = "red";
let timer = setInterval(function() {
ctx.clearRect(0,0,700,600);

const d = new Date();

var randomColor1 = "#" + Math.floor(Math.random()*16777215).toString(16);
var randomColor2 = "#" + Math.floor(Math.random()*16777215).toString(16);

ctx.fillStyle = randomColor1;
ctx.fillText(d.getHours(),150,300);
ctx.fillStyle = "black";
ctx.fillText(":",250,300);
ctx.fillStyle = randomColor2;
ctx.fillText(d.getMinutes(),300,300);

}, 500);

</script>

</body>
</html>


Рецензии