【javascript】按自定义格式实时更新网页时间_前端改网页程序时间-优快云博客

博客介绍按自定义格式实时更新网页时间的方法。原理是做函数用正则匹配特定字母替换，添加方法以便全局使用，用定时器定时调用函数更新网页。代码收获包括可用正则字符串作键名、变量字符串需转正则、对象多用迭代、活用lastmatch处理匹配内容。

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

按自定义格式实时更新网页时间

原理和思路

做一个函数，使用正则表达式匹配给定字符串中的特定字母，进行替换。
将方法添加于Date.prototype上，这样可以不需要传参，直接继承了Date新加入的方法，并且可以全局使用。
使用setInterval定时器每隔多少秒调用一次这个函数，并更新网页。

代码收获

在创建对象时候，可以使用正则字符串作为键名，这样方便后面进行迭代替换。
字符串如果是变量，直接使用正则的test方法是不行的，必须先转成正则。
对象没有Length,没有索引，一般使用迭代。
lastmatch有长度，活用这个函数好处理刚刚匹配的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <time></time><br>
    <time></time>
    <script>      
        //设置格式化，传入yyyy年mm月dd日hh小时mm分ss秒
        Date.prototype.format=function(fmt){
            var obj = {
                'M+':this.getMonth()+1,
                'd+':this.getDay(),
                'h+':this.getHours(),
               'm+':this.getMinutes(),
                's+':this.getSeconds()
            }
                if(/y+/.test(fmt)){
                    var year = this.getFullYear().toString();
                if(RegExp.lastMatch.length<year.length){
                    year=year.substr(-RegExp.lastMatch.length);
                }
                fmt=fmt.replace(RegExp.lastMatch,year);
            }
            for(var k in obj){
                pj=RegExp(k);//每一项做成正则
                if(pj.test(fmt)){
                    para= obj[k].toString().substr(-RegExp.lastMatch.length);
                    fmt=fmt.replace(RegExp.lastMatch,para);
                }               
            }
            return fmt;
        }
        setInterval(() => {
            nowtime = new Date();
            ptime = document.getElementsByTagName("time")[0];
            ptime2=document.getElementsByTagName("time")[1];
            ptime.innerHTML=nowtime.format("yyyy年MM月dddd日hhhh小时mmmm分ssss秒");
            ptime2.innerHTML=nowtime.format("yy年MM月dd日hh时");
        }, 1000);
    </script>
</body>

</html>