CSS3+JS实现简单的时钟特效

悲酥清风
悲酥清风
悲酥清风
826
文章
55
评论
CSS1 3,308,439阅读模式

本文给大家分享的是使用CSS3结合js实现简单的时钟特效的代码，主要是使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果的，这里推荐给大家，希望大家能够喜欢。

学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：

准备前期工作，把时钟的表盘，时分秒针，实时时间标签 的大概样子做好，效果如图：CSS3+JS实现简单的时钟特效
html代码如下：

  1. <div class="main">
  2. <div id="timeLabel"></div>
  3. <div id="hour"></div>
  4. <div id="minute"></div>
  5. <div id="second"></div>
  6. </div>

css 代码如下：

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .main {
  7. position: relative;
  8. margin: 100px auto;
  9. width: 300px;
  10. height: 300px;
  11. border-radius: 300px;
  12. border: 1px solid #000;
  13. box-shadow:2px 5px;
  14. }
  15. #timeLabel {
  16. position: absolute;
  17. background-color:pink;
  18. width:100px;
  19. height:30px;
  20. left:100px;
  21. top:180px;
  22. }
  23. #hour {
  24. width: 100px;
  25. height: 10px;
  26. background-color: red;
  27. position:absolute;
  28. left:150px;
  29. top:145px;
  30. }
  31. #minute {
  32. width:120px;
  33. height:8px;
  34. background-color:blue;
  35. position:absolute;
  36. left:150px;
  37. top:146px;
  38. }
  39. #second {
  40. width: 140px;
  41. height: 4px;
  42. background-color: green;
  43. position: absolute;
  44. left: 150px;
  45. top: 148px;
  46. }
  47. </style>

2. 初始化默认时间，和表盘刻度 ，效果如下：CSS3+JS实现简单的时钟特效
更改后的css代码：

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .main {
  7. position: relative;
  8. margin: 100px auto;
  9. width: 300px;
  10. height: 300px;
  11. border-radius: 300px;
  12. border: 1px solid #000;
  13. box-shadow: 2px 5px #808080;
  14. }
  15. #timeLabel {
  16. position: absolute;
  17. background-color: pink;
  18. width: 80px;
  19. height: 25px;
  20. left: 110px;
  21. top: 180px;
  22. color: #fff;
  23. line-height: 25px;
  24. text-align: center;
  25. }
  26. #hour {
  27. width: 100px;
  28. height: 10px;
  29. background-color: red;
  30. position: absolute;
  31. left: 150px;
  32. top: 145px;
  33. transform-origin: 0 50%;
  34. }
  35. #minute {
  36. width: 120px;
  37. height: 8px;
  38. background-color: blue;
  39. position: absolute;
  40. left: 150px;
  41. top: 146px;
  42. transform-origin: 0 50%;
  43. }
  44. #second {
  45. width: 140px;
  46. height: 4px;
  47. background-color: green;
  48. position: absolute;
  49. left: 150px;
  50. top: 148px;
  51. transform-origin: 0 50%;
  52. }
  53. .hourPointer, .minuterPointer, .secondPointer {
  54. position: absolute;
  55. transform-origin: 0 50%;
  56. }
  57. .hourPointer {
  58. height: 10px;
  59. width: 12px;
  60. left: 150px;
  61. top: 145px;
  62. background-color: #f00;
  63. z-index:3;
  64. }
  65. .minuterPointer {
  66. height: 8px;
  67. width: 10px;
  68. left: 150px;
  69. top: 146px;
  70. background-color: #b6ff00;
  71. z-index: 2;
  72. }
  73. .secondPointer {
  74. height: 6px;
  75. width: 8px;
  76. left: 150px;
  77. top: 147px;
  78. background-color: #fa8;
  79. z-index: 1;
  80. }
  81. </style>

初始化 js代码：

  1. window.onload = function () {
  2. initClock();
  3. }
  4. var timer = null;
  5. function $(id) {
  6. return document.getElementById(id)
  7. }
  8. function CreateKeDu(pElement, className, deg, translateWidth) {
  9. var Pointer = document.createElement("div");
  10. Pointer.className = className
  11. Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
  12. pElement.appendChild(Pointer);
  13. }
  14. function initClock() {
  15. var main = $("biaopan");
  16. var timeLabel = $("timeLabel");
  17. var hour = $("hour");
  18. var minute = $("minute");
  19. var second = $("second");
  20. var now = new Date();
  21. var nownowHour = now.getHours();
  22. var nownowMinute = now.getMinutes();
  23. var nownowSecond = now.getSeconds();
  24. //初始化timeLabel
  25. timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
  26. //初始化表盘
  27. for (var index = 0; index < 4; index++) {
  28. CreateKeDu(main, "hourPointer", index * 90, 138);
  29. }
  30. for (var index = 0; index < 12; index++) {
  31. CreateKeDu(main, "minuterPointer",index*30, 140);
  32. }
  33. for (var index = 0; index < 60; index++) {
  34. CreateKeDu(main, "secondPointer", index * 6, 142);
  35. }
  36. //初始化时分秒针
  37. second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";
  38. minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";
  39. hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";
  40. }

