[暑期项目实训]四、时间戳问题与参会人列表功能完善

最新推荐文章于 2024-09-27 15:27:45 发布

我C有蚊子

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量87

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44524843/article/details/118551860

版权

本文讲述了会议管理中时间戳转化为常用时间的实现，包括日期显示和倒计时功能。对于倒计时部分，已计算出时间差但未实现组件实时更新。参会人列表功能从弹窗改为独立页面，遇到路由配置问题，最终解决。通过这次经验，作者认识到了不断学习和沟通的重要性。

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

时间戳问题

会议管理中有2个部分涉及到时间戳问题，一个是开始结束会议的时间显示，一个是倒计时部分。

时间戳转化为常用时间

涉及到时间显示，直接用Date函数传入时间戳，然后获取其中的年月日时分秒，如下：

getTime:function(value) {//value为时间戳
            var date = new Date(value);
            var Y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var H = date.getHours();
            var i = date.getMinutes();
            var s = date.getSeconds();
            if (m < 10) {
                m = '0' + m;
            }
            if (d < 10) {
                d = '0' + d;
            }
            if (H < 10) {
                H = '0' + H;
            }
            if (i < 10) {
                i = '0' + i;
            }
            if (s < 10) {
                s = '0' + s;
            }
            var t = Y+'/'+m+'/'+d+' '+H+':'+i+':'+s;
            return t;
        },

倒计时部分问题

该部分我只完成了倒计时的计算，至于组件的实时更新显示部分尚未开发，倒计时计算函数如下：

//计算开始时间与当前时间之间的时间差 多少天时分秒
        intervalTime:function(startTime) {
            var timestamp=new Date().getTime(); 
            var date1 = ""; 
            if(timestamp > startTime){
                return "会议已开始，请加入会议"
            }else{
                date1 = timestamp; //当前时间
            }
            var date2 = startTime; //开始时间
            var date3 =  date2- date1; //时间差的毫秒数

            //计算出相差天数
            var days = Math.floor(date3 / (24 * 3600 * 1000));
            //计算出小时数
            var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
            var hours = Math.floor(leave1 / (3600 * 1000));
            //计算相差分钟数
            var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
            var minutes = Math.floor(leave2 / (60 * 1000));
            //计算相差秒数
            var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
            var seconds = Math.round(leave3 / 1000);
            if(days == 0){
                if(hours == 0){
                    return "距离会议开始还有"+ minutes + "分" + seconds +"秒";
                }else{
                    return "距离会议开始还有"+ hours + "时" + minutes + "分 ";
                }
            }else{
                return "距离会议开始还有"+ days + "天" + hours + "时 ";
            }
        }

参会人列表完善

刚开始这部分准备使用弹窗的方式进行，但是开发过程中发现了一些局限性，最后选择使用新建一个页面。本身的建立与使用没什么问题，直接使用了前面的我的会议的模板列表再进行修改。可是还是吃了见识不足的亏，没有再config.js中设置路由，为这个问题我搜索了很长一段时间，最后求助吴钊颖后发现这个是仅需要5行代码就能解决的问题，对期间浪费的时间深感痛心。还好之前有赶进度，又好在没有闭门造车，埋头死干。这也是经验教训，值得特地纪念。