您现在的位置:爱折腾>> web>>正文内容

原生JS实现时钟效果

近段时间看了下原生JS方法和属性,心血来潮做了一个小demo,没有考虑性能的问题,大牛牛们有什么建议可以直接在楼下回复,让我学习学习

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>时钟效果</title> 
  6.     <style> 
  7.         .time{font-family:'华文细黑';font-size:20px;color:green;}  
  8.     </style> 
  9. </head> 
  10. <body> 
  11.     <div class="time">当前时间:<span id="time"></span></div> 
  12. </body> 
  13. <script > 
  14. //日期格式化(可以动态显示哦~~)  
  15. function timeFormat(){  
  16.     var today = new Date();  
  17.         year = today.getFullYear(),  
  18.         month = today.getMonth() + 1,  
  19.         day = today.getDate(),  
  20.         hour = today.getHours(),  
  21.         minute = today.getMinutes(),  
  22.         second = today.getSeconds(),  
  23.         week = today.getDay(),  
  24.         weekend = ["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],  
  25.         weekDay = weekend[week-1];  
  26.  
  27.         month < 10 ? month = "0" + month:month;  
  28.         day < 10 ? day = "0" + day:day;  
  29.         hour < 10 ? hour = "0" + hour:hour;  
  30.         minute < 10 ? minute = "0" + minute:minute;  
  31.         second < 10 ? second = "0" + second:second;  
  32.  
  33.     var time = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second + " "+weekDay;  
  34.     document.getElementById("time").innerHTML = time;  
  35. }  
  36. setInterval(timeFormat,1000);  
  37. //日期差  
  38.  
  39. </script> 
  40. </html> 



 

相关文章