Explication détaillée de l'objet Date de JavaScript (création d'une horloge simple)_compétences Javascript-js tutoriel-php.cn

Explication détaillée de l'objet Date de JavaScript (création d'une horloge simple)_compétences Javascript

WBOY

Libérer： 2016-05-16 15:27:51

original

1684 Les gens l'ont consulté

JS fournit le type Date pour gérer l’heure et la date. Le type Date dispose d’une série de méthodes intégrées pour obtenir et définir des informations sur la date et l’heure. Ci-dessous nous avons simplement
Donnez un aperçu de ce type de date.
J'ai jeté un œil à la méthode de Date et je l'ai donnée ci-dessous :

Vous pouvez essayer la méthode ci-dessus vous-même. Je vais simplement vous démontrer le format de sortie correct de JS :

var today=new Date();//创建一个时间日期对象 
document.write("<h4>下面的是世界标准的时间输出：</h4>"); 
document.write(today+"<hr/>"); 
document.write("<h4>下面的是符合我们本地的时间输出：</h4>"); 
document.write(today.toLocaleString()+"<hr/>"); 
document.write("<h4>下面的是符合我们中国人的时间输出：</h4>"); 
document.write(today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate()+" "+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds()+"<hr/>");

Copier après la connexion

Le résultat de sortie est :

Quand j'ai vu cela, j'ai pensé à l'horloge locale fournie avec l'ordinateur. Cliquez sur l'heure dans la barre des tâches et une horloge apparaîtra :

Alors maintenant que nous connaissons le type Date en JS, pouvons-nous afficher une heure et une date locales sur la page Web grâce aux connaissances JS que nous avons acquises
Avec peu de connaissances, j'ai simplement réalisé une simple horloge.
Donnez le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>综合实例之制作简易钟表</title> 
<style type="text/css"> 
* { 
  margin:0px; 
  padding:0px; 
  outline:none; 
} 
body { 
    background-color:#0E0E0E; 
  overflow:hidden; 
} 
.date { 
  width:860px; 
  height:250px; 
  border:1px solid #FFFFFF; 
  margin:auto; 
  margin-top:200px; 
  color:#FFFFFF; 
} 
#time1 { 
     width:860px; 
   height:100px; 
   margin:auto; 
   font-size:75px; 
   text-align:center; 
} 
#time2 { 
     font-size:125px; 
   text-align:center; 
} 
</style> 
<script type="text/javascript"> 
   function startTime()//显示日期的函数 
  { 
    var today=new Date();//创建日期时间对象 
    var n=today.getFullYear();//获取当前时间的年份 
    var m=today.getMonth();//获取当前时间的月份 
    var d=today.getDate();//获取当前时间的日期 
      var h=today.getHours();//获取当前时间的小时 
    var f=today.getMinutes();//获取当前时间的分钟 
    var s=today.getSeconds();//获取当前时间的秒钟 
    var weekday=new Array(7);//创建星期数组 
    weekday[0]="星期日"; 
    weekday[1]="星期一"; 
    weekday[2]="星期二"; 
    weekday[3]="星期三"; 
    weekday[4]="星期四"; 
    weekday[5]="星期五"; 
    weekday[6]="星期六"; 
    document.getElementById('time1').innerHTML=weekday[d+1]+" "+n+"-"+(m+1)+"-"+checkTime(d); 
      f=checkTime(f); 
      s=checkTime(s); 
      document.getElementById('time2').innerHTML=h+":"+f+":"+s; 
      t=setTimeout('startTime()',500); 
  } 
  function checkTime(i)//日期校验函数 
  { 
    if (i<10)  
   { 
     return i="0" + i; 
    } 
    else  
    { 
     return i; 
    } 
  } 
</script> 
</head> 
 
<!--body标签调用JS中的startTime()方法即打开网页就显示出当前年月日和时间--> 
<body onload="startTime()"> 
 
<!--封装整个显示日期区域--> 
<div class="date"> 
   <!--显示当前年月日--> 
   <div id="time1"></div> 
  <!--显示当前北京时间--> 
   <div id="time2"></div> 
</div> 
 
</body> 
</html>

Copier après la connexion

Regardez les résultats de l'opération :

En créant un simple effet d'horloge, en apprenant l'objet Date de JavaScript et en approfondissant la compréhension de l'objet Date, j'espère que cela sera utile à l'apprentissage de chacun.