Stor tak til Hest.
<br><br>

<!-- Sixteen-segment ur fra Hest javascript begynd-->

<img id="myImagehour10" src="https://kiw.dk/images/digi/0.png"> 
<img id="myImagehour1" src="https://kiw.dk/images/digi/0.png">
<img id="myImageblinkerA" src="https://kiw.dk/images/digi/dots-off.png">
<img id="myImageminute10" src="https://kiw.dk/images/digi/0.png">
<img id="myImageminute1" src="https://kiw.dk/images/digi/0.png">
<img id="myImageblinkerB" src="https://kiw.dk/images/digi/dots-off.png">
<img id="myImagesecond10" src="https://kiw.dk/images/digi/0.png">
<img id="myImagesecond1" src="https://kiw.dk/images/digi/0.png">
</div>


<script>

var arrayDigi = [
    'https://kiw.dk/images/digi/0.png',
    'https://kiw.dk/images/digi/1.png',
    'https://kiw.dk/images/digi/2.png',
    'https://kiw.dk/images/digi/3.png',
    'https://kiw.dk/images/digi/4.png',
    'https://kiw.dk/images/digi/5.png',
    'https://kiw.dk/images/digi/6.png',
    'https://kiw.dk/images/digi/7.png',
    'https://kiw.dk/images/digi/8.png',
    'https://kiw.dk/images/digi/9.png',
    'https://kiw.dk/images/digi/dots-off.png',
    'https://kiw.dk/images/digi/dots-on.png'
];

function klokken16seg() {
    
    var clock_time = new Date();
    var s = clock_time.toLocaleString("en-GB", { timeZone: "Europe/Copenhagen" });
    var hour = s.slice(-8,-6);
    var minute = s.slice(-5,-3);
    var second = s.slice(-2);
  
    var hour10 = hour.slice(-2,-1);
    document.getElementById("myImagehour10").src = arrayDigi[hour10];
    var hour1 = hour.slice(-1);
    document.getElementById("myImagehour1").src = arrayDigi[hour1];

    var minute10 = minute.slice(-2,-1);
    document.getElementById("myImageminute10").src = arrayDigi[minute10];
    var minute1 = minute.slice(-1);
    document.getElementById("myImageminute1").src = arrayDigi[minute1];

    var second10 = second.slice(-2,-1);
    document.getElementById("myImagesecond10").src = arrayDigi[second10];
    var second1 = second.slice(-1);
    document.getElementById("myImagesecond1").src = arrayDigi[second1];


    if ((second%2)==0) {document.getElementById("myImageblinkerA").src = arrayDigi[11];
                        document.getElementById("myImageblinkerB").src = arrayDigi[11];
    }
    else {document.getElementById("myImageblinkerA").src = arrayDigi[10];
          document.getElementById("myImageblinkerB").src = arrayDigi[10];
    }


setTimeout("klokken16seg()", 1000);} klokken16seg();    

</script>

<!-- Sixteen-segment ur fra Hest javascript slut-->
<br>

<canvas id="canvas" width="50" height="50"
style="background-color:#333">
</canvas>
<div class="wtfont" id="js_utc"></div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90;
setInterval(drawClock, 1000);

function drawClock() {
 var clock_time = new Date();
 var s = clock_time.toLocaleString("en-GB", { timeZone: "Europe/Copenhagen" });

//clock_div skriver det digitalt
//var clock_div = document.getElementById('js_utc');clock_div.innerHTML =  s ;
//
 
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius, s);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}


