-
Notifications
You must be signed in to change notification settings - Fork 16
/
time.html
92 lines (82 loc) · 3.1 KB
/
time.html
1
<!DOCTYPE html><html><head> <title>What colour is it?</title> <meta charset="UTF-8"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:800,400,300' rel='stylesheet' type='text/css'> <link rel="shortcut icon" href="img/favicon.ico?v=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> <meta name="description" content="what colour is it?" /> <meta property="og:title" content="What colour is it?" /> <meta property='og:locale' content="en_GB"/> <meta property='og:description' content="the time....... now in colour." /> <meta property="og:type" content="Website" /> <meta property='og:site_name' content="SCN9A" /> <style> @media all and (max-width:1024px){ h1{font-family:"open sans";font-size:40px;font-weight:300;color:white;transition:all 0.6s;-webkit-transition:all 0.6s;} h2{font-family:"open sans";font-size:20px;font-weight:300;color:white;transition:all 0.6s;-webkit-transition:all 0.6s;} iframe{display:none;} } @media all and (min-width:1024px){ h1{font-family:"open sans";font-size:120px;font-weight:300;color:white;transition:all 0.6s;-webkit-transition:all 0.6s;} h2{font-family:"open sans";font-size:30px;font-weight:300;color:white;transition:all 0.6s;-webkit-transition:all 0.6s;} iframe{position:absolute;bottom:-30px;left:50%;margin-left:-25px;opacity:0.1;transition:all 0.4s;-webkit-transition:all 0.4s;width:50px;} iframe:hover{opacity:1;} } table{position:absolute;width:100%;height:100%;top:0px;left:0px;}X .time-div{width:400px;} .site_title{color:#FFFFFF;background-image:-webkit-linear-gradient(90deg,#eee,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-animation:hue 60s infinite linear;} @media (min-width:650px){ .mega{font-size:1rem;line-height:1;} } </style></head><body> <div class="time-div"> <h1 class="site_title mega">Full screen: F11(win) / Command+control+f (OS Sarari)</h1> </div> <table> <td height="100%" width="100%" align="center" valign="middle"> <h1 id="t"></h1> <br> <h2 id="h"></h2> </td> </table></body><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">~function dotime() { $("body").css({ "transition": "all 0.8s", "-webkit-transition": "all 0.8s" }); var d = new Date(); var hours = d.getHours(); var mins = d.getMinutes(); var secs = d.getSeconds(); //保证两位数显示 if (hours < 10) { hours = "0" + hours }; if (mins < 10) { mins = "0" + mins }; if (secs < 10) { secs = "0" + secs }; //转换成字符串 hours.toString(); mins.toString(); secs.toString(); var hex = "#" + hours + mins + secs; $("#t").html(hours + " : " + mins + " : " + secs); $("#h").html(hex); document.body.style.background = hex; setTimeout(function() { dotime(); }, 1000); $('.time-div').hide(5000);}();</script></html>