js原生实现时间格式化

最新推荐文章于 2024-03-25 17:17:54 发布

Friday--星期五

最新推荐文章于 2024-03-25 17:17:54 发布

阅读量996

点赞数

分类专栏： javaScript 笔记文章标签： js javascript es6 html5 html

本文链接：https://blog.csdn.net/qq_45644092/article/details/105496825

版权

javaScript 笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

一、简单的时间格式化

分析：

先获取DOM元素。
获取现在的系统时间。
使用字符串拼接将时间显示在页面中

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>格式化日期</title>
</head>
<body>
   <div id="time"></div>
   <script>
       var time = document.getElementById("time") // 获取DOM
       function shiJan() { // 创建一个方法方便定时器调用
           var dt = new Date(); // 获取现在时间
           let year = dt.getFullYear(); // 获取年
           let month = dt.getMonth() + 1; //获取月
           let day = dt.getDate(); //获取日
           let hour = dt.getHours(); //获取时
           let minute = dt.getMinutes(); //获取分
           let second = dt.getSeconds(); //获取秒
           //拼接内容
           return year + '年' +
               //判断解决单数问题
               (month >= 10 ? month : "0" + month) + '月' +
               (day >= 10 ? day : "0" + day) + "日" +
               (hour >= 10 ? hour : "0" + hour) + "时" +
               (minute >= 10 ? minute : "0" + minute) + "分" +
               (second >= 10 ? second : "0" + second) + "秒";
       }
       // 通过定时器一直刷新内容
       setInterval(() => time.innerText = shiJan(), 1000);
   </script>
</body>
</html>

效果图：

总结：
新手坑点：

月份是从0开始，0代表一月；
月，时，分，秒，时间显示上单数和双数问题；
使用setinterval(定时器)实时更新；

Friday--星期五

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js原生实现时间格式化

一、简单的时间格式化分析：先获取DOM元素。获取现在的系统时间。使用字符串拼接将时间显示在页面中代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev...
复制链接

扫一扫