function drawTime(ctx, radius, s){

//s = tekst strengen 24.11.2019 04.32.48
    var hour = s.slice(-8,-6);
    var minute = s.slice(-5,-3);
    var second = s.slice(-2);

    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>



<div id="js_clock_morse"></div>

<script>


var arrayMorseCodeUr = [
    '-----', '.----', '..---', '...--', '....-', '.....', '-....', '--...', '---..', '----.'
    ];


  function js_clock_morse(){
  var clock_time = new Date();
  
  var clock_hours = clock_time.getHours();
  var h10 = arrayMorseCodeUr[Math.floor(clock_hours%10)];
  var h1 = arrayMorseCodeUr[Math.floor(clock_hours/10)];
  
  var clock_minutes = clock_time.getMinutes();
  var m10 = arrayMorseCodeUr[Math.floor(clock_minutes%10)];
  var m1 = arrayMorseCodeUr[Math.floor(clock_minutes/10)];
  
  var clock_seconds = clock_time.getSeconds();
  var s10 = arrayMorseCodeUr[Math.floor(clock_seconds%10)];
  var s1 = arrayMorseCodeUr[Math.floor(clock_seconds/10)];
  
  var clock_div = document.getElementById('js_clock_morse');
  // clock_div.innerHTML = h1+"|"+m1+"|"+s1 +"<br>"+ h10+"|"+m10+"|"+s10;
  clock_div.innerHTML = h1+" "+h10+" : "+m1+" "+m10+" : "+s1+" "+s10;
                                                       
  setTimeout("js_clock_morse()", 1000);}js_clock_morse();

</script>

<div class="stfont" id="swatchclock"></div>


<script language="javascript">

function swatchclock(){

  var dt = new Date();

  var beat = (((dt.getUTCHours() + 1) % 24) + (dt.getUTCMinutes()) / 60 + (dt.getUTCSeconds()) / 3600) * 1000 / 24;
  beat = '@' + beat.toFixed(2);

  var clock_div = document.getElementById('swatchclock');clock_div.innerHTML =  beat;

  setTimeout("swatchclock()", 1000);}swatchclock();

</script>



<div id="secondsSinceEpoch"></div>

<script>

function secondsSinceEpoch() {
    var now = new Date();
    var secondsSinceEpochUTC = Math.round(now.getTime() / 1000); //new Date().getTime() henter altid UTC millisekunder
    var clock_div_epoch = document.getElementById('secondsSinceEpoch');
    clock_div_epoch.innerHTML = secondsSinceEpochUTC;
    
  setTimeout("secondsSinceEpoch()", 1000);} secondsSinceEpoch();

</script>




       <div id = "js_clock_HEXtest"></div>

<script>

  function js_clock_HEXtest(){
  var clock_time = new Date();
  
  var clock_hours = clock_time.getHours();
  var h16 = clock_hours.toString(16).toUpperCase();
  if (clock_hours < 16){h16 = "0" + h16;}
  
  var clock_minutes = clock_time.getMinutes();
  var m16 = clock_minutes.toString(16).toUpperCase();
  if (clock_minutes < 16){m16 = "0" + m16;}
  
  var clock_seconds = clock_time.getSeconds();
  var s16 = clock_seconds.toString(16).toUpperCase();
  if (clock_seconds  < 16){s16 = "0" + s16;}
  
  var clock_div = document.getElementById('js_clock_HEXtest');
  clock_div.innerHTML = h16 + ":" + m16 + ":" + s16;
                                                       
  setTimeout("js_clock_HEXtest()", 1000);}js_clock_HEXtest();

</script>

<img id="myImageResM1" src="https://kiw.dk/images/idea.png">

<script>
    
var x = 0;

  function js_clock_test(){
  
  var myImageResM1 = document.getElementById('myImageResM1');
  
  if(x==0) { myImageResM1.src = "https://kiw.dk/images/noidea.png"; }
  if(x==1){ myImageResM1.src = "https://kiw.dk/images/idea.png"; } 
  
  x = x + Math.floor(Math.random() * 10)%2;
  if(x>=2) x = 0;
                                                       
  setTimeout("js_clock_test()", 500);}js_clock_test();

</script>


<img id="myImageHEX" src="https://kiw.dk/images/digi/16seg/0.png">

<script>

var arrayDigiHEX = [
    
    'https://kiw.dk/images/digi/16seg/0.png',
    'https://kiw.dk/images/digi/16seg/1.png',
    'https://kiw.dk/images/digi/16seg/2.png',
    'https://kiw.dk/images/digi/16seg/3.png',
    'https://kiw.dk/images/digi/16seg/4.png',
    'https://kiw.dk/images/digi/16seg/5.png',
    'https://kiw.dk/images/digi/16seg/6.png',
    'https://kiw.dk/images/digi/16seg/7.png',
    'https://kiw.dk/images/digi/16seg/8.png',
    'https://kiw.dk/images/digi/16seg/9.png',
    'https://kiw.dk/images/digi/16seg/a.png',
    'https://kiw.dk/images/digi/16seg/b.png',
    'https://kiw.dk/images/digi/16seg/c.png',
    'https://kiw.dk/images/digi/16seg/d.png',
    'https://kiw.dk/images/digi/16seg/e.png',
    'https://kiw.dk/images/digi/16seg/f.png',
    'https://kiw.dk/images/digi/16seg/g.png',
    'https://kiw.dk/images/digi/16seg/h.png',
    'https://kiw.dk/images/digi/16seg/i.png',
    'https://kiw.dk/images/digi/16seg/j.png',
    'https://kiw.dk/images/digi/16seg/k.png',
    'https://kiw.dk/images/digi/16seg/l.png',
    'https://kiw.dk/images/digi/16seg/m.png',
    'https://kiw.dk/images/digi/16seg/n.png',
    'https://kiw.dk/images/digi/16seg/o.png',
    'https://kiw.dk/images/digi/16seg/p.png',
    'https://kiw.dk/images/digi/16seg/q.png',
    'https://kiw.dk/images/digi/16seg/r.png',
    'https://kiw.dk/images/digi/16seg/s.png',
    'https://kiw.dk/images/digi/16seg/t.png',
    'https://kiw.dk/images/digi/16seg/u.png',
    'https://kiw.dk/images/digi/16seg/v.png',
    'https://kiw.dk/images/digi/16seg/w.png',
    'https://kiw.dk/images/digi/16seg/x.png',
    'https://kiw.dk/images/digi/16seg/y.png',
    'https://kiw.dk/images/digi/16seg/z.png'
];

var currentIndexDigiHEX = Math.floor(Math.random() * 100)%36;//0;

function taelOpHEX() {
    var clock_div_demoTestDigiHEX = document.getElementById("myImageHEX");
    clock_div_demoTestDigiHEX.src = arrayDigiHEX[currentIndexDigiHEX];
    currentIndexDigiHEX = currentIndexDigiHEX + Math.floor(Math.random() * 100)%36; //currentIndexDigiHEX++;
    if (currentIndexDigiHEX == undefined || currentIndexDigiHEX >= arrayDigiHEX.length) {
        currentIndexDigiHEX = Math.floor(Math.random() * 100)%36;//0;
    }

setTimeout("taelOpHEX()", 500);} taelOpHEX();

</script>


<div id="rom_random"></div>

<script>

var tal = 0;
function romTaller () {
    
    var rom = talTilRomertal(tal);
    
    document.getElementById("rom_random").innerHTML = tal + " " + rom;
    tal++; tal = tal%4000000000;

setTimeout("romTaller()", 500);} romTaller();

function talTilRomertal(num){
			var intPos;
			var intDigit;
			var strTemp;
			var arrayRomertal = Array("I","V","X","L","C","D","M","(V)","(X)","(L)","(C)","(D)","(M)","((V))","((X))","((L))","((C))","((D))","((M))");
			intPos = 0;
			strTemp = "";
			while (num > 0){
				intDigit = num % 10;
				num = Math.floor(num / 10);
				switch(intDigit){
					case 1:
						strTemp = arrayRomertal[intPos] + strTemp;
						break;
					case 2:
						strTemp = arrayRomertal[intPos] + arrayRomertal[intPos] + strTemp;
						break;
					case 3:
						strTemp = arrayRomertal[intPos] + arrayRomertal[intPos] + arrayRomertal[intPos] + strTemp;
						break;
					case 4:
						strTemp = arrayRomertal[intPos] + arrayRomertal[intPos + 1] + strTemp;
						break;
					case 5:
						strTemp = arrayRomertal[intPos + 1] + strTemp;
						break;
					case 6:
						strTemp = arrayRomertal[intPos + 1] + arrayRomertal[intPos] + strTemp;
						break;
					case 7:
						strTemp = arrayRomertal[intPos + 1] + arrayRomertal[intPos] + arrayRomertal[intPos] + strTemp;
						break;
					case 8:
						strTemp = arrayRomertal[intPos + 1] + arrayRomertal[intPos] + arrayRomertal[intPos] + arrayRomertal[intPos] + strTemp;
						break;
					case 9:
						strTemp = arrayRomertal[intPos] + arrayRomertal[intPos + 2] + strTemp;
						break;
				}
				intPos = intPos + 2;
			}
			if(strTemp.length === 0){
				return " ";
			}else{
				return strTemp;
			}
		}       
       
</script>







<style>

body {  
        background-image: url('https://kiw.dk/images/sky/Horse-run-transparent.gif'); background-repeat: no-repeat; background-position: center top;
        transition: background-color 3s cubic-bezier(1, 1, 1, 1); float: left;
	transition-delay: 0s;
}

</style>

<!--  background-image: url(https://kiw.dk/images/sky/Horse-run-transparent.gif'); background-repeat: no-repeat;
Husk at inds�tte eller fjerne teksten: background-repeat: no-repeat; i body -->

<div id="ko">_</div>


<script>

var color  = [
"IndianRed",
'LightCoral',
'Salmon',
'DarkSalmon',
'LightSalmon',
'Crimson',
'Red',
'FireBrick',
'DarkRed',
'Pink',
'LightPink',
'HotPink',
'DeepPink',
'MediumVioletRed',
'PaleVioletRed',
'Coral',
'Tomato',
'OrangeRed',
'DarkOrange',
'Orange',
'Gold',
'Yellow',
'LightYellow',
'LemonChiffon',
'LightGoldenrodYellow',
'PapayaWhip',
'Moccasin',
'PeachPuff',
'PaleGoldenrod',
'Khaki',
'DarkKhaki',
'Lavender',
'Thistle',
'Plum',
'Violet',
'Orchid',
'Magenta',
'MediumOrchid',
'MediumPurple',
'RebeccaPurple',
'BlueViolet',
'DarkViolet',
'DarkOrchid',
'DarkMagenta',
'Purple',
'Indigo',
'SlateBlue',
'DarkSlateBlue',
'MediumSlateBlue',
'GreenYellow',
'Chartreuse',
'LawnGreen',
'Lime',
'LimeGreen',
'PaleGreen',
'LightGreen',
'MediumSpringGreen',
'SpringGreen',
'MediumSeaGreen',
'SeaGreen',
'ForestGreen',
'Green',
'DarkGreen',
'YellowGreen',
'OliveDrab',
'Olive',
'DarkOliveGreen',
'MediumAquamarine',
'DarkSeaGreen',
'LightSeaGreen',
'DarkCyan',
'Teal',
'Aqua',
'LightCyan',
'PaleTurquoise',
'Aquamarine',
'Turquoise',
'MediumTurquoise',
'DarkTurquoise',
'CadetBlue',
'SteelBlue',
'LightSteelBlue',
'PowderBlue',
'LightBlue',
'SkyBlue',
'LightSkyBlue',
'DeepSkyBlue',
'DodgerBlue',
'CornflowerBlue',
'RoyalBlue',
'Blue',
'MediumBlue',
'DarkBlue',
'Navy',
'MidnightBlue',
'Cornsilk',
'BlanchedAlmond',
'Bisque',
'NavajoWhite',
'Wheat',
'BurlyWood',
'Tan',
'RosyBrown',
'SandyBrown',
'Goldenrod',
'DarkGoldenrod',
'Peru',
'Chocolate',
'SaddleBrown',
'Sienna',
'Brown',
'Maroon',
'White',
'Snow',
'HoneyDew',
'MintCream',
'Azure',
'AliceBlue',
'GhostWhite',
'WhiteSmoke',
'SeaShell',
'Beige',
'OldLace',
'FloralWhite',
'Ivory',
'AntiqueWhite',
'Linen',
'LavenderBlush',
'MistyRose',
'Gainsboro',
'LightGray',
'Silver',
'DarkGray',
'Gray',
'DimGray',
'LightSlateGray',
'SlateGray',
'DarkSlateGray',
'Black',
'IndianRed',
'LightCoral',
'Salmon',
'DarkSalmon',
'LightSalmon',
'Crimson',
'Red',
'FireBrick',
'DarkRed',
'Pink',
'LightPink',
'HotPink',
'DeepPink',
'MediumVioletRed',
'PaleVioletRed',
'Coral',
'Tomato',
'OrangeRed',
'DarkOrange',
'Orange',
'Gold',
'Yellow',
'LightYellow',
'LemonChiffon',
'LightGoldenrodYellow',
'PapayaWhip',
'Moccasin',
'PeachPuff',
'PaleGoldenrod',
'Khaki',
'DarkKhaki',
'Lavender',
'Thistle',
'Plum',
'Violet',
'Orchid',
'Magenta',
'MediumOrchid',
'MediumPurple',
'RebeccaPurple',
'BlueViolet',
'DarkViolet',
'DarkOrchid',
'DarkMagenta',
'Purple',
'Indigo',
'SlateBlue',
'DarkSlateBlue',
'MediumSlateBlue',
'GreenYellow',
'Chartreuse',
'LawnGreen',
'Lime',
'LimeGreen',
'PaleGreen',
'LightGreen',
'MediumSpringGreen',
'SpringGreen',
'MediumSeaGreen',
'SeaGreen',
'ForestGreen',
'Green',
'DarkGreen',
'YellowGreen',
'OliveDrab',
'Olive',
'DarkOliveGreen',
'MediumAquamarine',
'DarkSeaGreen',
'LightSeaGreen',
'DarkCyan',
'Teal',
'Aqua',
'LightCyan',
'PaleTurquoise',
'Aquamarine',
'Turquoise',
'MediumTurquoise',
'DarkTurquoise',
'CadetBlue',
'SteelBlue',
'LightSteelBlue',
'PowderBlue',
'LightBlue',
'SkyBlue',
'LightSkyBlue',
'DeepSkyBlue',
'DodgerBlue',
'CornflowerBlue',
'RoyalBlue',
'Blue',
'MediumBlue',
'DarkBlue',
'Navy',
'MidnightBlue',
'Cornsilk',
'BlanchedAlmond',
'Bisque',
'NavajoWhite',
'Wheat',
'BurlyWood',
'Tan',
'RosyBrown',
'SandyBrown',
'Goldenrod',
'DarkGoldenrod',
'Peru',
'Chocolate',
'SaddleBrown',
'Sienna',
'Brown',
'Maroon',
'White',
'Snow',
'HoneyDew',
'MintCream',
'Azure',
'AliceBlue',
'GhostWhite',
'WhiteSmoke',
'SeaShell',
'Beige',
'OldLace',
'FloralWhite',
'Ivory',
'AntiqueWhite',
'Linen',
'LavenderBlush',
'MistyRose',
'Gainsboro',
'LightGray',
'Silver',
'DarkGray',
'Gray',
'DimGray',
'LightSlateGray',
'SlateGray',
'DarkSlateGray',
'Black'
];


var currentIndex= 0;

setInterval(function() {
    document.body.style.cssText = "background-color: " + color[currentIndex];
    var clock_div = document.getElementById('ko'); clock_div.innerHTML =  color[currentIndex]; 
    currentIndex++;
    if (currentIndex == undefined || currentIndex >= color.length) {
        currentIndex = 0;
    }
}, 4000);


</script>




<article class="clock">
  <div class="hours-container">
    <div class="hours"></div>
  </div>
  <div class="minutes-container">
    <div class="minutes"></div>
  </div>
  <div class="seconds-container">
    <div class="seconds"></div>
  </div>
</article>
   

<style>

.clock {
 // border-radius: 50%;
 // background: #fff url(https://kiw.dk/images/whitewall.gif) no-repeat center;
 // background-size: 88%;
  height: 20em;
 // padding-bottom: 1%;
  position: relative;
  width: 12em;
}

.clock.simple:after {
  background: #000;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}   

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours {
  background: #000;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

.minutes {
  background: #000;
  height: 40%;
  left: 49%;
  position: absolute;
  top: 10%;
  transform-origin: 50% 100%;
  width: 2%;
}

.seconds {
  background: #f00;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index: 8;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

.hours-container {
  animation: rotate 43200s infinite linear;
}

.minutes-container {
  transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
  transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}


</style>

<script>

//////////////////TILFOJET AF MIG /////////////////////
(function() {
    // Start the seconds container 
    initLocalClocks();
    setUpMinuteHands();
    moveSecondHands();
})();
///////////////////////////////////////////////////////

/*
  * Starts any clocks using the user's local time
  * From: cssanimation.rocks/clocks
  */
function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();

  // Create an object with each hand and it's angle in degrees
  var hands = [
    {
      hand: 'hours',
      angle: (hours * 30) + (minutes / 2)
    },
    {
      hand: 'minutes',
      angle: (minutes * 6)
    },
    {
      hand: 'seconds',
      angle: (seconds * 6)
    }
  ];
  // Loop through each of these hands to set their angle
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'minutes') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

/*
 * Set a timeout for the first minute hand movement (less than 1 minute), then rotate it every minute after that
 */
function setUpMinuteHands() {
  // Find out how far into the minute we are
  var containers = document.querySelectorAll('.minutes-container');
  var secondAngle = containers[0].getAttribute("data-second-angle");
  if (secondAngle > 0) {
    // Set a timeout until the end of the current minute, to move the hand
    var delay = (((360 - secondAngle) / 6) + 0.1) * 1000;
    setTimeout(function() {
      moveMinuteHands(containers);
    }, delay);
  }
}

/*
 * Do the first minute's rotation
 */
function moveMinuteHands(containers) {
  for (var i = 0; i < containers.length; i++) {
    containers[i].style.webkitTransform = 'rotateZ(6deg)';
    containers[i].style.transform = 'rotateZ(6deg)';
  }
  // Then continue with a 60 second interval
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 12;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 60000);
}

/*
 * Move the second containers
 */
function moveSecondHands() {
  var containers = document.querySelectorAll('.seconds-container');
  setInterval(function() {
    for (var i = 0; i < containers.length; i++) {
      if (containers[i].angle === undefined) {
        containers[i].angle = 6;
      } else {
        containers[i].angle += 6;
      }
      containers[i].style.webkitTransform = 'rotateZ('+ containers[i].angle +'deg)';
      containers[i].style.transform = 'rotateZ('+ containers[i].angle +'deg)';
    }
  }, 1000);
}


 </script>

<br><br><br><br>
<br><br><br><br>
<br><br><br><br>


<style> 
#myDIVColor1 {
  width: 80px;
  height: 75px;
}
#myDIVColor2 {
  width: 80px;
  height: 75px;
}
#myDIVColor3 {
  width: 80px;
  height: 75px;
}
#myDIVColor4 {
  width: 80px;
  height: 75px;
}
#myDIVColor5 {
  width: 80px;
  height: 75px;
}
#myDIVColor6 {
  width: 80px;
  height: 75px;
}
#myDIVColor7 {
  width: 80px;
  height: 75px;
}
#myDIVColor8 {
  width: 80px;
  height: 80px;
}
#myDIVColor9 {
  width: 80px;
  height: 75px;
}
#myDIVColor10 {
  width: 80px;
  height: 75px;
}
#myDIVColor11 {
  width: 80px;
  height: 75px;
}
#myDIVColor12 {
  width: 80px;
  height: 75px;
}
#myDIVColor13 {
  width: 80px;
  height: 75px;
}
#myDIVColor14 {
  width: 80px;
  height: 75px;
}
#myDIVColor15 {
  width: 80px;
  height: 75px;
}
#myDIVColor16 {
  width: 80px;
  height: 75px;
}
#myDIVColor17 {
  width: 80px;
  height: 75px;
}
#myDIVColor18 {
  width: 80px;
  height: 75px;
}
#myDIVColor19 {
  width: 80px;
  height: 75px;
}
#myDIVColor20 {
  width: 80px;
  height: 75px;
}
#myDIVColor21 {
  width: 80px;
  height: 75px;
}

