显示带日期星期的数字时间

最新推荐文章于 2022-12-27 15:46:48 发布

-殇

最新推荐文章于 2022-12-27 15:46:48 发布

阅读量1.9k

点赞数

文章标签：前端 vue 时间日期

本文链接：https://blog.csdn.net/qq_37377764/article/details/101686515

版权

js中的写法，不写css样式，自己稍加修改

<body>
    <div id="clock">
        <p class="date"></p>
        <p class="time"></p>
    </div>
</body>
<script type="text/javascript">
    var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    //先调用一次，周期性定时器会慢一秒执行，不先调页面会空白一秒
    updateTime();
    // 周期性定时器，每秒重复带入数值
    setInterval(function() {
        updateTime();
    }, 1000);

    function updateTime() {
        var _ad_ = new Date();
        var time = document.getElementsByClassName('time');
        var date = document.getElementsByClassName('date');
        //时间
        time[0].innerHTML = zeroPadding(_ad_.getHours(), 2) + ':' + zeroPadding(_ad_.getMinutes(), 2) + ':' + zeroPadding(_ad_.getSeconds(), 2);
        //日期
        date[0].innerHTML = zeroPadding(_ad_.getFullYear(), 4) + '-' + zeroPadding(_ad_.getMonth() + 1, 2) + '-' + zeroPadding(_ad_.getDate(), 2) + ' ' + week[_ad_.getDay()];
    };
    // 这个方法是为了 确保时间00-00-00 确保日期0000-00-00
    function zeroPadding(num, digital) {
        var zero = '';
        for (var i = 0; i < digital; i++) {
            zero += '0';
        }
        return (zero + num).slice(-digital);
    }
</script>

vue中写法，和js写法差不多

<template>
    <div id="clock">
        <p class="date">{{ date }}</p>
        <p class="time">{{ time }}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            week:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            time: '',
            date: ''
        }
    },
    created(){
        //先调用一次，周期性定时器会慢一秒执行，不先调页面会空白一秒
        this.index();
        // 周期性定时器，每秒重复带入数值，因为this指向问题，function改成箭头函数用es6语法
        setInterval(()=>{
            this.index();
        }, 1000);
    },
    methods:{
        index(){
            var that=this;
            var _ad_ = new Date();
            //时间
            that.time= zeroPadding(_ad_.getHours(), 2) + ':' + zeroPadding(_ad_.getMinutes(), 2) + ':' + zeroPadding(_ad_.getSeconds(), 2);
            //日期
            that.date= zeroPadding(_ad_.getFullYear(), 4) + '-' + zeroPadding(_ad_.getMonth() + 1, 2) + '-' + zeroPadding(_ad_.getDate(), 2) + ' ' + that.week[_ad_.getDay()];
            // 这个方法是为了 确保时间00-00-00 确保日期0000-00-00
            function zeroPadding(num, digital) {
                var zero = '';
                for (var i = 0; i < digital; i++) {
                    zero += '0';
                }
                return (zero + num).slice(-digital);
            }
        }
    }
}
</script>

-殇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
显示带日期星期的数字时间

js中的写法，不写css样式，自己稍加修改<body> <div id="clock"> <p class="date"></p> <p class="time"></p> </div></body><script type="text/jav...
复制链接

扫一扫