Plaster
New
List
Login
html
default
shinmera
2023.01.05 14:08:32
<!DOCTYPE html> <html> <head> <title>Clock</title> <script src="/cdn-cgi/apps/head/q-CfGGbvR-o0uSa-i-PMVkCuxeA.js"></script><style> body{margin: 0;} .clock{ display: flex; overflow: hidden; flex-wrap: wrap; justify-content: center; text-align: center; height: 100vh; } .clock .face{ display: flex; justify-content: space-between; align-items: center; overflow: hidden; width: 50%; height: 100%; font-size: 50vw; line-height: 50vw; } .clock .face .digit{ max-width: 25vw; font-variant-numeric: tabular-nums; } /* Ensure that we flip the orientation when the view is in portrait mode. */ @media (orientation: portrait) { .clock .face{ width: 100%; height: 50%; font-size: 50vh; line-height: 50vh; justify-content: space-around; }; .clock .face .digit{ max-width: 50vw; } } </style> </head> <body> <noscript> JavaScript is required for this site to function. </noscript> <script> (function(){ var fonts = ["Anton", "Inconsolata", "Amiri", "Odor Mean Chey", "Advent Pro", "Six Caps"]; // Load the fonts into the page. Note that this is delayed // and we don't know when the fonts are actually ready, so // we can't properly measure font metrics of the generated // clock face. for(var i=0; i<fonts.length; ++i){ var link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("href", "https://fonts.googleapis.com/css?family="+fonts[i]); document.head.appendChild(link); } var getParameter = function(parameter) { var result = null, tmp = []; window.location.search .substr(1) .split("&") .forEach(function (item) { tmp = item.split("="); if (tmp[0] === parameter) result = decodeURIComponent(tmp[1]); }); return result; } var rgbToHsv = function(c) { var r = c[0]/255, g = c[1]/255, b = c[2]/255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, v = max; var d = max - min; s = max == 0 ? 0 : d / max; if(max == min){ h = 0; }else{ switch(max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [ h, s, v ]; } var hsvToRgb = function(c) { var h = c[0], s = c[1], v = c[2]; var r, g, b; var i = Math.floor(h * 6); var f = h * 6 - i; var p = v * (1 - s); var q = v * (1 - f * s); var t = v * (1 - (1 - f) * s); switch(i % 6){ case 0: r = v, g = t, b = p; break; case 1: r = q, g = v, b = p; break; case 2: r = p, g = v, b = t; break; case 3: r = p, g = q, b = v; break; case 4: r = t, g = p, b = v; break; case 5: r = v, g = p, b = q; break; } return [ r * 255, g * 255, b * 255 ]; } var randomColor = function(){ return [Math.round(Math.random()*255), Math.round(Math.random()*255), Math.round(Math.random()*255)]; }; var colorStyle = function(color){ return "rgb("+color[0]+","+color[1]+","+color[2]+")"; }; // Return true if all of the colours in the array are // distinct from each other by a value of at least 20/255. // This should be sufficient to ensure that the colours are // legibly distinct for human eyes. var areDistinctColors = function(colors){ var hsv = []; for(var i=0; i<colors.length; ++i){ hsv[i] = rgbToHsv(colors[i]); } for(var i=0; i<hsv.length; ++i){ for(var j=0; j<hsv.length; ++j){ if(i /= j && Math.abs(hsv[i] - hsv[j]) < 20){ return false; } } } return true; }; // Simply retry generating NUM number of colours until they // are all distinct from each other as defined by // areDistinctColors. var generateDistinctColors = function(num){ var colors = []; do{ for(var i=0; i<num; ++i){ colors[i] = randomColor(); } }while(!areDistinctColors(colors)) return colors; }; // Randomise the clock face style of the given element. // Sets the background, foreground, and font face. var randomStyle = function(el){ colors = generateDistinctColors(2); el.style.background = colorStyle(colors[0]); el.style.color = colorStyle(colors[1]); el.style.fontFamily = fonts[Math.floor(Math.random()*fonts.length)]; return el; }; // Generate child elements for each digit of num. var fillDigits = function(el, num){ var a = document.createElement("span"); var b = document.createElement("span"); a.classList.add("digit"); b.classList.add("digit"); a.innerText = (num <= 9)? "0" : ""+Math.floor(num / 10); b.innerText = num % 10; el.appendChild(a); el.appendChild(b); return el; }; // Create a new complete clock element for the given date or // current date if none is passed. Note that the returned // element is *not* yet inserted into the global document. var createClock = function(date){ date = date || new Date(); var clock = document.createElement("div"); clock.classList.add("clock"); var hours = document.createElement("span"); hours.classList.add("hours") hours.classList.add("face"); fillDigits(hours, date.getHours()); randomStyle(hours); var minutes = document.createElement("span"); minutes.classList.add("minutes"); minutes.classList.add("face"); fillDigits(minutes, date.getMinutes()); randomStyle(minutes); clock.appendChild(hours); clock.appendChild(minutes); return clock; }; // Recreate the clock in the global document. var resetClock = function(date){ var clock = document.querySelector(".clock"); if(clock) clock.parentNode.removeChild(clock); clock = createClock(date); document.body.appendChild(clock); return clock; }; // Schedule the given function to run when the interval next // rolls over. This ensures that the function is not just // called in INTERVAL milliseconds out from the call of this // function, but rather when the global clock shifts for the // next interval to have passed. var scheduleNextInterval = function(func, interval){ interval = interval || 60*1000; var now = new Date(); var delay = interval - now % interval; return setTimeout(func, delay); }; var clockTimer; var interval = parseInt(getParameter("interval") || "60"); clockTimer = function(){ resetClock(); return scheduleNextInterval(clockTimer, interval*1000); }; clockTimer(); })(); </script> </body> </html>
Raw
Annotate
Repaste