clock.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <html>
  2. <head>
  3. <title>PolarClock</title>
  4. <link type="text/css" rel="stylesheet" href="../ex.css"/>
  5. <script type="text/javascript" src="../../protovis-r3.2.js"></script>
  6. <style type="text/css">
  7. body {
  8. background: #222;
  9. }
  10. #fig {
  11. width: 768px;
  12. height: 768px;
  13. }
  14. #label {
  15. position: absolute;
  16. bottom: 10px;
  17. right: 10px;
  18. font: 10px sans-serif;
  19. color: #999;
  20. }
  21. #label a {
  22. color: #ccc;
  23. }
  24. </style>
  25. </head>
  26. <body><div id="center"><div id="fig">
  27. <script type="text/javascript+protovis">
  28. var radius = 768 / 2;
  29. /* Generate the fields for the given date. */
  30. function fields() {
  31. var d = new Date();
  32. function days() {
  33. return 32 - new Date(d.getYear(), d.getMonth(), 32).getDate();
  34. }
  35. var millis = d.getMilliseconds() / 1000;
  36. var second = (d.getSeconds() + millis) / 60;
  37. var minute = (d.getMinutes() + second) / 60;
  38. var hour = (d.getHours() + minute) / 24;
  39. var weekday = (d.getDay() + hour) / 7;
  40. var date = (d.getDate() - 1 + hour) / days();
  41. var month = (d.getMonth() + date) / 12;
  42. return [
  43. {value: second, index: .7, text: pv.Format.date("%S s")(d)},
  44. {value: minute, index: .6, text: pv.Format.date("%M m")(d)},
  45. {value: hour, index: .5, text: pv.Format.date("%H h")(d)},
  46. {value: weekday, index: .3, text: pv.Format.date("%a")(d)},
  47. {value: date, index: .2, text: pv.Format.date("%d d")(d)},
  48. {value: month, index: .1, text: pv.Format.date("%b")(d)}
  49. ];
  50. }
  51. var vis = new pv.Panel()
  52. .width(radius * 2)
  53. .height(radius * 2);
  54. vis.add(pv.Wedge)
  55. .data(fields)
  56. .left(radius)
  57. .bottom(radius)
  58. .innerRadius(function(d) radius * d.index)
  59. .outerRadius(function(d) radius * (d.index + .1))
  60. .startAngle(-Math.PI / 2)
  61. .angle(function(d) 2 * Math.PI * d.value)
  62. .fillStyle(function(d) "hsl(" + (360 * d.value - 180) + ", 50%, 50%)")
  63. .lineWidth(4)
  64. .strokeStyle("#222")
  65. .anchor("end").add(pv.Label)
  66. .font("bold 12px sans-serif")
  67. .textStyle("#000")
  68. .textMargin(7)
  69. .text(function(d) d.text);
  70. setInterval(function() vis.render(), 50);
  71. </script>
  72. </div></div>
  73. <div id="label">
  74. Inspired by <a href="http://blog.pixelbreaker.com/polarclock/">pixelbreaker</a>.
  75. </div>
  76. </body>
  77. </html>