</style>

<table>
<tr>
       <td> <div id="myDIVColor1"></div>
            <div id="myDIVHex1"> </div> </td>
       <td> <div id="myDIVColor2"></div>
            <div id="myDIVHex2"> </div> </td>
       <td> <div id="myDIVColor3"></div>
            <div id="myDIVHex3"> </div> </td>
       <td> <div id="myDIVColor4"></div>
            <div id="myDIVHex4"> </div> </td>     
</tr>
<tr>
       <td> <div id="myDIVColor5"></div>
            <div id="myDIVHex5"> </div> </td>
       <td> <div id="myDIVColor6"></div>
            <div id="myDIVHex6"> </div> </td>
       <td> <div id="myDIVColor7"></div>
            <div id="myDIVHex7"> </div> </td>
       <td> <div id="myDIVColor8"></div>
            <div id="myDIVHex8"> </div> </td> 
</tr>
<tr>
       <td> <div id="myDIVColor9"></div>
            <div id="myDIVHex9"> </div> </td>
       <td> <div id="myDIVColor10"></div>
            <div id="myDIVHex10"> </div> </td>
       <td> <div id="myDIVColor11"></div>
            <div id="myDIVHex11"> </div> </td>
       <td> <div id="myDIVColor12"></div>
            <div id="myDIVHex12"> </div> </td> 
