js 中的时间类和 setTimeout 和setInterval

骑猪看日落 2024-04-17 05:38 52阅读 0赞

首先贴代码

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .time {
                width: 500px;
                height: 400px;
                background-color: #000000;
            }
            
            .nian,
            .yue {
                height: 50%;
                color: aliceblue;
                text-align: center;
                font-size: 25px;
            }
        </style>
    </head>
    
    <body>
        <div class="time">
            <div class="nian"> </div>
            <div class="yue"> </div>
        </div>
        <script>
            function show1() {
                var mydate = new Date();
                var str = "" + mydate.getFullYear() + "年    ";
                str += kk((mydate.getMonth() + 1)) + "月    ";
                str += mydate.getDate() + "日  ";
                str += "  星期" + kk(mydate.getDay()) + " ";
    
                return str;
            }
    
            function show2() {
                var mydate = new Date();
    
                var hour = mydate.getHours() < 10 ? "0" + mydate.getHours() : mydate.getHours();
                var minute = mydate.getMinutes() < 10 ? "0" + mydate.getMinutes() : mydate.getMinutes();
                var second = mydate.getSeconds() < 10 ? "0" + mydate.getSeconds() : mydate.getSeconds();
                var str = hour + "  :  " + minute + "  ： " + second;
    
                return str;
            }
    
            function kk(number) {
    
                var str = "";
                switch (number) {
    
                    case 0:
                        str = "日";
                        break;
                    case 1:
                        str = "一";
                        break;
                    case 2:
                        str = "二";
                        break;
                    case 3:
                        str = "三";
                        break;
                    case 4:
                        str = "四";
                        break;
                    case 5:
                        str = "五";
                        break;
                    case 6:
                        str = "六";
                        break;
                    case 7:
                        str = "七";
                        break;
                    case 8:
                        str = "八";
                        break;
                    case 9:
                        str = "九";
                        break;
    
                    case 10:
                        str = "十";
                        break;
                    case 11:
                        str = "十一";
                        break;
                    case 12:
                        str = "十二";
                        break;
    
                };
                return str;
            }
    
            function update() {
    
                var nian = document.getElementsByClassName("nian")[0];
                var yue = document.getElementsByClassName("yue")[0];
                setInterval(function() {
                    var str1 = show1();
                    nian.innerHTML = str1;
                    var str2 = show2();
                    yue.innerHTML = str2
                }, 1000)
            }
    
            setTimeout(update(), 0);
        </script>
    </body>
    
    </html>

# js中settimeout和setInterval区别 #

**setTimeout()方法**

`setTimeout()`方法在等待指定的毫秒数之后执行一个函数。

语法:

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>window.setTimeout(</code><code>function</code><code>, milliseconds);</code></p> <p><code>function</code> <code>: 第一个参数是要执行的函数</code></p> <p><code>milliseconds : 表示执行前的毫秒数.</code></p> </td> 
  </tr> 
 </tbody> 
</table>

例如，我们希望在用户按下“点击我！”按钮2秒后弹出一个提示框。

javascript代码如下：

<!DOCTYPE html>
    
    <html>
    
    <head>
    
        <meta charset="UTF-8">
    
    </head>
    
    <body>
    
    
    
    <button onclick="setTimeout(gfg, 2000);">点击我！</button>
    
    
    
    <script>
    
        function gfg()
    
        {
    
            alert('欢迎来到PHP中文网！');
    
        }
    
    </script>
    
    
    
    </body>
    
    </html>

一旦用户按下“按我”按钮，然后在暂停2秒后，会弹出一个框。输出:

![af0006711f7b4813c840444dc0ab185.png][]

![cefe6e9c14c1b4fb5f45c7f563d3e0b.png][]

**setInterval()方法**

`setInterval()`方法在每个给定的时间间隔重复一个给定的函数。

语法:

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>window.setInterval(</code><code>function</code><code>, milliseconds);</code></p> <p>&nbsp;</p> <p><code>function</code> <code>: 第一个参数是要执行的函数</code></p> <p><code>milliseconds :表示每次执行之间的时间间隔的长度。</code></p> </td> 
  </tr> 
 </tbody> 
</table>

代码示例如下：

<!DOCTYPE html>
    
    <html>
    
    <head>
    
        <meta charset="UTF-8">
    
    </head>
    
    <body>
    
    
    
    <p>我会说“你好”很多次！</p>
    
    
    
    <p id="GFG"></p>
    
    
    
    <script>
    
        var myVar = setInterval(myTimer, 1000);
    
    
    
        function myTimer()
    
        {
    
    
    
            document.getElementById("GFG").innerHTML += "<p>你好</p>";
    
        }
    
    </script>
    
    
    
    </body>
    
    </html>

