电子时钟创建DOM对象并使用DOM日期 new Date（）

最新推荐文章于 2022-04-07 09:31:14 发布

掌舵的船手

最新推荐文章于 2022-04-07 09:31:14 发布

阅读量616

点赞数 1

文章标签： js css html5 dom

本文链接：https://blog.csdn.net/liuhebahuang/article/details/108025838

版权

<!DOCTYPE html>

<html>
 <head>
 /!--电子时钟  创建DOM对象 并使用DOM日期   new  Date（）--//
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   #warp{
    width: 200px;
    height: 200px;
    background-color: #000000;
   }
   #time{
    color: #00FF99;
    font-size: 16px;
   }
   #times{
    font-size: 18px;
    color: #FF0000;
   }
   
   
   
  </style>
 </head>
 <body>
  <div id="warp">
   <span id="time">
    
   </span>
   <span id="timer">
    
   </span>
  </div>
 </body>
 <script type="text/javascript">
 //在js中创建dom对象
  var warp=document.getElementById("warp");
  var time=document.getElementById("time");
  var times=document.getElementById("timer");
  //使用setInerval计时器函数,注意在，号前面我们一般都用来写函数表达
  setInterval(function(){
   var myDate=new Date();
   var years=myDate.getFullYear();
   var months=myDate.getMonth();
   var dates=myDate.getDate();
   var hours=myDate.getHours();
   var minutes=myDate.getMinutes();
   var seconds=myDate.getSeconds();
   var parses=myDate.getMilliseconds()%60;
   var day=myDate.getDay();
   //应用switc循环使用day
   switch(day){
    case '0':
    day="日";
    case '1':
    day="一";
    case '2':
    day="二";
    case '3':
    day="三";
    case '4':
    day="四";
    case '5':
    day="五";
    case '6':
    day="六";
    
   }
   //此处是为了让计时器好看写的
   if(seconds<10){
    seconds="0"+seconds;
   }
   if(minutes<10){
    minutes="0"+minutes;
   }
   if(hours<10){
    hours="0"+hours;
   }
   if(years<1900){
    years=years+1900;
   }
   if(dates<10){
    dates="0"+dates;
   }
   if(months<10){
    months="0"+months;
   }
   //显示今天的年月日
   time.innerHTML=years+"年"+months+"月"+dates+"日"+"星期"+day
   
   //创建电子显示时间
   times.innerHTML=years+":"+months+":"+dates+":"+minutes+":"+seconds+":"+parses;
   
   
   
   
   
   
   
   
   
   
  },10)
 </script>
</html>

掌舵的船手

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
电子时钟创建DOM对象并使用DOM日期 new Date（）

<!DOCTYPE html><html> <head> /!--电子时钟创建DOM对象并使用DOM日期 new Date（）--// <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #warp{ width: 200p
复制链接

扫一扫