</tr>
<tr>
       <td> <div id="myDIVColor13"></div>
            <div id="myDIVHex13"> </div> </td>
       <td> <div id="myDIVColor14"></div>
            <div id="myDIVHex14"> </div> </td>
       <td> <div id="myDIVColor15"></div>
            <div id="myDIVHex15"> </div> </td>       
</tr>       
<tr>       
       <td> <div id="myDIVColor16"></div>
            <div id="myDIVHex16"> </div> </td>
       <td> <div id="myDIVColor17"></div>
            <div id="myDIVHex17"> </div> </td>
       <td> <div id="myDIVColor18"></div>
            <div id="myDIVHex18"> </div> </td>
</tr>       
<tr>       
       <td> <div id="myDIVColor19"></div>
            <div id="myDIVHex19"> </div> </td>
       <td> <div id="myDIVColor20"></div>
            <div id="myDIVHex20"> </div> </td>
       <td> <div id="myDIVColor21"></div>
            <div id="myDIVHex21"> </div> </td> 
</tr>

</table>

<script>


var tal256 = 0;
  
function colorGen256() {
        if(tal256>256) {tal256 = 0;}
        var hest = tal256.toString(16).toUpperCase();
        if(tal256<16) {hest = "0" + hest;}
        //////////////////////////////////////////////////////////////////////////////
        var randomColorRR1 = "#" + hest + "00" + "00";
        document.getElementById("myDIVColor1").style.backgroundColor = randomColorRR1;
        document.getElementById("myDIVHex1").innerHTML = randomColorRR1;
        
        var randomColorRR2 = "#" + hest + "FF" + "00";
        document.getElementById("myDIVColor2").style.backgroundColor = randomColorRR2;
        document.getElementById("myDIVHex2").innerHTML = randomColorRR2;
        
        var randomColorRR3 = "#" + hest + "00" + "FF";
        document.getElementById("myDIVColor3").style.backgroundColor = randomColorRR3;
        document.getElementById("myDIVHex3").innerHTML = randomColorRR3;
        
        var randomColorRR4 = "#" + hest + "FF" + "FF";
        document.getElementById("myDIVColor4").style.backgroundColor = randomColorRR4;
        document.getElementById("myDIVHex4").innerHTML = randomColorRR4;
        //////////////////////////////////////////////////////////////////////////////////
        var randomColorRR5 = "#" + "00" + hest + "00";
        document.getElementById("myDIVColor5").style.backgroundColor = randomColorRR5;
        document.getElementById("myDIVHex5").innerHTML = randomColorRR5;
        
        var randomColorRR6 = "#" + "00" + hest + "FF";
        document.getElementById("myDIVColor6").style.backgroundColor = randomColorRR6;
        document.getElementById("myDIVHex6").innerHTML = randomColorRR6;
        
        var randomColorRR7 = "#" + "FF" + hest + "00";
        document.getElementById("myDIVColor7").style.backgroundColor = randomColorRR7;
        document.getElementById("myDIVHex7").innerHTML = randomColorRR7;
        
        var randomColorRR8 = "#" + "FF" + hest + "FF";
        document.getElementById("myDIVColor8").style.backgroundColor = randomColorRR8;
        document.getElementById("myDIVHex8").innerHTML = randomColorRR8;
        ///////////////////////////////////////////////////////////////////////////////
        var randomColorRR9 = "#" + "00" + "00" + hest;
        document.getElementById("myDIVColor9").style.backgroundColor = randomColorRR9;
        document.getElementById("myDIVHex9").innerHTML = randomColorRR9;
        
        var randomColorRR10 = "#" + "FF" + "00" + hest;
        document.getElementById("myDIVColor10").style.backgroundColor = randomColorRR10;
        document.getElementById("myDIVHex10").innerHTML = randomColorRR10;
        
        var randomColorRR11 = "#" + "00" + "FF" + hest;
        document.getElementById("myDIVColor11").style.backgroundColor = randomColorRR11;
        document.getElementById("myDIVHex11").innerHTML = randomColorRR11;
        
        var randomColorRR12 = "#" + "FF" + "FF" + hest;
        document.getElementById("myDIVColor12").style.backgroundColor = randomColorRR12;
        document.getElementById("myDIVHex12").innerHTML = randomColorRR12;
        /////////////////////////////////////////////////////////////////////////////////
        var randomColorRR13 = "#" + hest + hest + "00";
        document.getElementById("myDIVColor13").style.backgroundColor = randomColorRR13;
        document.getElementById("myDIVHex13").innerHTML = randomColorRR13;
        
        var randomColorRR14 = "#" + hest + "00" + hest;
        document.getElementById("myDIVColor14").style.backgroundColor = randomColorRR14;
        document.getElementById("myDIVHex14").innerHTML = randomColorRR14;
        
        var randomColorRR15 = "#" + "00" + hest + hest;
        document.getElementById("myDIVColor15").style.backgroundColor = randomColorRR15;
        document.getElementById("myDIVHex15").innerHTML = randomColorRR15;
        /////////////////////////////////////////////////////////////////////////////////
        var randomColorRR16 = "#" + "FF" + hest + hest;
        document.getElementById("myDIVColor16").style.backgroundColor = randomColorRR16;
        document.getElementById("myDIVHex16").innerHTML = randomColorRR16;
        
        var randomColorRR17 = "#" + hest + "FF" + hest;
        document.getElementById("myDIVColor17").style.backgroundColor = randomColorRR17;
        document.getElementById("myDIVHex17").innerHTML = randomColorRR17;
        
        var randomColorRR18 = "#" + hest + hest + "FF";
        document.getElementById("myDIVColor18").style.backgroundColor = randomColorRR18;
        document.getElementById("myDIVHex18").innerHTML = randomColorRR18;
        ///////////////////////////////////////////////////////////////////////////////////
        var randomColorRR19 = "#" + "00" + "00" + "00";
        document.getElementById("myDIVColor19").style.backgroundColor = randomColorRR19;
        document.getElementById("myDIVHex19").innerHTML = randomColorRR19;
        
        var randomColorRR20 = "#" + hest + hest + hest;
        document.getElementById("myDIVColor20").style.backgroundColor = randomColorRR20;
        document.getElementById("myDIVHex20").innerHTML = randomColorRR20;
        
        var randomColorRR21 = "#" + "FF" + "FF" + "FF";
        document.getElementById("myDIVColor21").style.backgroundColor = randomColorRR21;
        document.getElementById("myDIVHex21").innerHTML = randomColorRR21;
        ////////////////////////////////////////////////////////////////////////////////
        
        tal256++;
        setTimeout("colorGen256()", 100);} colorGen256();


</script>

<br>