朱纯树博客
VPS测评推荐网站
cloudacead cloudacead

wp博客编辑器自定义快捷活动倒计时

实现效果截图:

 

wp博客编辑器自定义快捷活动倒计时插图

第一步去,外观->主题编辑器->找到全局JS加入下面这行代码,里面的XXX改成自己网站名称。

   var showtime = function (time) {
    var nowtime = new Date(),  //获取当前时间
        endtime = new Date(time);  //定义结束时间
       if(nowtime>endtime){

        return "XXX提醒您: 本活动已经结束";
       }

    var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
        leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
        lefth = Math.floor(lefttime/(1000*60*60)%24),  //计算小时数
        leftm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
        lefts = Math.floor(lefttime/1000%60);  //计算秒数
    return "XXXX提醒您: 本活动还有"+leftd + " 天" + lefth + "小时" + leftm + "分" + lefts+"秒";  //返回倒计时的字符串
}

var div = document.getElementById("showtime");
if(div!=null){
var time =div.getAttribute("time");

setInterval (function () {
    div.innerHTML = showtime(time);
}, 1000);
	}

第二步去function.PHP这个文件夹里面加入这行代码。

//添加标签
//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/JavaScript">
	 QTags.addButton( '活动倒计时', '活动倒计时', "<div  id='showtime' time='", "'></div>" );
</script>
<?php
}

第三步,就可以在编辑菜单就可以看到了,前提是要经典老版本的编辑器哦。

wp博客编辑器自定义快捷活动倒计时插图

 

赞(2) 打赏
未经允许不得转载:VPS测评推荐网站 - 朱纯树博客 » wp博客编辑器自定义快捷活动倒计时

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    @小怪 你大爷的,关注我的账号

    mtx2年前 (2020-10-11)回复
  2. #0

    good

    trees2年前 (2020-10-07)回复