利用蓝鲸MagicBox组件库实现时间轴效果

任务

一直想将计划的完成情况实时更新在主页面 Summer Vacation Plan of 2020 时间轴可以起到这一作用。但希望以美观的形式出现，想到尝试使用学习SaaS时，蓝鲸的MagicBox前端代码可以直接使用。

效果

使用方法

前往平台https://magicbox.bk.tencent.com/static_api/v3/main/index.html#，进入jQuery组件1.0版，内容更完整丰富。

选取自己需要的样式，进行代码的复制。

将代码粘贴进wordpress的customHTML块中即可，记得要将删去依赖文件的注释。

自定义

添加新项

利用两组套件，一个是时间轴，另一个是编辑器。通过在编辑器中输入，实时添加至时间轴中新项目。

var list =$("#timeline_item");
list.prepend(' <li>\
                        <i class="fa fa-clock-o king-bg-gray"></i>\
                        <h3>2020年6月22日</h3>\
                      </li>');

• 通过Ajax选择器得到时间轴列表
• prepend倒序添加新的列表项

当前日期及时间

var date = new Date()<!--获得日期数据-->
var Y = date.getFullYear();<!--年-->
var M = date.getMonth()+1;<!--月，这里的月份必须要+1才是当前月份-->
var D = date.getDate(); <!--日，getDay是获得当前星期几（0-6），getDate是获得当前日期-->
var dateStr=Y+"-"+M+"-"+D;
var h=date.getHours();//小时
var m=date.getMinutes();//分钟
var s=date.getSeconds();//秒钟
//补零
if(h < 10){h="0" + h;}
if(m < 10){m="0" + m;}
if(s < 10){s="0" + s;}
var timeStr=h+":"+m+":"+s;

问题记录

在本地测试没有问题，但复制到wordpress中会报错

转义字符\”

当字符串中包括”会被截断，需要在前面加上转义字符\

防止同名函数

当排除了字符串截断的问题后，出现了函数xx is not a function的错误。我命名这个函数为addComment，显然容易与wordpress的函数重名，试着改为其他名称myAddComment，正常工作。