3.添加定时器：

js代码如下：

  1. //定时器
  2. function startMove() {
  3. clearInterval(timer);
  4. timer = setInterval(function () {
  5. var now = new Date();
  6. var nowSecond = now.getSeconds();
  7. var nowMinute = now.getMinutes();
  8. var nowHour = now.getHours();
  9. second.style.transform = "rotate(" + (nowSecond * 6 - 90) + "deg)";
  10. minute.style.transform = "rotate(" + (nowMinute * 6 + 1 / 10 * nowSecond - 90) + "deg)";
  11. hour.style.transform = "rotate(" + (nowHour * 30 + 1 / 2 * nowMinute + 1 / 120 * nowSecond - 90) + "deg)";
  12. timeLabel.innerHTML = nowHour + ":" + nowMinute + ":" + nowSecond;
  13. }, 1000);
  14. }

4.使用OOP方式更改：

修改后的js代码如下：

  1. function Clock() {
  2. //定义属性
  3. this.main = this.$("biaopan");
  4. this.timeLabel = this.$("timeLabel");
  5. this.hour = this.$("hour");
  6. this.minute = this.$("minute");
  7. this.second = this.$("second");
  8. this.nowHour = null;
  9. this.nowMinute = null;
  10. this.nowSecond = null;
  11. this.timer = null;
  12. var _this = this;
  13. //初始化函数
  14. var init = function () {
  15. _this.getNowTime();
  16. _this.initClock();
  17. _this.InterVal();
  18. }
  19. init();
  20. }
  21. Clock.prototype.$ = function (id) {
  22. return document.getElementById(id)
  23. }
  24. Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
  25. var Pointer = document.createElement("div");
  26. Pointer.className = className
  27. Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
  28. this.main.appendChild(Pointer);
  29. }
  30. Clock.prototype.getNowTime = function () {
  31. var now = new Date();
  32. this.nowHour = now.getHours();
  33. this.nowMinute = now.getMinutes();
  34. this.nowSecond = now.getSeconds();
  35. }
  36. Clock.prototype.setPosition = function () {
  37. this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";
  38. this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";
  39. this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";
  40. }
  41. Clock.prototype.initClock = function () {
  42. //初始化timeLabel
  43. this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;
  44. //初始化表盘
  45. for (var index = 0; index < 4; index++) {
  46. this.CreateKeDu("hourPointer", index * 90, 138);
  47. }
  48. for (var index = 0; index < 12; index++) {
  49. this.CreateKeDu("minuterPointer", index * 30, 140);
  50. }
  51. for (var index = 0; index < 60; index++) {
  52. this.CreateKeDu("secondPointer", index * 6, 142);
  53. }
  54. this.setPosition();
  55. }
  56. Clock.prototype.InterVal = function () {
  57. clearInterval(this.timer);
  58. var _this = this;
  59. this.timer = setInterval(function () {
  60. _this.getNowTime();
  61. _this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";
  62. _this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";
  63. _this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";
  64. _this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;
  65. }, 1000);
  66. }

最后调用如下：

  1. window.onload = function () {
  2. new Clock();
  3. }

