JS date对象，定时器，时间戳（简单应用）

最新推荐文章于 2025-06-15 20:32:27 发布

七月是我的生日

最新推荐文章于 2025-06-15 20:32:27 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS学习文章标签： JS定时器，date对象简单应用

本文链接：https://blog.youkuaiyun.com/qq_43955202/article/details/90648317

JS学习专栏收录该内容

30 篇文章

订阅专栏

本文介绍了JS常用date对象的方法，包括get型和set型方法，如getDate、setDate等。还提及获取程序运行首尾时间差、封装打印当前时间函数、时间戳与日期转换等内容。此外，讲解了JS定时器setInterval及其关闭方法，最后给出完成3分钟计时器的小demo要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS 常用date对象

1.date对象的一些方法
在这里插入图片描述
常用get型：
1.Date（）
返回当前日期和时间。
2.getDate（）
返回一个月得第几天（1-31）
3.getDay()
返回一周得第几天（0-6）
4.getMonth()
返回第几个月份（0-11）
5.getTime()
返回自1970年1月1日至今得毫秒数。（1970.1.1 —纪元时间）
6.getFullyear()
返回四位数年份
7.getHours（） getMinutes（） getScondes（）等等
例子：注意每周天数从0-6，月份从0-11，所以真实月份应该加1；
在这里插入图片描述

常用set型：
1.setDate()
设置某一天（1-31）
2.setMouth（）
设置月份（0-11）
3.setFullyear（）
设置年份
4.setHours（）， setMinutes（）， setSecondes（）等等

2.获取程序运行首尾时间差

<script>
    var firstTime = new Date().getTime();
    for(var i = 0; i < 111000000; i ++)
    {

    }
    var lastTime = new Date().getTime();
    console.log(lastTime - firstTime);
    </script>

3.封装函数打印当前时间：

 <script>
   function NowTime(){
       var date = new Date();
       var year = date.getFullYear();
       var Month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1): ('0'+ (date.getMonth() + 1));
       var Day = (date.getDate()) >= 10 ? date.getDate(): ('0' + date.getDate());
       var Hours = (date.getHours()) >= 10 ? date.getHours(): ('0' + date.getHours());
       var Minutes = (date.getMinutes()) >= 10 ? date.getMinutes(): ('0' + date.getMinutes());
       var Seconds = (date.getSeconds()) >= 10 ? date.getSeconds() : ('0' + date.getSeconds());
       return (year + '-' + Month + '-' + Day + ' ' + Hours + ':' + Minutes + ':' + Seconds);
   }
   console.log(NowTime()); //2019 - 5 - 28 21：49：55
    </script>

4.返回时间戳并将时间戳转换为日期

 <script>
    //1
    var date = new Date().getTime();
    console.log(date); //精确到毫秒
    //2
    var date1= Date.parse(new Date());
    console.log(date1);  //精确到秒
    //3
    var date2 = ( new Date()).valueOf();
    console.log(date2);//精确到毫秒
    //封装函数
         function timetrans(date){
         var date = new Date(2015,2,13,5,4,5);
         var year = date.getFullYear();
         var month = (date.getMonth() + 1) < 10 ? '0' +(date.getMonth() + 1) : date.getMonth() + 1;
         var day  = (date.getDate()) < 10 ? '0' + (date.getDate()) : date.getDate();
         var hour = (date.getHours()) < 10 ? '0' + (date.getHours()) : date.getHours();
         var minute = (date.getMinutes()) < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
         var second = (date.getSeconds()) < 10 ? '0' + (date.getSeconds()) : date.getSeconds();

         return(year + "-" + month + "-" + day + ":" + hour + ":" + minute + ":" + second );
     }
     timetrans();
     console.log(timetrans());
    </script>

5.JS定时器
1.setInterval

 <script>
   setInterval(function(){
       console.log('a');
   },1000)
    </script>  //每隔1000mm打印一个a

关闭定时器：outInterval

  <script>
   setInterval(function(){
       console.log('a');
   },1000)
   clearInterval(1);  //每一个setInerval都会有一个返回值作为自己的唯一标识，可以var一个变量获取

 var timer = setInterval(function(){
       console.log('a');
   },1000)
   clearInterval(timer);
    </script>
    注意：间隔时间为毫秒数

// 以下情况定时器只会以第一次的time为准进行定时
   var time = 1000;
   var timer = setInterval(function(){
       console.log('a');
       time = 3000;
   },time)

setTimeout（function（）{}，1000）//推迟1000ms后运行，
clearTimeout（）取消定时器

上述均为全局对象上的window方法，内部函数this指向window。

小demo
要求：
完成一个计时器，计时器到3min时停止：

<body>
minutes: <input type="text" value="0">
seconds: <input type="text" value="0">

    <script>
  var oInput0 = document.getElementsByTagName('input')[0];
  var oInput1 = document.getElementsByTagName('input')[1];
  var minutes = 0;
  var seconds = 0;
  

  var timer = setInterval(function(){
      seconds++;
      if(seconds == 60)
      {
          seconds = 0;
          minutes ++;
      }
      if(minutes == 3)
      {
          clearInterval(timer);
      }
      oInput0.value = minutes;
      oInput1.value = seconds;
  },1000)
  


    </script>
</body>