vue时间戳转换为日期时间和前端页面实时展示系统当前时间无需后台交互数据

这将会是一个好名字

已于 2022-08-05 09:48:47 修改

阅读量946

点赞数 1

文章标签： vue.js javascript ecmascript

于 2022-08-03 18:58:56 首次发布

本文链接：https://blog.csdn.net/weixin_54028135/article/details/126146909

版权

这篇博客介绍了如何在JavaScript中将时间戳转换为日期格式，并展示了如何使用setTimeout函数实时更新前端页面上的时间。提供的代码示例包括将时间戳转换为年月日的函数以及在网页上每秒更新时间的实现。

摘要由CSDN通过智能技术生成

时间戳转换为日期

js:
在这里插入图片描述

function timestampToTime (time) {
// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var date = new Date(time * 1000)
    let y = date.getFullYear()
    let MM = date.getMonth() + 1
    MM = MM < 10 ? ('0' + MM) : MM
    let d = date.getDate()
    d = d < 10 ? ('0' + d) : d
    let h = date.getHours()
    h = h < 10 ? ('0' + h) : h
    let m = date.getMinutes()
    m = m < 10 ? ('0' + m) : m
    let s = date.getSeconds()
    s = s < 10 ? ('0' + s) : s
    return y + '年' + MM + '月' + d + '日'
}

引用js
在这里插入图片描述

y.addTime是获取的当前时间戳，就是传入一个时间戳参数转化为日期时间
datas是axios返回数据内容
在这里插入图片描述


<td width="150">{{ timestampToTime(y.addTime)}}</td>

效果
在这里插入图片描述

参考https://blog.csdn.net/zhang79513/article/details/105222119

前端页面实时展示当前系统时间

//要展示的时间块
 <div class="weather"><span id="showTime"></span></div>

    <script>
        var t = null;
        t = setTimeout(time,1000);//開始运行
        function time()
        {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y=dt.getFullYear();
            var mt=dt.getMonth()+1;
            var day=dt.getDate();
            var h=dt.getHours();//获取时
            var m=dt.getMinutes();//获取分
            var s=dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
            t = setTimeout(time,1000); //设定定时器，循环运行
        }

    </script>