最终页面代码：

  1. <!DOCTYPE html>
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. .main {
  12. position: relative;
  13. margin: 100px auto;
  14. width: 300px;
  15. height: 300px;
  16. border-radius: 300px;
  17. border: 1px solid #000;
  18. box-shadow: 2px 5px #808080;
  19. }
  20. #timeLabel {
  21. position: absolute;
  22. background-color: pink;
  23. width: 80px;
  24. height: 25px;
  25. left: 110px;
  26. top: 180px;
  27. color: #fff;
  28. line-height: 25px;
  29. text-align: center;
  30. }
  31. #hour {
  32. width: 100px;
  33. height: 10px;
  34. background-color: red;
  35. position: absolute;
  36. left: 150px;
  37. top: 145px;
  38. transform-origin: 0 50%;
  39. }
  40. #minute {
  41. width: 120px;
  42. height: 8px;
  43. background-color: blue;
  44. position: absolute;
  45. left: 150px;
  46. top: 146px;
  47. transform-origin: 0 50%;
  48. }
  49. #second {
  50. width: 140px;
  51. height: 4px;
  52. background-color: green;
  53. position: absolute;
  54. left: 150px;
  55. top: 148px;
  56. transform-origin: 0 50%;
  57. }
  58. .hourPointer, .minuterPointer, .secondPointer {
  59. position: absolute;
  60. transform-origin: 0 50%;
  61. }
  62. .hourPointer {
  63. height: 10px;
  64. width: 12px;
  65. left: 150px;
  66. top: 145px;
  67. background-color: #f00;
  68. z-index: 3;
  69. }
  70. .minuterPointer {
  71. height: 8px;
  72. width: 10px;
  73. left: 150px;
  74. top: 146px;
  75. background-color: #b6ff00;
  76. z-index: 2;
  77. }
  78. .secondPointer {
  79. height: 6px;
  80. width: 8px;
  81. left: 150px;
  82. top: 147px;
  83. background-color: #fa8;
  84. z-index: 1;
  85. }
  86. </style>
  87. <script>
  88. function Clock() {
  89. //定义属性
  90. this.main = this.$("biaopan");
  91. this.timeLabel = this.$("timeLabel");
  92. this.hour = this.$("hour");
  93. this.minute = this.$("minute");
  94. this.second = this.$("second");
  95. this.nowHour = null;
  96. this.nowMinute = null;
  97. this.nowSecond = null;
  98. this.timer = null;
  99. var _this = this;
  100. //初始化函数
  101. var init = function () {
  102. _this.getNowTime();
  103. _this.initClock();
  104. _this.InterVal();
  105. }
  106. init();
  107. }
  108. Clock.prototype.$ = function (id) {
  109. return document.getElementById(id)
  110. }
  111. Clock.prototype.CreateKeDu = function (className, deg, translateWidth) {
  112. var Pointer = document.createElement("div");
  113. Pointer.className = className
  114. Pointer.style.transform = "rotate(" + deg + "deg) translate(" + translateWidth + "px)";
  115. this.main.appendChild(Pointer);
  116. }
  117. Clock.prototype.getNowTime = function () {
  118. var now = new Date();
  119. this.nowHour = now.getHours();
  120. this.nowMinute = now.getMinutes();
  121. this.nowSecond = now.getSeconds();
  122. }
  123. Clock.prototype.setPosition = function () {
  124. this.second.style.transform = "rotate(" + (this.nowSecond * 6 - 90) + "deg)";
  125. this.minute.style.transform = "rotate(" + (this.nowMinute * 6 + 1 / 10 * this.nowSecond - 90) + "deg)";
  126. this.hour.style.transform = "rotate(" + (this.nowHour * 30 + 1 / 2 * this.nowMinute + 1 / 120 * this.nowSecond - 90) + "deg)";
  127. }
  128. Clock.prototype.initClock = function () {
  129. //初始化timeLabel
  130. this.timeLabel.innerHTML = this.nowHour + ":" + this.nowMinute + ":" + this.nowSecond;
  131. //初始化表盘
  132. for (var index = 0; index < 4; index++) {
  133. this.CreateKeDu("hourPointer", index * 90, 138);
  134. }
  135. for (var index = 0; index < 12; index++) {
  136. this.CreateKeDu("minuterPointer", index * 30, 140);
  137. }
  138. for (var index = 0; index < 60; index++) {
  139. this.CreateKeDu("secondPointer", index * 6, 142);
  140. }
  141. this.setPosition();
  142. }
  143. Clock.prototype.InterVal = function () {
  144. clearInterval(this.timer);
  145. var _this = this;
  146. this.timer = setInterval(function () {
  147. _this.getNowTime();
  148. _this.second.style.transform = "rotate(" + (_this.nowSecond * 6 - 90) + "deg)";
  149. _this.minute.style.transform = "rotate(" + (_this.nowMinute * 6 + 1 / 10 * _this.nowSecond - 90) + "deg)";
  150. _this.hour.style.transform = "rotate(" + (_this.nowHour * 30 + 1 / 2 * _this.nowMinute + 1 / 120 * _this.nowSecond - 90) + "deg)";
  151. _this.timeLabel.innerHTML = _this.nowHour + ":" + _this.nowMinute + ":" + _this.nowSecond;
  152. }, 1000);
  153. }
  154. window.onload = function () {
  155. new Clock();
  156. }
  157. </script>
  158. </head>
  159. <body>
  160. <div class="main" id="biaopan">
  161. <div id="timeLabel"></div>
  162. <div id="hour"></div>
  163. <div id="minute"></div>
  164. <div id="second"></div>
  165. </div>
  166. </body>
  167. </html>

总结：本例中使用了css3 的transform属性中的 rotate的旋转效果和translate的位移效果。

以上所述就是本文的全部内容了，希望本文能够对大家学习CSS3有所帮助。

相关参阅：《FLASH代码制作时钟》

悲酥清风
  • 本文由 发表于 2015年4月22日 10:15:29
评论  1  访客  0  引用  1

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定