Mercurial > hg > index.fcgi > www > www-1
diff clock/index.html @ 62:a1b1713cbda2
add clock (initial version)
| author | paulo |
|---|---|
| date | Thu, 21 Aug 2014 00:18:52 -0700 |
| parents | |
| children | 1913f36338b4 |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/clock/index.html Thu Aug 21 00:18:52 2014 -0700 1.3 @@ -0,0 +1,163 @@ 1.4 +<!DOCTYPE html> 1.5 +<meta charset="utf-8"> 1.6 + 1.7 + 1.8 +<style> 1.9 + 1.10 +body { 1.11 + background-color: #FFF; 1.12 +} 1.13 + 1.14 +text.digital { 1.15 + font-family: sans-serif; 1.16 + fill: #777; 1.17 +} 1.18 + 1.19 +.analog.seconds { 1.20 + fill: #CCC; 1.21 +} 1.22 + 1.23 +.analog.minutes { 1.24 + fill: #AAA; 1.25 +} 1.26 + 1.27 +.analog.hours { 1.28 + fill: #999; 1.29 +} 1.30 + 1.31 +.analog.past { 1.32 + fill: #EEE; 1.33 +} 1.34 + 1.35 +</style> 1.36 + 1.37 + 1.38 +<script src="d3.min.js"></script> 1.39 + 1.40 + 1.41 +<svg></svg> 1.42 + 1.43 + 1.44 +<script> 1.45 + 1.46 +var TAU = 2*Math.PI; 1.47 +var margin = 10; 1.48 + 1.49 +var minutes_seconds_scale = d3.scale.linear() 1.50 + .domain([0, 60]) 1.51 + .range([0, TAU]); 1.52 + 1.53 +var hours_scale = d3.scale.linear() 1.54 + .domain([0, 24]) 1.55 + .range([0, TAU]); 1.56 + 1.57 +var tf = function(x) { return d3.format("02d")(Math.floor(x)) }; 1.58 + 1.59 +var render = function() { 1.60 + var ct = new Date(); 1.61 + var milliseconds = ct.getMilliseconds(); 1.62 + var seconds = ct.getSeconds() + (milliseconds/1000.0); 1.63 + var minutes = ct.getMinutes() + (seconds/60.0); 1.64 + var hours = ct.getHours() + (minutes/60.0); 1.65 + 1.66 + var r = (Math.min(window.innerWidth, window.innerHeight)/2) - margin; 1.67 + 1.68 + var or_seconds = r; 1.69 + var ir_seconds = r*0.75; 1.70 + 1.71 + var or_minutes = r*0.7; 1.72 + var ir_minutes = r*0.45; 1.73 + 1.74 + var or_hours = r*0.4; 1.75 + var ir_hours = r*0.15; 1.76 + 1.77 + var digital_text_scale = 0.75; 1.78 + 1.79 + var svg = d3.select("svg") 1.80 + .attr("width", 2*(r + margin)) 1.81 + .attr("height", 2*(r + margin)); 1.82 + 1.83 + svg.selectAll("g").remove(); 1.84 + 1.85 + svg = svg.append("g") 1.86 + .attr("transform", "translate(" + margin + "," + margin + ")"); 1.87 + 1.88 + //svg.append("text") 1.89 + // .text(d3.time.format("%X")(ct)); 1.90 + 1.91 + var c = svg.append("g") 1.92 + .attr("transform", "translate(" + r + "," + r + ")"); 1.93 + 1.94 + c.append("path") 1.95 + .attr("class", "analog seconds") 1.96 + .attr("d", d3.svg.arc() 1.97 + .outerRadius(or_seconds) 1.98 + .innerRadius(ir_seconds) 1.99 + .startAngle(0) 1.100 + .endAngle(minutes_seconds_scale(seconds)) 1.101 + ); 1.102 + c.append("path") 1.103 + .attr("class", "analog seconds past") 1.104 + .attr("d", d3.svg.arc() 1.105 + .outerRadius(or_seconds) 1.106 + .innerRadius(ir_seconds) 1.107 + .startAngle(minutes_seconds_scale(seconds)) 1.108 + .endAngle(TAU) 1.109 + ); 1.110 + c.append("text") 1.111 + .attr("class", "digital") 1.112 + .attr("x", ir_seconds) 1.113 + .attr("font-size", (or_seconds - ir_seconds)*digital_text_scale + "px") 1.114 + .text(tf(seconds)); 1.115 + 1.116 + c.append("path") 1.117 + .attr("class", "analog minutes") 1.118 + .attr("d", d3.svg.arc() 1.119 + .outerRadius(or_minutes) 1.120 + .innerRadius(ir_minutes) 1.121 + .startAngle(0) 1.122 + .endAngle(minutes_seconds_scale(minutes)) 1.123 + ); 1.124 + c.append("path") 1.125 + .attr("class", "analog minutes past") 1.126 + .attr("d", d3.svg.arc() 1.127 + .outerRadius(or_minutes) 1.128 + .innerRadius(ir_minutes) 1.129 + .startAngle(minutes_seconds_scale(minutes)) 1.130 + .endAngle(TAU) 1.131 + ); 1.132 + c.append("text") 1.133 + .attr("class", "digital") 1.134 + .attr("x", ir_minutes) 1.135 + .attr("font-size", (or_minutes - ir_minutes)*digital_text_scale + "px") 1.136 + .text(tf(minutes)); 1.137 + 1.138 + c.append("path") 1.139 + .attr("class", "analog hours") 1.140 + .attr("d", d3.svg.arc() 1.141 + .outerRadius(or_hours) 1.142 + .innerRadius(ir_hours) 1.143 + .startAngle(0) 1.144 + .endAngle(hours_scale(hours)) 1.145 + ); 1.146 + c.append("path") 1.147 + .attr("class", "analog hours past") 1.148 + .attr("d", d3.svg.arc() 1.149 + .outerRadius(or_hours) 1.150 + .innerRadius(ir_hours) 1.151 + .startAngle(hours_scale(hours)) 1.152 + .endAngle(TAU) 1.153 + ); 1.154 + c.append("text") 1.155 + .attr("class", "digital") 1.156 + .attr("x", ir_hours) 1.157 + .attr("font-size", (or_hours - ir_hours)*digital_text_scale + "px") 1.158 + .text(tf(hours)); 1.159 + 1.160 + 1.161 +} 1.162 + 1.163 +window.setInterval(render, 1000); 1.164 + 1.165 + 1.166 +</script>