每隔一秒就会显示一条新的“你好”消息。

然后：

![5bc1c874a8e64221ad673aefe07c7b4.png][]

# js 时间类讲解： #

# 方法一：获取[JavaScript][] 的时间使用内置的Date函数完成 #

var mydate = new Date();
    mydate.getYear(); //获取当前年份(2位)
    mydate.getFullYear(); //获取完整的年份(4位,1970-????)
    mydate.getMonth(); //获取当前月份(0-11,0代表1月)
    mydate.getDate(); //获取当前日(1-31)
    mydate.getDay(); //获取当前星期X(0-6,0代表星期天)
    mydate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
    mydate.getHours(); //获取当前小时数(0-23)
    mydate.getMinutes(); //获取当前分钟数(0-59)
    mydate.getSeconds(); //获取当前秒数(0-59)
    mydate.getMilliseconds(); //获取当前毫秒数(0-999)
    mydate.toLocaleDateString(); //获取当前日期
    var mytime=mydate.toLocaleTimeString(); //获取当前时间
    mydate.toLocaleString( ); //获取日期与时间

##  1. 使用jquery获取设置时间 ##

$(function(){
    
    $("#time").text(getnowtime());
    
    });
    
     function getnowtime() {
                var nowtime = new Date();
                var year = nowtime.getFullYear();
                var month = padleft0(nowtime.getMonth() + 1);
                var day = padleft0(nowtime.getDate());
                var hour = padleft0(nowtime.getHours());
                var minute = padleft0(nowtime.getMinutes());
                var second = padleft0(nowtime.getSeconds());
                var millisecond = nowtime.getMilliseconds(); millisecond = millisecond.toString().length == 1 ? "00" + millisecond : millisecond.toString().length == 2 ? "0" + millisecond : millisecond;
                return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second + "." + millisecond;
    }
    
     //补齐两位数
     function padleft0(obj) {
                return obj.toString().replace(/^[0-9]{1}$/, "0" + obj);
     }
    
    
    <p id="time">  </p>

### 2.格式一：（yyyy-MM-dd HH:mm:SS） ###

### 简约版 ###

function show(){
       var mydate = new Date();
       var str = "" + mydate.getFullYear() + "年";
       str += (mydate.getMonth()+1) + "月";
       str += mydate.getDate() + "日";
       return str;
      }
      alert ( show() );

### 或者可以使用下面的 ###

function getFormatDate(){  
        var nowDate = new Date();   
        var year = nowDate.getFullYear();  
        var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;  
        var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();  
        var hour = nowDate.getHours()< 10 ? "0" + nowDate.getHours() : nowDate.getHours();  
        var minute = nowDate.getMinutes()< 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();  
        var second = nowDate.getSeconds()< 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();  
        return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;  
    }
    var str = getFormatDate();
    console.log(str);

=====================具体获取函数

##  样例： ##

alert(new Date().format("yyyy年MM月dd日")); 
    alert(new Date().format("MM/dd/yyyy")); 
    alert(new Date().format("yyyyMMdd")); 
    alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

# 方法二：重构Date对象： #

Date.prototype.Format = function (fmt) {  
        var o = {  
            "M+": this.getMonth() + 1, //月份   
            "d+": this.getDate(), //日   
            "H+": this.getHours(), //小时   
            "m+": this.getMinutes(), //分   
            "s+": this.getSeconds(), //秒   
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
            "S": this.getMilliseconds() //毫秒   
        };  
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
        for (var k in o)  
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
        return fmt;  
    }

# 调用： #

var nowTime=new Date().Format("yyyy-MM-dd"); 
    console.log(nowTime);

[af0006711f7b4813c840444dc0ab185.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS85MjMvMjg2LzIxMS8xNTU0NzczNzc1NzQ1MTg0LnBuZw?x-oss-process=image/format,png
[cefe6e9c14c1b4fb5f45c7f563d3e0b.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS80MTQvMjIxLzQ2Mi8xNTU0NzczNzgyODAzMjYwLnBuZw?x-oss-process=image/format,png
[5bc1c874a8e64221ad673aefe07c7b4.png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcucGhwLmNuL3VwbG9hZC9pbWFnZS81NjQvMzgxLzU5MS8xNTU0Nzc1NTY4ODA2MTI4LnBuZw?x-oss-process=image/format,png
[JavaScript]: http://lib.csdn.net/base/18