JS详解Date应用+定时器原理+计时器案例

我们先说一下定时器吧：

//定时器：设置一个定时器，再设置一个等待的时间，到达指定时间后，执行对应的操作
//两种定时器：用法一样,区别一个执行后不会停下来，一个只执行一次
//window.setInterval([function],[interval]);
/*设置一个定时器，到达指定时间[interval] 执行我们的操作[function],然后定时器并没有停止，
以后每隔这么长时间，都重新执行我们的function*/

//window.setTimeout([function],[interval]);
/*设置一个定时器，到达指定的时间[interval],执行我们的操作[function]，定时器停止。*/

//定时器队列：定时器都有返回值，返回的是一个数字，代表当前是第几个定时器。

//来看一个例子
var count=0;
//设置一个interval,每隔1000毫秒就执行function
var timer=window.setInterval(function(){
  count++;
  console.log(count);
},1000);


接下来我要把计时器放入下面计时器案例


CSS样式

<style type="text/css">
  body,div{
    margin:0;padding:0;font-family:"微软雅黑";font-size:28px;
  }
  #div1{
    margin:10px auto 0;
    padding:0 10px;
    width:700px;
    height:50px;
    line-height:50px;
    text-align:center;
    border:1px solid #ddd;
    box-shadow:inset 0px 0px 1px 5px #000;
    border-radius:5px;
    background:-webkit-linear-gradient(top left,chartreuse,coral,cyan);
  }
</style>

<body>
<div id="div1">北京时间：</div>
<script type="text/javascript">

//获取当前自己电脑的时间(时间数据格式：对象数据类型）

/* var time = new Date();

 console.log(time);*/  //立即试一下？

　//可以看出在控制台输出结果是：Sat Dec 12 2015 21:43:25 GMT+0800 (中国标准时间)，接下来我们要把这种格式变成下面这种格式（不要在意具体时间，注意格式）
 //"2015年05月24日 星期日 15时31分27秒"变成我们这个时间格式的字符串
 var oDiv=document.getElementById("div1");
 var timeStr=formatTime();
 oDiv.innerHTML+=timeStr;
 var timer=window.setInterval(function(){      //添加计时器，每隔一秒（1000毫秒=1秒），在页面执行一次方法
   var timeStr=formatTime();
   oDiv.innerHTML="北京时间："+timeStr;
 },1000)

//方法开始，标准化年月日，星期，时分秒
 function formatTime(){
   var time=new Date();//时间格式数据，或得本地当前时间
   var year=time.getFullYear();   //获得年
   var month=time.getMonth()+1;   //0-11代表我们的1-12月,所以要+1才能代表我们中国的月
   var day=time.getDate();   //获得日

   var w=time.getDay();    //获得星期  ；获得结果0-6代表周日-周六
   //w获取结果会是0-6，但输出星期0，星期6，是不对，所以我们要进行转换
   //既然是0-6，那么就存在索引。既然能代表索引，那只要有字符串我们就能找到字符了
   var wStr="日一二三四五六",/*这个索引也是0-6*/ week=wStr.charAt(w);  //用charAt(索引) 方法，获取索引


   var hours=time.getHours();  //获取时
   var minutes=time.getMinutes();   //获取分钟
   var seconds=time.getSeconds();  //获取秒
   var mlSeconds=time.getMilliseconds();   //毫秒
   return year+"年"+zero(month)+"月"+zero(day)+"日 星期"   //把获取的年月日星期时分秒拼接起来，记得要补0
   +week+" "+zero(hours)+"时"+zero(minutes)+"分"+zero(seconds)
   +"秒";
 }
 //由于月和日会出现个位数，所以要补零
 function zero(value){
   return value<10?"0"+value:value;
 }
</javascript>
</body>
</html>