某老头的折腾笔记

怎样让你的DUX主题网站轮播“鸡汤”

一、进入wordpress后台,打开dux主题设置,在基本设置的网站底部信息加入代码
<div class="nav-time"><span id="runtime_span"></span></div>
二、在自定义代码页面,分别加入以下个代码
1.自定义网站底部内容加入代码
<span id="hitokoto"></span><div class="nav-time"><span id="runtime_span"></span></div>
2.自定义底部代码中加入代码
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

<script type="text/javascript">
    function show_runtime() {
        window.setTimeout("show_runtime()", 1000);
        X = new Date("2/22/2022 2:22:22"); /*开始时间*/
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "本站已运行 " + A + " 天 " + B + " 小时 " + C + " 分 " + D + " 秒 "
    }
    show_runtime();
</script>
三、把轮播名言代码放入你想要显示的任何位置
<span id="hitokoto"></span>
四、如需对字体颜色调整,可以在自定义css样式中加入代码
#hitokoto { color:#ff0000;font-weight:bold;}
显示效果就如下图,红色字体、加粗,可以按自己喜好调整

五、也可以让字体不同颜色渐变,在自定义css中加入以下代码
#hitokoto { 
	background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation:  maskedAnimation 4s infinite linear;
}

@keyframes maskedAnimation {
	0% {
    background-position: 0 0;
	}
	100% {
	    background-position: -100% 0;
	}
}
显示效果如下图,渐变的颜色也可以自己调整,是不是感觉还不错
来自为知笔记(Wiz)
赞(1) 打赏
未经允许不得转载:一个锤子 » 怎样让你的DUX主题网站轮播“鸡汤”

评论 抢沙发