1、时间对象

1.1【作用】：Date 对象用于处理日期和时间。

1.2【创建时间对象】： new Date（）获取系统当前时间

  1. var myDate=new Date(); //Tue Dec 24 2019 20:44:00 GMT+0800 (中国标准时间);
  2. typeof myDate;====>"object"  // 获取到是一个对象，并不是字符串

1.3 时间对象相关属性和方法

  • getFullYear();获取年
  • getMonth();获取月 0到11 代表1月到12月
  • getDate();获取日期
  • getDay();星期几 （0—-6）代表周日到到周六
  • getHours();时
  • getMinutes();分
  • getSeconds();秒
  • getMilliseconds();毫秒
  • getTime();获取当前日期到1970年1月1号 00：00:00 之间的毫秒差
  • toLocaleString();// 获取到的是年月日，时分秒”2019/12/25 上午10:15:50”
  • toLocaleDateString();// 获取到是字符串的年月日，例如：”2019/12/25”

  • toLocaleTimeString();/ 获取到的是字符串的时分秒上午10:18:28

    2、案例：钟表

    ```javascript <!DOCTYPE html>

  1. 补0操作：
  2. ```javascript
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <title>Document</title>
  10.     <style>
  11.     #clock{
  12.         height:50px;
  13.         line-height: 50px;
  14.         text-align: center;
  15.     }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="clock" id="clock">
  21.     </div>
  22.     <script>
  23.     var clock = document.getElementById("clock");
  25.     function getTime() {
  26.         var time = new Date();
  27.         var year = time.getFullYear();
  28.         var month = time.getMonth() + 1;
  29.         var date = time.getDate();
  30.         var day = time.getDay();
  31.         var hour = time.getHours();
  32.         var minutes = time.getMinutes();
  33.         var seconds = time.getSeconds();
  34.         var week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  36.         var res = year + "年" + addZero(month) + "月" + addZero(date) + "日" + week[day] + " " + addZero(hour) + ":" + addZero(minutes) + ":" + addZero(seconds);
  37.         return res;
  38.     }
  40.     function addZero(num) {
  41.         return num < 10 ? "0" + num : num;
  42.     }
  43.     var res = getTime();
  44.     clock.innerText = res;
  45.     setInterval(function () {
  46.         var res = getTime();
  47.         clock.innerText = res;
  48.     }, 1000)
  49.     </script>
  50. </body>
  51. </html>

3、定时器：

3.1、setTimeOut

  1.  一定的时间后，去执行某些事情，是单次调用
  1. setTimeout(function(){
  2.     alert("wasai!you are beautiful");
  3. },1000)

3.2、setInterval

间隔多少时间后，去执行某些事情，是多次调用

  1. setInterval(function(){
  2.     console.log("我真美！")
  3. },1000)

3.3、定时器的参数说明

  1. // 定时器可以传递多个参数：
  2. // 1、执行的函数 
  3. // 2、时间 
  4. // 3、后面的参数就是执行函数在执行的时候传递的实参
  5. setTimeout(function(num,s,m){
  6.   console.log(num,s,m);
  7. },1000,2,3,6);

3.4、定时器是有返回值的，返回值代表定时器处于当前页面中的第几个

  1. var time1=setTimeout(function(){
  2.     console.log("wasai!you are beautiful");
  3. },1000)
  6. var time2=setInterval(function(){
  7.     console.log("我真美！")
  8. },1000)
  10. var time3=setTimeout(function(){
  11.     console.log("aa");
  12. },1000)
  14. console.log(time1)=====>1
  15. console.log(time1)=====>2
  16. console.log(time1)=====>3

3.5、定时器是异步任务，只要当咱们同步代码执行完毕之后，才能执行。

  1. setTimeout(function(){
  2.     console.log("定时器");
  3. },1000)
  4. console.log("haha"）

4、清除定时器的方法

  • clearTimeout
  • clearInterval ```javascript

var time1=setTimeout(function(){ console.log(‘1’) },1000)

clearTimeout(time1);

var time2=setInterval(function(){ console.log(“in”) },1000);

clearInterval(time2)

  1. <a name="NHXgI"></a>
  2. ## 5、练习
  3. 做一个抽奖程序，页面中有一个区域显示中奖人员的编号，在JS中写一段代码，要求每隔1秒中随机创建一个四位的数字（每一位数字的取值范围0-9），当10秒结束后，结束定时器，最后显示的四位数字即是中奖的号码
  4. ```javascript
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  11.     <title>中奖</title>
  12.     <style>
  13.     #prize{
  14.         width:200px;
  15.         height:50px;
  16.         border:1px solid green;
  17.     }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="prize" id="prize"></div>
  22. </body>
  23. </html>
  24. <script>
  25.     function getCode(){
  26.         var str="0123456789";
  27.         var result="";
  28.         for(var i=0;i<4;i++){
  29.             var index=Math.floor(Math.random()*9);
  30.             result+=str[index];
  31.         }
  32.        prize.innerHTML=result;
  33.        return result;
  34.     }
  35.     var time1=setInterval(function(){
  36.         getCode();
  37.     },1000);
  39.     setTimeout(function(){
  40.         clearInterval(time1);
  41.     },10000)
  44. </script>

倒计时案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     body {
  16.       background: darkslateblue;
  17.     }
  19.     #time {
  20.       height: 100px;
  21.       line-height: 100px;
  22.       border: 1px dashed yellow;
  23.       text-align: center;
  24.       color: #fff;
  25.       font-size: 26px;
  26.     }
  27.   </style>
  28. </head>
  30. <body>
  31.   <div id="time">
  33.   </div>
  34.   <script>
  35.     /* 
  36.        倒计时：
  37.        目标时间：2021年12月14号
  38.        目标时间-现在的时候=还剩多少时间？
  39.        为了方便计算时间差，我们统一转成到1970年...的时间戳
  40.      */
  41.     function countDown(targetStr) {
  42.       // 目标时间
  43.       var targetTime = new Date(targetStr);
  44.       // 现在的时间
  45.       var nowTime = new Date()
  46.       // 时间差,得出来的是毫秒
  47.       var diffTime = targetTime - nowTime;
  48.       // 把时间差换算成时、分、秒
  49.       var hours = Math.floor(diffTime / (1000 * 60 * 60));
  50.       var minutes = Math.floor((diffTime - hours * 1000 * 60 * 60) / (1000 * 60));
  51.       var seconds = Math.floor((diffTime - hours * 1000 * 60 * 60 - minutes * 60 * 1000) / 1000);
  52.       var result = formatter(hours) + "时" + formatter(minutes) + "分" + formatter(seconds) + "秒";
  53.       return result;
  54.     }
  55.     function formatter(val) {
  56.       return val = Number(val) < 10 ? "0" + val : val;
  57.     }
  58.     var res = countDown("2021-12-24 00:00:00");
  59.     time.innerHTML = res;
  60.     console.log(res)
  61.     setInterval(() => {
  62.       var res = countDown("2021-12-24 00:00:00");
  63.       time.innerHTML = res;
  64.     }, 1000);
  65.   </script>
  66. </body>
  68. </html>