经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
用JS写了一个30分钟倒计时器的实现示例
来源:jb51  时间:2022/3/14 10:01:54  对本文有异议

前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下

  1. <!DOCTYPE HTML>
  2. <html>
  3. ?? ?<head>
  4. ?? ??? ?<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  5. ?? ??? ?<title>Countdown Timer</title>
  6. ?? ??? ?<style type="text/css">
  7. ?? ??? ??? ?input{
  8. ?? ??? ??? ? ? ?padding-bottom: 0px;
  9. ?? ??? ??? ??? ?padding-top: 0px;
  10. ?? ??? ??? ??? ?border-top-width: 0px;
  11. ?? ??? ??? ??? ?border-left-width: 0px;
  12. ?? ??? ??? ??? ?border-right-width: 0px;
  13. ?? ??? ??? ??? ?font-size: 20px;
  14. ?? ??? ??? ??? ?width:100%;
  15. ?? ??? ??? ?}
  16. ?? ??? ?</style>
  17. ?? ?</head>
  18. ?? ?
  19. ?? ?<body>
  20. ?? ??? ?<span id="numbers" style="white-space:nowrap;"></span>
  21. ?? ??? ?
  22. ?? ??? ?<table id="table1" >
  23. ?? ??? ??? ?<tr>
  24. ?? ??? ??? ??? ?<td style="background-color:rgb(41, 74, 155);padding:3px;"></td>
  25. ?? ??? ??? ??? ?<td></td>
  26. ?? ??? ??? ?</tr>
  27. ?? ??? ??? ?<tr>
  28. ?? ??? ??? ??? ?<td style="width:100%;" colspan=2>
  29. ?? ??? ??? ??? ??? ?<input id="content"/>
  30. ?? ??? ??? ??? ?</td>
  31. ?? ??? ??? ?</tr>
  32. ?? ??? ??? ?<tr>
  33. ?? ??? ??? ??? ?<td style="width:100%;" colspan=2>
  34. ?? ??? ??? ??? ??? ?<canvas id="myCanvas" height="6">
  35. ?? ??? ??? ??? ??? ?Your browser does not support the canvas element.
  36. ?? ??? ??? ??? ??? ?</canvas>
  37. ?? ??? ??? ??? ?</td>
  38. ?? ??? ??? ?</tr>
  39. ?? ??? ??? ?
  40. ?? ??? ??? ?
  41. ?? ??? ?</table>
  42. ?? ??? ?
  43. ?? ??? ?<audio id='music'>
  44. ?? ??? ? ?<source src="music/Windows XP 启动.wav" type="audio/mpeg">
  45. ?? ??? ? ?Your browser does not support the audio tag.
  46. ?? ??? ?</audio>
  47. ?? ??? ?
  48. ?? ??? ?<audio id='music2'>
  49. ?? ??? ? ?<source src="music/Windows XP 关机.wav" type="audio/mpeg">
  50. ?? ??? ? ?Your browser does not support the audio tag.
  51. ?? ??? ?</audio>
  52. ?? ??? ?
  53. ?? ??? ?<script type="text/javascript" >
  54.  
  55. ?? ??? ??? ?var timer = {
  56. ?? ??? ??? ??? ?initMinutes:30,
  57. ?? ??? ??? ??? ?restSeconds:0,
  58. ?? ??? ??? ??? ?minute:0,
  59. ?? ??? ??? ??? ?second:0,
  60. ?? ??? ??? ??? ?handle:0,
  61. ?? ??? ??? ??? ?stopFlag:false,
  62. ?? ??? ??? ??? ?startTime:0,
  63. ?? ??? ??? ??? ?content:"asdasd",
  64. ?? ??? ??? ??? ?coverFlag:false,
  65. ?? ??? ??? ??? ?setFontSize:function(){
  66. ?? ??? ??? ??? ??? ?document.getElementById("numbers").style.fontSize = (window.innerWidth
  67. ?? ??? ??? ??? ??? ??? ??? ??? ?|| document.documentElement.clientWidth
  68. ?? ??? ??? ??? ??? ??? ??? ??? ?|| document.body.clientWidth) / 3 + "px"
  69. ?? ??? ??? ??? ?},
  70. ?? ??? ??? ??? ?refreshTable:function(){
  71. ?? ??? ??? ??? ??? ?//进度条
  72. ?? ??? ??? ??? ??? ?var table = document.getElementById("table1")
  73. ?? ??? ??? ??? ??? ?var span = document.getElementById('numbers')
  74. ?? ??? ??? ??? ??? ?
  75. ?? ??? ??? ??? ??? ?//刷新进度条
  76. ?? ??? ??? ??? ??? ?//table2.style.width =?
  77. ?? ??? ??? ??? ??? ?table.style.width = span.offsetWidth + "px"
  78.  
  79. ?? ??? ??? ??? ??? ?var progress = 1
  80. ?? ??? ??? ??? ??? ?
  81. ?? ??? ??? ??? ??? ?if(this.restSeconds > 0)
  82. ?? ??? ??? ??? ??? ??? ?progress = this.restSeconds / (this.initMinutes * 60)
  83. ?? ??? ??? ??? ??? ?
  84. ?? ??? ??? ??? ??? ?document.querySelector('#table1 td:nth-of-type(1)').style.width = progress * 100 + "%"
  85. ?? ??? ??? ??? ??? ?
  86. ?? ??? ??? ??? ??? ?var td2 = document.querySelector('#table1 td:nth-of-type(2)')
  87. ?? ??? ??? ??? ??? ?
  88. ?? ??? ??? ??? ??? ?if (progress < 1){
  89. ?? ??? ??? ??? ??? ??? ?td2.style.width = (1 - progress) * 100 + "%"
  90. ?? ??? ??? ??? ??? ?}else{
  91. ?? ??? ??? ??? ??? ??? ?td2.style.display = "none"
  92. ?? ??? ??? ??? ??? ?}
  93. ?? ??? ??? ??? ??? ?
  94. ?? ??? ??? ??? ??? ?var canvas = document.getElementById('myCanvas')
  95. ?? ??? ??? ??? ??? ?canvas.width = span.offsetWidth
  96. ?? ??? ??? ??? ??? ?
  97. ?? ??? ??? ??? ??? ?var ctx = canvas.getContext("2d")
  98. ?? ??? ??? ??? ??? ?var rectWeight = progress * span.offsetWidth
  99. ?? ??? ??? ??? ??? ?
  100. ?? ??? ??? ??? ??? ?ctx.clearRect(0, 0, span.offsetWidth, 20)
  101. ?? ??? ??? ??? ??? ?ctx.fillStyle = "#FF0000"
  102. ?? ??? ??? ??? ??? ?//console.log("rectWeight: " + rectWeight)
  103. ?? ??? ??? ??? ??? ?//console.log(progress * span.offsetWidth)
  104. ?? ??? ??? ??? ??? ?ctx.fillRect(0, 0, rectWeight, 20)
  105. ?? ??? ??? ??? ?},
  106. ?? ??? ??? ??? ?init:function(){
  107. ?? ??? ??? ??? ??? ?this.startTime = Date.now()
  108. ?? ??? ??? ??? ??? ?var span = document.getElementById('numbers')
  109. ?? ??? ??? ??? ??? ?this.setFontSize()
  110. ?? ??? ??? ??? ??? ?
  111. ?? ??? ??? ??? ??? ?this.restSeconds = this.initMinutes * 60?
  112. ?? ??? ??? ??? ??? ?this.minute = this.initMinutes
  113. ?? ??? ??? ??? ??? ?
  114. ?? ??? ??? ??? ??? ?var obj = this
  115. ?? ??? ??? ??? ??? ?
  116. ?? ??? ??? ??? ??? ?this.handle = setInterval(function(){
  117. ?? ??? ??? ??? ??? ??? ?
  118. ?? ??? ??? ??? ??? ??? ?if(obj.stopFlag)
  119. ?? ??? ??? ??? ??? ??? ??? ?return
  120. ?? ??? ??? ??? ??? ??? ?
  121. ?? ??? ??? ??? ??? ??? ?if(obj.restSeconds > 0){
  122. ?? ??? ??? ??? ??? ??? ??? ?span.innerHTML = "" + (obj.minute < 10 ? "0" + obj.minute : obj.minute) + ":" +?
  123. ?? ??? ??? ??? ??? ??? ??? ?(!obj.coverFlag ? (obj.second < 10 ? "0" + obj.second : obj.second) : "&nbsp;".repeat(4))
  124. ?? ??? ??? ??? ??? ??? ??? ?
  125. ?? ??? ??? ??? ??? ??? ??? ?if(obj.restSeconds > 0){
  126. ?? ??? ??? ??? ??? ??? ??? ??? ?obj.restSeconds -= 1
  127. ?? ??? ??? ??? ??? ??? ??? ?}
  128. ?? ??? ??? ??? ??? ??? ??? ?
  129. ?? ??? ??? ??? ??? ??? ??? ?obj.minute = ?Math.floor(obj.restSeconds / 60)
  130. ?? ??? ??? ??? ??? ??? ??? ?obj.second = ?obj.restSeconds - obj.minute * 60
  131. ?? ??? ??? ??? ??? ??? ??? ?
  132. ?? ??? ??? ??? ??? ??? ??? ?//刷新进度条
  133. ?? ??? ??? ??? ??? ??? ??? ?obj.refreshTable()
  134. ?? ??? ??? ??? ??? ??? ??? ?
  135. ?? ??? ??? ??? ??? ??? ?}else{
  136. ?? ??? ??? ??? ??? ??? ??? ?span.innerHTML = "Time "
  137. ?? ??? ??? ??? ??? ??? ??? ?window.clearInterval(obj.handle)
  138. ?? ??? ??? ??? ??? ??? ??? ?document.getElementById("music2").play()
  139. ?? ??? ??? ??? ??? ??? ??? ?
  140. ?? ??? ??? ??? ??? ??? ??? ?//跑完后记录
  141. ?? ??? ??? ??? ??? ??? ??? ?var content = document.getElementById("content").value
  142. ?? ??? ??? ??? ??? ??? ??? ?obj.markdownRecord(content)
  143. ?? ??? ??? ??? ??? ??? ??? ?
  144. ?? ??? ??? ??? ??? ??? ??? ?//不停地闪烁
  145. ?? ??? ??? ??? ??? ??? ??? ?window.setInterval(function(){
  146. ?? ??? ??? ??? ??? ??? ??? ??? ?span.innerHTML = (span.innerHTML == "Time ")?"is up.":"Time "
  147. ?? ??? ??? ??? ??? ??? ??? ?}, 5000)
  148. ?? ??? ??? ??? ??? ??? ?}
  149. ?? ??? ??? ??? ??? ??? ?
  150. ?? ??? ??? ??? ??? ?}, 1000)
  151. ?? ??? ??? ??? ??? ?
  152. ?? ??? ??? ??? ??? ?document.getElementById("music").play()
  153. ?? ??? ??? ??? ??? ?
  154. ?? ??? ??? ??? ??? ?var numbers = document.getElementById("numbers")
  155. ?? ??? ??? ??? ??? ?
  156. ?? ??? ??? ??? ??? ?numbers.addEventListener("click", function(){
  157. ?? ??? ??? ??? ??? ??? ?obj.coverFlag = !obj.coverFlag
  158. ?? ??? ??? ??? ??? ?})
  159.  
  160. ?? ??? ??? ??? ??? ?numbers.addEventListener("dblclick", function(){
  161. ?? ??? ??? ??? ??? ??? ?obj.stopFlag = !obj.stopFlag
  162. ?? ??? ??? ??? ??? ?})
  163.  
  164. ?? ??? ??? ??? ??? ?document.getElementById('content').addEventListener("blur", function(){
  165.  
  166. ?? ??? ??? ??? ??? ??? ?if(obj.restSeconds > 0)
  167. ?? ??? ??? ??? ??? ??? ??? ?return
  168. ?? ??? ??? ??? ??? ??? ?
  169. ?? ??? ??? ??? ??? ??? ?var content = document.getElementById("content").value
  170. ?? ??? ??? ??? ??? ??? ?
  171. ?? ??? ??? ??? ??? ??? ?if(this.content != content){
  172. ?? ??? ??? ??? ??? ??? ??? ?this.content = content
  173. ?? ??? ??? ??? ??? ??? ??? ?obj.markdownRecord(content)
  174. ?? ??? ??? ??? ??? ??? ?}
  175. ?? ??? ??? ??? ??? ?})
  176. ?? ??? ??? ??? ??? ?
  177. ?? ??? ??? ??? ??? ?document.getElementById('table1').addEventListener("dblclick", function(){
  178. ?? ??? ??? ??? ??? ??? ?console.log("timerHistory:")
  179. ?? ??? ??? ??? ??? ??? ?console.log(localStorage.getItem('timerHistory'))
  180. ?? ??? ??? ??? ??? ??? ?console.log("\n")
  181. ?? ??? ??? ??? ??? ??? ?obj.exportHistory()
  182. ?? ??? ??? ??? ??? ?})
  183. ?? ??? ??? ??? ??? ?
  184. ?? ??? ??? ??? ?},
  185. ?? ??? ??? ??? ?markdownRecord:function(content){
  186. ?? ??? ??? ??? ??? ?var records = []
  187. ?? ??? ??? ??? ??? ?var timerHistory = localStorage.getItem("timerHistory")
  188. ?? ??? ??? ??? ??? ?
  189. ?? ??? ??? ??? ??? ?if(timerHistory != null){
  190. ?? ??? ??? ??? ??? ??? ?records = JSON.parse(timerHistory)
  191. ?? ??? ??? ??? ??? ?}
  192. ?? ??? ??? ??? ??? ?
  193. ?? ??? ??? ??? ??? ?var lastRecord = records[0]
  194. ?? ??? ??? ??? ??? ?
  195. ?? ??? ??? ??? ??? ?if(lastRecord && lastRecord.start == this.startTime){
  196. ?? ??? ??? ??? ??? ??? ?lastRecord.note = content
  197. ?? ??? ??? ??? ??? ?}else{
  198. ?? ??? ??? ??? ??? ??? ?var history = {
  199. ?? ??? ??? ??? ??? ??? ??? ?start:this.startTime,
  200. ?? ??? ??? ??? ??? ??? ??? ?duration:this.initMinutes,
  201. ?? ??? ??? ??? ??? ??? ??? ?note:content
  202. ?? ??? ??? ??? ??? ??? ?}
  203. ?? ??? ??? ??? ??? ??? ?records.unshift(history)//数组头插入元素?? ??? ??? ?
  204. ?? ??? ??? ??? ??? ?}
  205. ?? ??? ??? ??? ??? ?
  206. ?? ??? ??? ??? ??? ?var recordsJson = JSON.stringify(records)
  207. ?? ??? ??? ??? ??? ?
  208. ?? ??? ??? ??? ??? ?//将结果存入本地
  209. ?? ??? ??? ??? ??? ?localStorage.setItem("timerHistory", recordsJson)
  210. ?? ??? ??? ??? ??? ?
  211. ?? ??? ??? ??? ??? ?console.log(records[0])
  212. ?? ??? ??? ??? ??? ?console.log("Marked it Down.")
  213. ?? ??? ??? ??? ??? ?
  214. ?? ??? ??? ??? ?},
  215. ?? ??? ??? ??? ?exportHistory:function(){
  216.  
  217. ?? ??? ??? ??? ??? ?var filename = 'record' + Date.now() +'.txt'
  218. ?? ??? ??? ??? ??? ?var text = localStorage.getItem('timerHistory')
  219. ?? ??? ??? ??? ??? ?this.exportFile(filename, text)
  220. ?? ??? ??? ??? ?},
  221. ?? ??? ??? ??? ?exportFile:function(filename, text){
  222. ?? ??? ??? ??? ??? ?var element = document.createElement('a');
  223. ?? ??? ??? ??? ??? ?element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  224. ?? ??? ??? ??? ??? ?element.setAttribute('download', filename);
  225.  
  226. ?? ??? ??? ??? ??? ?element.style.display = 'none';
  227. ?? ??? ??? ??? ??? ?document.body.appendChild(element);
  228.  
  229. ?? ??? ??? ??? ??? ?element.click();
  230.  
  231. ?? ??? ??? ??? ??? ?document.body.removeChild(element);
  232. ?? ??? ??? ??? ?}
  233. ?? ??? ??? ?}
  234. ?? ??? ??? ?
  235.  
  236. ?? ??? ??? ?window.onresize = function(){
  237. ?? ??? ??? ??? ?timer.setFontSize()
  238. ?? ??? ??? ??? ?timer.refreshTable()
  239. ?? ??? ??? ?}
  240. ?? ??? ??? ?
  241. ?? ??? ??? ?//pause
  242. ?? ??? ??? ?window.onclick = function(){
  243. ?? ??? ??? ??? ?//timer.stopFlag = !timer.stopFlag
  244. ?? ??? ??? ?}
  245. ?? ??? ??? ?
  246. ?? ??? ??? ?//main
  247. ?? ??? ??? ?window.onload = function(){
  248. ?? ??? ??? ??? ?timer.init()?? ?
  249. ?? ??? ??? ?}
  250. ?? ??? ?</script>
  251. ?? ?</body>
  252. </html>

到此这篇关于用JS写了一个30分钟倒计时器的实现示例的文章就介绍到这了,更多相关JS 倒计时器内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持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号