一、时间对象

new Date(); 是一个对象

  • getFullYear();
  • getMouth(); // 0-11
  • getDate(); // 当前日期
  • getDay(); // 值[0, 6] 0代表周日，1-6代表周一到周六
  • getHours();
  • getMinutes();
  • getSeconds();
  • getMilliseconds(); // 毫秒
  • getTime(); // 时间戳（1970年到现在的毫秒差）
  • toLocaleString(); // 本地时间 “2020/11/20 上午9:59:59”
  • toLocaleTimeString(); // “上午9:59:59”
  • toLocaleDateString(); // “2020/11/20”

二、定时器

setTimeOut() setInterval()

  1. // 定时器 setTimeout(); 
  2. // 多长时间过后，执行一次
  3. var time1 = setTimeout(function() {
  5.     console.log(1);
  7. }, 1000); 
  9. // setInterval(); 
  10. // 每隔多长时间，就执行一次
  11. var num = 0; 
  12. var time2 = setInterval(function() {
  14.     num++;
  15.     /* 
  16.     定时器的返回值：此定时器是当前页面中的第几个定时器；
  17.     clearTimeOut(time1); //清除定时器之后，time1还有返回值；
  18.     time1=null; // 所以，清楚定时器之后，给定时器赋值为null 
  19.     */
  20.     if (num>10) {
  21.         clearInterval(time2);
  22.         time2=null;
  23.     }
  24.     // 定时器是异步执行；代码是自上而下执行，并且先走同步（一个一个执行）再走异步（同时执行）。
  25.     console.log(num);
  27. }, 1000)

三、时钟案例

  1. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>时钟</title>
  6.     <style>
  7.         div {
  8.             width: 300px;
  9.             height: 50px;
  10.             margin: 0 auto;
  11.         }
  12.     </style>
  14. </head>
  15. <body>
  17.     <div class="time" id="time"></div>
  19.     <script>
  20.         var div = document.getElementById("time");
  22.         var newTime = ""; 
  23.         var week = ["周日", "周一", "周二", "周三", "周四", '周五', "周六"]; 
  24.         function zero(num) {
  26.             if (num<10) {
  27.                 return "0" +  num;
  28.             }
  29.             return num;
  31.         }
  32.         var time1 = setInterval (function() {
  34.             if (newTime.length != 0) {
  35.                 newTime = "";
  36.             }
  37.             var year = new Date().getFullYear();
  38.             var y1  = year.toString();
  39.             var mounth = new Date().getMonth() + 1;
  40.             var date = new Date().getDate();
  41.             var day = new Date().getDay();
  42.             var hour = new Date().getHours();
  43.             var minutes = new Date().getMinutes();
  44.             var seconds = new Date().getSeconds();
  45.             // newTime = year+ "年" + mounth + "月" + date + "日" + week[day] + "  " +  hour + "时" +minutes+ "分"  +    seconds + "秒";
  46.             newTime = newTime.concat(year,"年",zero(mounth),"月",zero(date),"日","  ",zero(hour),"时",zero(minutes),"   分",   zero(seconds),"秒");
  47.             console.log(newTime);
  49.             div.innerText = newTime;
  51.         }, 1000)
  53.     </script>
  55. </body>

四、倒计时案例

  1. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>倒计时</title>
  6.     <style>
  7.         .main {
  8.             width: 500px;
  9.             height: 100px;
  10.             background-color: cyan;
  11.             margin: 0 auto;
  12.             text-align: center;
  13.         }
  14.         .main p {
  15.             height: 50px;
  16.             line-height: 50px;
  17.             margin: 0;
  18.         }
  19.     </style>
  21. </head>
  22. <body>
  24.     <div class="main">
  25.         <p>距离2020年11月20日 17时00分00秒 <b>还有</b></p>
  26.         <div class="time" id = "time"></div>
  27.     </div>
  29.     <script>
  30.         var div = document.getElementById("time");
  32.         var endTime = new Date("2020-11-20 17:00:00"); 
  34.         function reverseTime(endTime) {
  36.             var reTime = ""; 
  37.             timeStamp = endTime - new Date(); 
  38.             var hour = Math.floor(timeStamp / 1000 / 60 / 60); 
  39.             var minutes = Math.floor((timeStamp - hour * 60 * 60 * 1000) / 1000 / 60); 
  40.             var seconds = Math.floor((timeStamp - hour * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000); 
  41.             reTime = reTime.concat(hour, "时", minutes, "分", seconds, "秒"); 
  42.             return reTime; 
  44.         }
  45.         setInterval(function () {
  47.             div.innerText = reverseTime(endTime); 
  50.         }, 1000)
  52.     </script>
  54. </body>

五、抽奖案例

  1. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>抽奖</title>
  7. </head>
  8. <body>
  10.     <div class="box" id="box"></div>
  12.     <script>
  13.         var div = document.getElementById("box");
  15.         var ary = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
  17.         function num() {
  19.             var newStr = "";
  21.             for (i = 0; i < 4; i++) {
  22.                 var index = Math.floor(Math.random() * 10);
  23.                 // if (newStr.length > 3) {
  24.                 //     newStr = "";
  25.                 // }
  26.                 if (newStr.includes(ary[index])){
  27.                     i--;
  28.                     continue;
  29.                 }
  30.                 newStr = newStr.concat(ary[index]);
  31.             }
  32.             return newStr;
  34.         }
  35.         var timer = setInterval(function () {
  37.             div.innerText = num();
  38.             console.log( `div.innerText: ${div.innerText}` );
  39.             // console.log( `num(): ${num()}` );
  41.         }, 999)
  42.         var timer2 = setTimeout(function () {
  44.             clearInterval(timer);
  45.             timer = null;
  46.             clearInterval(timer2);  
  47.             timer = null;
  48.             alert("中奖号码为 "+div.innerText);
  50.         }, 10000)
  52.     </script>
  54. </body>