经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript实现时钟特效
来源:jb51  时间:2022/6/21 12:20:48  对本文有异议

本文实例为大家分享了JavaScript实现时钟特效的具体代码,供大家参考,具体内容如下

简单时间实现:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function startTime()
  6. {
  7. var today=new Date()
  8. var h=today.getHours()
  9. var m=today.getMinutes()
  10. var s=today.getSeconds()
  11. // add a zero in front of numbers<10
  12. m=checkTime(m)
  13. s=checkTime(s)
  14. document.getElementById('txt').innerHTML=h+":"+m+":"+s
  15. t=setTimeout('startTime()',500)
  16. }
  17.  
  18. function checkTime(i)
  19. {
  20. if (i<10)?
  21. ? {i="0" + i}
  22. ? return i
  23. }
  24.  
  25. </script>
  26. </head>
  27. <body onload="startTime()">
  28. <div id="txt"></div>
  29.  
  30. </body>
  31. </html>

时钟特效代码:

  1. <!DOCTYPE html>
  2. <html>?
  3. <head>?
  4. <meta charset="utf8">?
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">?
  6. <meta name="keywords" content="clock">?
  7. <meta name="description" content="This is a clock">?
  8. <title>Clock</title>?
  9. </head>?
  10. <body>?
  11. <audio id="ticktock">?
  12. <source = src="ticktock.mp3" type="audio/mp3">?
  13. </audio>?
  14. <script type="text/javascript">?
  15. /* 年(y)可以用 1-4 个占位符 月(M)、日(d)、时(H,24时)、时(h,12时)、分(m)、秒(s)、季度(q)?
  16. 可以用 1-2 个占位符 毫秒(S)只能用 1 个占位符(是 1-3 位数字) ?
  17. AM或PM只能用 1 个占位符(是 2 位英文)?
  18. 上午或下午(T)只能用 1 个占位符(是 2 位中文)?
  19. 星期(E)可以用 1-3 个占位符 季度(q)
  20. 只能用 1 个占位符(是 1 位数字) */?
  21. Date.prototype.format = function(fmt) {?
  22. var map = { ?
  23. ? ? "M+" : this.getMonth() + 1,?
  24. ? ? //月 ?
  25. ? ? "d+" : this.getDate(),?
  26. ? ? //日 ?
  27. ? ? "H+" : this.getHours(),?
  28. ? ? //24时 ?
  29. ? ? /* ?上午12时只代表当天上午的12时,下午的12时代表当天下午的12时, ?
  30. ? ? 0时代表第二天的开始,即前面一天12时已过0时开始计算新一天的时间, ?
  31. ? ? 虽然说时间上跟前面那一天下午12时重合,但日期已经发生更改,所以不能说0时就是12时 ?*/?
  32. ? ? ?"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12,
  33. ? ? ?//12时 ?
  34. ? ? ?"m+" : this.getMinutes(),?
  35. ? ? ?//分 ?
  36. ? ? ?"s+" : this.getSeconds(),?
  37. ? ? ?//秒 ?
  38. ? ? ?"S" : this.getMilliseconds(),?
  39. ? ? ?//毫秒 ?
  40. ? ? ?"t" : this.getHours() < 12 ? "AM" : "PM", ?"T" : this.getHours() < 12 ? "上午" : "下午",?
  41. ?};?
  42. ?var week = { ?"0" : "日", ?"1" : "一", ?"2" : "二", ?"3" : "三", ?"4" : "四", ?"5" : "五", ?"6" : "六", }?
  43. ?var quarter = { ?"0" : "一", ?"1" : "二", ?"2" : "三", ?"3" : "四", }?
  44. ?if(/(y+)/.test(fmt)) { ?
  45. ? ? fmt = fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));?
  46. ?}?
  47. ?if(/(E+)/.test(fmt)) { ?
  48. ? ? ?var weekPreStr; ?
  49. ? ? ?switch(RegExp.$1.length) { ?
  50. ? ? ?case 1: ?weekPreStr = ""; ?
  51. ? ? ?break; ?
  52. ? ? ?case 2: ?weekPreStr = "周"; ?
  53. ? ? ?break; ?
  54. ? ? ?default: ?weekPreStr = "星期"; ?
  55. ? ? ?break; ?
  56. ?} ?
  57. ?fmt = fmt.replace(RegExp.$1, weekPreStr + week[this.getDay()]);?
  58. ?}?
  59. ?if(/(q)/.test(fmt)) { ?fmt = fmt.replace(RegExp.$1, quarter[Math.floor(this.getMonth() / 3)]); }?
  60. ? ? ?for(var key in map) { ?
  61. ? ? ? ? ?if(new RegExp("(" + key + ")").test(fmt)) { ?
  62. ? ? ? ? ?fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? map[key] : ("00" + map[key]).substr((map[key]+"").length)); ?
  63. ? ? ? ? ?}?
  64. ? ? ?}?
  65. return fmt;?
  66. ?}?
  67. ?</script>
  68. ?<script type="text/javascript">
  69. ?var canvas = document.createElement("canvas");?
  70. ?document.body.appendChild(canvas);?
  71. ?var ctx = canvas.getContext("2d");?
  72. ?var halfPI = Math.PI / 2;?
  73. ?var doublePI = Math.PI * 2;?
  74. ?//阴影级别?
  75. ?var shadowBlur = 10;?
  76. ?//阴影宽度?
  77. ?var shadowWidth = 10;?
  78. ?//阴影在X方向上的偏移?
  79. ?var shadowOffsetX = 5;?
  80. ?//阴影在Y方向上的便宜?
  81. ?var shadowOffsetY = 5;?
  82. ?//深色阴影?
  83. ?var shadowDarkColor = "rgba(0,0,0,0.8)";?
  84. ?//浅色阴影?
  85. ?var shadowLightColor = "rgba(0,0,0,0.1)";?
  86. ?//画布中心到边缘的内切圆半径?
  87. ?var canvasRadius = 250;?
  88. ?canvas.width = canvasRadius * 2;?
  89. ?canvas.height = canvasRadius * 2;?
  90. ?//获取画布中心的坐标?
  91. ?var cx = canvasRadius;?
  92. ?var cy = canvasRadius;?
  93. ?//时钟外圈的贝塞尔花纹个数?
  94. ?var bezierPatternCount = 10;?
  95. ?//时钟外圈的贝塞尔花纹波峰处半径?
  96. ?var bezierPeakRadius = canvasRadius - 10;?
  97. ?//时钟外圈的贝塞尔花纹一半的角度?
  98. ?var bezierHalfSpan = doublePI / bezierPatternCount / 2;?
  99. ?//时钟外圈的贝塞尔花纹底部半径?
  100. ?var bezierRadius = bezierPeakRadius - 20;?
  101. ?//时钟外圈的贝塞尔花纹颜色?
  102. ?var bezierPatternColor = "Plum";?
  103. ?//时钟外圈半径?
  104. ?var clockBorderRadius = bezierRadius - 10;?
  105. ?//时钟外圈宽度?
  106. ?var clockBorderWidth = 10;?
  107. ?//时钟外圈颜色?
  108. ?var clockBorderColor = "Aqua";?
  109. ?//时钟外圈阴影半径?
  110. ?var clockBorderShadowRadius = clockBorderRadius - shadowWidth + 1;?
  111. ?//时钟整数时间刻度线宽?
  112. ?var clockScaleWidth = 2;?
  113. ?//时钟整数时间刻度外半径?
  114. ?var clockScaleOuterRadius = clockBorderRadius - shadowWidth;?
  115. ?//时钟整数时间刻度内半径?
  116. ?var clockScaleInnerRadius = clockScaleOuterRadius - 20;?
  117. ?//时钟刻度颜色?
  118. ?var clockScaleColor = "Black";?
  119. ?//时钟非整数时间处半径?
  120. ?var clockScaleMiddleRadius = clockScaleOuterRadius - 10;?
  121. ?//时钟数字半径?
  122. ?var clockNumRadius = clockBorderShadowRadius - 40;?
  123. ?//时钟数字字体?
  124. ?var clockNumFont = "25px Arial";?
  125. ?//时钟数字颜色?
  126. ?var clockNumColor = "black";?
  127. ?//数字日期距中心的垂直距离?
  128. ?var digitalDateMarginCenter = 50;?
  129. ?//数字日期颜色?
  130. ?var digitalDateColor = "Black";?
  131. ?//数字日期字体?
  132. ?var digitalDateFont = "bold 18px Arial";?
  133. ?//数字时间距中心的垂直距离?
  134. ?var digitalTimeMarginCenter = 100;?
  135. ?//数字时间颜色?
  136. ?var digitalTimeColor = "white";?
  137. ?//数字时间背景颜色?
  138. ?var digitalTimeBgColor = "DarkSlateBlue";?
  139. ?//数字时间字体?
  140. ?var digitalTimeFont = "bold 25px Arial";?
  141. ?//数字时间高度的一半?
  142. ?var digitalTimeHeight = 40;?
  143. ?//数字时间分隔线宽度?
  144. ?var digitalTimeSpanLineWidth = 2;?
  145. ?//时钟中心点内圆的半径?
  146. ?var clockCenterInnerDotRadius = 7;?
  147. ?//时钟中心点内圆的颜色?
  148. ?var clockCenterInnerDotColor = "FireBrick";?
  149. ?//时钟中心点外圆的半径?
  150. ?var clockCenterOuterDotRadius = 10;?
  151. ?//时钟中心点外圆的颜色?
  152. ?var clockCenterOuterDotColor = "Maroon";?
  153. ?//时针线宽?
  154. ?var clockNeedleWidth = 5;?
  155. ?//时针半径?
  156. ?var clockHourNeedleRadius = clockBorderShadowRadius - 120;?
  157. ?//时针颜色?
  158. ?var clockHourNeedleColor = "DarkGreen";?
  159. ?//分针半径?
  160. ?var clockMinuteNeedleRadius = clockBorderShadowRadius - 80;?
  161. ?//分针颜色?
  162. ?var clockMinuteNeedleColor = "DarkSlateGray";?
  163. ?//秒针半径?
  164. ?var clockSecondNeedleRadius = clockBorderShadowRadius - 40;?
  165. ?//秒针尾部半径?
  166. ?var clockSecondNeedleBottomRadius = -20;?
  167. ?//秒针颜色?
  168. ?var clockSecondNeedleColor = "FireBrick";?
  169. ?//画圆环?
  170. ?function strokeCircle(cx, cy, r) { ctx.beginPath(); ctx.arc(cx, cy, r, 0, doublePI); ctx.stroke(); }?
  171. ?//画圆?
  172. ?function fillCircle(cx, cy, r) { ctx.beginPath(); ctx.arc(cx, cy, r, 0, doublePI); ctx.fill(); }?
  173. ?//绘制线条?
  174. ?function strokeLine(x1, y1, x2, y2) { ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); }?
  175. ?//根据角度和半径计算圆上相应位置的坐标(最右侧为起始角度,顺时针方向为正)?
  176. ?function circlePos(cx, cy, theta, radius) {?
  177. ? ? ?var pos = { ?x: cx + radius * Math.cos(theta), ?y: cy + radius * Math.sin(theta), };?
  178. ? ? ?return pos;?
  179. ?}?
  180. ?//在圆环上绘制刻度线?
  181. ?function strokeCircleLine(cx, cy, theta, r1, r2) {?
  182. ? ? ?var pos1 = circlePos(cx, cy, theta, r1);?
  183. ? ? ?var pos2 = circlePos(cx, cy, theta, r2);?
  184. ? ? ?strokeLine(pos1.x, pos1.y, pos2.x, pos2.y);?
  185. ?}?
  186. ?//设置默认阴影?
  187. ?function setShadow(type) {?
  188. ? ? ?ctx.lineWidth = shadowWidth;?
  189. ? ? ?ctx.shadowBlur = shadowBlur;?
  190. ? ? ?ctx.shadowOffsetX = shadowOffsetX;?
  191. ? ? ?ctx.shadowOffsetY = shadowOffsetY;?
  192. ? ? ?if(type === 1) { ?
  193. ? ? ?ctx.shadowColor = shadowLightColor;?
  194. ? ? ?} else { ?
  195. ? ? ?ctx.shadowColor = shadowDarkColor;?
  196. ? ? ?}?
  197. ?}?
  198. ?//取消阴影?
  199. ?function clearShadow() {?
  200. ? ? ?ctx.shadowColor = "rgba(0,0,0,0)";?
  201. ? ? ?ctx.shadowBlur = 0;?
  202. ? ? ?ctx.shadowOffsetX = 0;?
  203. ? ? ?ctx.shadowOffsetY = 0;?
  204. ?}?
  205. ?//绘制时钟外圈的贝塞尔花纹?
  206. ?function renderBezierPattern() {?
  207. ? ? ?ctx.fillStyle = bezierPatternColor;?
  208. ? ? ?ctx.beginPath();?
  209. ? ? ?var theta = 0;?
  210. ? ? ?//由于circlePos是顺时针方向正, 故圈也是顺时针方向?
  211. ? ? ?var beginPos = circlePos(cx, cy, theta, bezierRadius);?
  212. ? ? ?ctx.moveTo(beginPos.x, beginPos.y);?
  213. ? ? ?while(theta < doublePI) { ?
  214. ? ? ?//贝塞尔曲线控制点 ?
  215. ? ? ?var controlTheta = theta + bezierHalfSpan; ?
  216. ? ? ?var controlPos = circlePos(cx, cy, controlTheta, bezierPeakRadius); ?
  217. ? ? ?//贝塞尔曲线终止点 ?
  218. ? ? ?var endTheta = controlTheta + bezierHalfSpan; ?
  219. ? ? ?var endPos = circlePos(cx, cy, endTheta, bezierRadius); ?
  220. ? ? ?ctx.quadraticCurveTo(controlPos.x, controlPos.y, endPos.x, endPos.y); ?
  221. ? ? ?theta = endTheta;
  222. ? ? ?}?
  223. ? ? ?//绘制圆counterclockwise=false, 即默认是顺时针方向?
  224. ? ? ?ctx.arc(cx, cy, clockBorderRadius, 0, doublePI, true);?
  225. ? ? ?//注意: 两个相反方向的路径内部为填充范围?
  226. ? ? ?ctx.fill();?
  227. ?}?
  228. ?//绘制时钟边框?
  229. ?function renderClockBorder() {?
  230. ? ? ?//画外框?
  231. ? ? ?ctx.strokeStyle = clockBorderColor;?
  232. ? ? ?ctx.lineWidth = clockBorderWidth;?
  233. ? ? ?strokeCircle(cx, cy, clockBorderRadius);?
  234. ? ? ?//画外框的内阴影?
  235. ? ? ?ctx.strokeStyle = shadowLightColor;?
  236. ? ? ?setShadow(1); strokeCircle(cx, cy, clockBorderShadowRadius);?
  237. ? ? ?clearShadow();?
  238. ?}?
  239. ?//绘制时钟圆周上的数字和刻度部分?
  240. ?function renderClockNums() { ?
  241. ? ? ?ctx.textAlign = "center";?
  242. ? ? ?ctx.textBaseline = "middle";?
  243. ? ? ?ctx.font = clockNumFont; var span = doublePI / 60;?
  244. ? ? ?for(var i = 1, radian = -halfPI + span; i <= 60; i++, radian += span) { ?if(i % 5 == 0) { ?
  245. ? ? ? ? ?//绘制刻度 ?
  246. ? ? ? ? ?ctx.strokeStyle = clockScaleColor; ?
  247. ? ? ? ? ?ctx.lineWidth = clockScaleWidth; ?
  248. ? ? ? ? ?strokeCircleLine(cx, cy, radian, clockScaleInnerRadius, clockScaleOuterRadius); ?
  249. ? ? ? ? ?//绘制数字 ?
  250. ? ? ? ? ?var pos = circlePos(cx, cy, radian, clockNumRadius); ?var num = i / 5; ?
  251. ? ? ? ? ?ctx.fillStyle = clockNumColor; ?ctx.fillText(num, pos.x, pos.y); ?
  252. ? ? ? ? ?} else { ?
  253. ? ? ? ? ?ctx.strokeStyle = clockScaleColor; ?
  254. ? ? ? ? ?ctx.lineWidth = clockScaleWidth; ?
  255. ? ? ? ? ?strokeCircleLine(cx, cy, radian, clockScaleMiddleRadius, clockScaleOuterRadius);
  256. ? ? ? ? ?}?
  257. ? ? ?}?
  258. ?}?
  259. ?//绘制数字时钟?
  260. ?function renderDigital(date) {?
  261. ? ? ?//绘制日期?
  262. ? ? ?ctx.textAlign = "center";?
  263. ? ? ?ctx.textBaseline = "middle";?
  264. ? ? ?ctx.font = digitalDateFont;?
  265. ? ? ?ctx.fillStyle = digitalDateColor;?
  266. ? ? ?var text = date.format("yyyy年MM月dd日 EEE");?
  267. ? ? ?ctx.fillText(text, cx, cy + digitalDateMarginCenter);?
  268. ? ? ?//绘制时间?
  269. ? ? ?ctx.font = digitalTimeFont; text = date.format(" HH mm ss ");?
  270. ? ? ?ctx.fillStyle = digitalTimeBgColor; var textWidth = ctx.measureText(text).width;?
  271. ? ? ?var textBgX = cx - textWidth / 2;?
  272. ? ? ?var textBgY = cy + digitalTimeMarginCenter - digitalTimeHeight / 2;?
  273. ? ? ?ctx.fillRect(textBgX, textBgY, textWidth, digitalTimeHeight);?
  274. ? ? ?ctx.fillStyle = digitalTimeColor;?
  275. ? ? ?ctx.fillText(text, cx, cy + digitalTimeMarginCenter);?
  276. ? ? ?//绘制事件中间的分隔线?
  277. ? ? ?ctx.lineWidth = digitalTimeSpanLineWidth;?
  278. ? ? ?ctx.strokeStyle = digitalTimeColor;?
  279. ? ? ?var textSpan = textWidth / 6;?
  280. ? ? ?var leftLineX = cx - textSpan;?
  281. ? ? ?strokeLine(leftLineX, textBgY, leftLineX, textBgY + digitalTimeHeight);?
  282. ? ? ?var rightLineX = cx + textSpan; strokeLine(rightLineX, textBgY, rightLineX, textBgY + digitalTimeHeight);?
  283. ?}?
  284. ?//绘制时钟中心最下方红点?
  285. ?function renderClockCenterOuterDot() {?
  286. ? ? ctx.fillStyle = clockCenterOuterDotColor; fillCircle(cx, cy, clockCenterOuterDotRadius);?
  287. ?}?
  288. ?//绘制时钟中心最上方红点?
  289. ?function renderClockCenterInnerDot() {?
  290. ? ? ctx.fillStyle = clockCenterInnerDotColor; fillCircle(cx, cy, clockCenterInnerDotRadius);?
  291. ?}?
  292. ?//绘制时钟指针?
  293. ?function renderClockNeedle(date) {?
  294. ? ? ?var hourRadian = date.getHours() % 12 / 12 * doublePI - halfPI;?
  295. ? ? ?var minuteRadian = date.getMinutes() / 60 * doublePI - halfPI;?
  296. ? ? ?var secondRadian = date.getSeconds() / 60 * doublePI - halfPI;?
  297. ? ? ?setShadow();?
  298. ? ? ?ctx.lineCap = "round";?
  299. ? ? ?ctx.lineWidth = clockNeedleWidth;?
  300. ? ? ?ctx.strokeStyle = clockHourNeedleColor;?
  301. ? ? ?strokeCircleLine(cx, cy, hourRadian, 0, clockHourNeedleRadius);?
  302. ? ? ?ctx.strokeStyle = clockMinuteNeedleColor;?
  303. ? ? ?strokeCircleLine(cx, cy, minuteRadian, 0, clockMinuteNeedleRadius);?
  304. ? ? ?ctx.strokeStyle = clockSecondNeedleColor;?
  305. ? ? ?strokeCircleLine(cx, cy, secondRadian, clockSecondNeedleBottomRadius, clockSecondNeedleRadius);?
  306. ? ? ?ctx.lineCap = "square";?
  307. ? ? ?clearShadow();?
  308. ?}?
  309. ?function render(date) {?
  310. ? ? ?ctx.clearRect(0, 0, canvas.width, canvas.height);?
  311. ? ? ?renderBezierPattern();?
  312. ? ? ?renderClockBorder();?
  313. ? ? ?renderClockNums();?
  314. ? ? ?renderDigital(date);?
  315. ? ? ?renderClockCenterOuterDot();?
  316. ? ? ?renderClockNeedle(date);?
  317. ? ? ?renderClockCenterInnerDot();?
  318. ?}?
  319. ?var lastTime = 0;?
  320. ?var audio = document.getElementById("ticktock");?
  321. ?function loop() {?
  322. ? ? ?var date = new Date();?
  323. ? ? ?var currentTime = date.getTime();?
  324. ? ? ?if(currentTime - lastTime >= 1000) { ?
  325. ? ? ?lastTime = currentTime; ?
  326. ? ? ?//注意:这里设0非常关键,否则虽然会循环播放,但会从上一次暂停的地方开始播放,造成延迟 ?
  327. ? ? ?audio.currentTime = 0; ?
  328. ? ? ?audio.play(); ?
  329. ? ? ?render(date);?
  330. ? ? ?}?
  331. ? ? ?requestAnimationFrame(loop);?
  332. ?}?
  333. ?loop();?
  334. ?</script>?
  335. ?</body>
  336. ?</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号