Mercurial Hosting > luan
changeset 1285:fad40fe3282d
add personal web tools
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Wed, 26 Dec 2018 14:11:08 -0700 |
parents | 1b46c8e6c647 |
children | 9eb3a9724853 |
files | website/src/fschmidt/dimensions.html website/src/fschmidt/stopwatch.html |
diffstat | 2 files changed, 115 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/website/src/fschmidt/dimensions.html Wed Dec 26 14:11:08 2018 -0700 @@ -0,0 +1,19 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <script> + function p() { + document.body.innerText = '' + + window.innerWidth + 'px innerWidth\n' + + window.innerHeight + 'px innerHeight\n' + + '\n' + + window.outerWidth + 'px outerWidth\n' + + window.outerHeight + 'px outerHeight\n' + ; + } + </script> + </head> + <body onload="p()" onresize="p()"> + </body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/website/src/fschmidt/stopwatch.html Wed Dec 26 14:11:08 2018 -0700 @@ -0,0 +1,96 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + button { + cursor: pointer; + font-size: 1em; + border-radius: 6px; + display: none; + } + button:focus { + outline: inherit; + } + </style> + <script> + + function now() { + return Math.floor(Date.now()/1000); + } + + function showTime() { + var start = localStorage.start; + var time; + if( !start ) { + time = 0; + } else { + var stop = localStorage.stop || now(); + time = stop - start; + } + var seconds = time % 60; + time = Math.floor(time/60); + var minutes = time % 60; + time = Math.floor(time/60); + var hours = time; + seconds = ("0"+seconds).slice(-2); + minutes = ("0"+minutes).slice(-2); + time = hours + ":" + minutes + ":" + seconds; + document.querySelector('[time]').innerHTML = time; + } + + function fixButtons() { + var isRunning = localStorage.start && !localStorage.stop; + if( isRunning ) { + document.querySelector('[start]').style.display = 'none'; + document.querySelector('[stop]').style.display = 'inline-block'; + document.querySelector('[reset]').style.display = 'none'; + } else { + document.querySelector('[start]').style.display = 'inline-block'; + document.querySelector('[stop]').style.display = 'none'; + if( localStorage.start ) { + document.querySelector('[reset]').style.display = 'inline-block'; + } else { + document.querySelector('[reset]').style.display = 'none'; + } + } + } + + function start() { + var stop = localStorage.stop; + if( !stop ) { + localStorage.start = now(); + } else { + localStorage.removeItem("stop"); + localStorage.start = now() - (stop - localStorage.start); + } + fixButtons(); + } + + function stop() { + localStorage.stop = now(); + fixButtons(); + } + + function reset() { + localStorage.removeItem("start"); + localStorage.removeItem("stop"); + showTime(); + fixButtons(); + } + + function loaded() { + showTime(); + fixButtons(); + setInterval(showTime,1000); + } + + </script> + </head> + <body onload="loaded()"> + <h1 time></h1> + <button start onclick="start()">start</button> + <button stop onclick="stop()">stop</button> + <button reset onclick="reset()">reset</button> + </body> +</html>