Clock.js
上传用户:kimgenplus
上传日期:2016-06-05
资源大小:20877k
文件大小:5k
源码类别:

OA系统

开发平台:

Java

  1. /*
  2. Copyright (c) 2004-2006, The Dojo Foundation
  3. All Rights Reserved.
  4. Licensed under the Academic Free License version 2.1 or above OR the
  5. modified BSD license. For more information on Dojo licensing, see:
  6. http://dojotoolkit.org/community/licensing.shtml
  7. */
  8. dojo.provide("dojo.widget.Clock");
  9. dojo.require("dojo.widget.*");
  10. dojo.require("dojo.gfx.*");
  11. dojo.require("dojo.uri.Uri");
  12. dojo.require("dojo.lang.common");
  13. dojo.require("dojo.lang.timing.Timer");
  14. dojo.widget.defineWidget("dojo.widget.Clock", dojo.widget.HtmlWidget, function () {
  15. var self = this;
  16. this.timeZoneOffset = 0;
  17. this.label = "";
  18. this.date = new Date();
  19. this.handColor = "#788598";
  20. this.handStroke = "#6f7b8c";
  21. this.secondHandColor = [201, 4, 5, 0.8];
  22. this.topLabelColor = "#efefef";
  23. this.labelColor = "#fff";
  24. this.timer = new dojo.lang.timing.Timer(1000);
  25. this.center = {x:75, y:75};
  26. this.hands = {hour:null, minute:null, second:null};
  27. this.shadows = {hour:{shadow:null, shift:{dx:2, dy:2}}, minute:{shadow:null, shift:{dx:2, dy:3}}, second:{shadow:null, shift:{dx:4, dy:4}}};
  28. this.image = dojo.uri.moduleUri("dojo.widget", "templates/images/clock.png");
  29. this.surface = null;
  30. this.labelNode = null;
  31. this.topLabelNode = null;
  32. this.draw = function () {
  33. self.date = new Date();
  34. var h = (self.date.getHours() + self.timeZoneOffset) % 12;
  35. var m = self.date.getMinutes();
  36. var s = self.date.getSeconds();
  37. self.placeHour(h, m, s);
  38. self.placeMinute(m, s);
  39. self.placeSecond(s);
  40. self.topLabelNode.innerHTML = ((self.date.getHours() + self.timeZoneOffset) > 11) ? "PM" : "AM";
  41. };
  42. this.timer.onTick = self.draw;
  43. }, {set:function (dt) {
  44. this.date = dt;
  45. if (!this.timer.isRunning) {
  46. this.draw();
  47. }
  48. }, start:function () {
  49. this.timer.start();
  50. }, stop:function () {
  51. this.timer.stop();
  52. }, _initPoly:function (parent, points) {
  53. var path = parent.createPath();
  54. var first = true;
  55. dojo.lang.forEach(points, function (c) {
  56. if (first) {
  57. path.moveTo(c.x, c.y);
  58. first = false;
  59. } else {
  60. path.lineTo(c.x, c.y);
  61. }
  62. });
  63. return path;
  64. }, _placeHand:function (shape, angle, shift) {
  65. var move = {dx:this.center.x + (shift ? shift.dx : 0), dy:this.center.y + (shift ? shift.dy : 0)};
  66. return shape.setTransform([move, dojo.gfx.matrix.rotateg(-angle)]);
  67. }, placeHour:function (h, m, s) {
  68. var angle = 30 * (h + m / 60 + s / 3600);
  69. this._placeHand(this.hands.hour, angle);
  70. this._placeHand(this.shadows.hour.shadow, angle, this.shadows.hour.shift);
  71. }, placeMinute:function (m, s) {
  72. var angle = 6 * (m + s / 60);
  73. this._placeHand(this.hands.minute, angle);
  74. this._placeHand(this.shadows.minute.shadow, angle, this.shadows.minute.shift);
  75. }, placeSecond:function (s) {
  76. var angle = 6 * s;
  77. this._placeHand(this.hands.second, angle);
  78. this._placeHand(this.shadows.second.shadow, angle, this.shadows.second.shift);
  79. }, init:function () {
  80. if (this.domNode.style.position != "absolute") {
  81. this.domNode.style.position = "relative";
  82. }
  83. while (this.domNode.childNodes.length > 0) {
  84. this.domNode.removeChild(this.domNode.childNodes[0]);
  85. }
  86. this.domNode.style.width = "150px";
  87. this.domNode.style.height = "150px";
  88. this.surface = dojo.gfx.createSurface(this.domNode, 150, 150);
  89. this.surface.createRect({width:150, height:150});
  90. this.surface.createImage({width:150, height:150, src:this.image + ""});
  91. var hP = [{x:-3, y:-4}, {x:3, y:-4}, {x:1, y:-27}, {x:-1, y:-27}, {x:-3, y:-4}];
  92. var mP = [{x:-3, y:-4}, {x:3, y:-4}, {x:1, y:-38}, {x:-1, y:-38}, {x:-3, y:-4}];
  93. var sP = [{x:-2, y:-2}, {x:2, y:-2}, {x:1, y:-45}, {x:-1, y:-45}, {x:-2, y:-2}];
  94. this.shadows.hour.shadow = this._initPoly(this.surface, hP).setFill([0, 0, 0, 0.1]);
  95. this.hands.hour = this._initPoly(this.surface, hP).setStroke({color:this.handStroke, width:1}).setFill({type:"linear", x1:0, y1:0, x2:0, y2:-27, colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]});
  96. this.shadows.minute.shadow = this._initPoly(this.surface, mP).setFill([0, 0, 0, 0.1]);
  97. this.hands.minute = this._initPoly(this.surface, mP).setStroke({color:this.handStroke, width:1}).setFill({type:"linear", x1:0, y1:0, x2:0, y2:-38, colors:[{offset:0, color:"#fff"}, {offset:0.33, color:this.handColor}]});
  98. this.surface.createCircle({r:6}).setStroke({color:this.handStroke, width:2}).setFill("#fff").setTransform({dx:75, dy:75});
  99. this.shadows.second.shadow = this._initPoly(this.surface, sP).setFill([0, 0, 0, 0.1]);
  100. this.hands.second = this._initPoly(this.surface, sP).setFill(this.secondHandColor);
  101. this.surface.createCircle({r:4}).setFill(this.secondHandColor).setTransform({dx:75, dy:75});
  102. this.topLabelNode = document.createElement("div");
  103. with (this.topLabelNode.style) {
  104. position = "absolute";
  105. top = "3px";
  106. left = "0px";
  107. color = this.topLabelColor;
  108. textAlign = "center";
  109. width = "150px";
  110. fontFamily = "sans-serif";
  111. fontSize = "11px";
  112. textTransform = "uppercase";
  113. fontWeight = "bold";
  114. }
  115. this.topLabelNode.innerHTML = ((this.date.getHours() + this.timeZoneOffset) > 11) ? "PM" : "AM";
  116. this.domNode.appendChild(this.topLabelNode);
  117. this.labelNode = document.createElement("div");
  118. with (this.labelNode.style) {
  119. position = "absolute";
  120. top = "134px";
  121. left = "0px";
  122. color = this.labelColor;
  123. textAlign = "center";
  124. width = "150px";
  125. fontFamily = "sans-serif";
  126. fontSize = "10px";
  127. textTransform = "uppercase";
  128. fontWeight = "bold";
  129. }
  130. this.labelNode.innerHTML = this.label || " ";
  131. this.domNode.appendChild(this.labelNode);
  132. this.draw();
  133. }, postCreate:function () {
  134. this.init();
  135. this.start();
  136. }});