您可以放入把HTML放入头部或者底部文件。推荐底部。
<div id="layer-qq" class="layer-qq pupmove">
<h3 class="h3move"><span></span><span class="number"></span><span>我</span><span>是</span><span>内</span><span>容</span></h3>
<a class="qq-close"><svg class="icon" style="width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2375"><path d="M896.7 172.6l-45.3-45.3a4 4 0 0 0-5.6 0L512 461.1 178.2 127.3a4 4 0 0 0-5.6 0l-45.3 45.3a4 4 0 0 0 0 5.6L461.1 512 127.3 845.8a4 4 0 0 0 0 5.6l45.3 45.3a4 4 0 0 0 5.6 0L512 562.9l333.8 333.8a4 4 0 0 0 5.6 0l45.3-45.3a4 4 0 0 0 0-5.6L562.9 512l333.8-333.8a4 4 0 0 0 0-5.6z" p-id="2376"></path></svg></a>
<div class="text">
<h3>我可以是标题</h3>
<br>
<p>我可以是内容</p>
<p>我可以是内容</p>
<div class="countdown">
<div class="countdown-wrapper">
<div class="days time-el">
<output id="days">
<div class="digit">
<div class="next">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
<div class="current">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
</div></output>
<label for="days">DAY(天)</label>
</div>
<div class="hours time-el">
<output id="hours">
<div class="digit">
<div class="next">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
<div class="current">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
</div>
<div class="digit">
<div class="next">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
<div class="current">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
</div></output>
<label for="hours">HOUR(时)</label>
</div>
<div class="minutes time-el">
<output id="minutes">
<div class="digit">
<div class="next">
<span class="top"><span class="inner">4</span></span>
<span class="bottom"><span class="inner">4</span></span>
</div>
<div class="current">
<span class="top"><span class="inner">4</span></span>
<span class="bottom"><span class="inner">4</span></span>
</div>
</div>
<div class="digit">
<div class="next">
<span class="top"><span class="inner">2</span></span>
<span class="bottom"><span class="inner">2</span></span>
</div>
<div class="current">
<span class="top"><span class="inner">2</span></span>
<span class="bottom"><span class="inner">2</span></span>
</div>
</div></output>
<label for="minutes">MINUTE(分)</label>
</div>
<div class="seconds time-el">
<output id="seconds">
<div class="digit">
<div class="next">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
<div class="current">
<span class="top"><span class="inner">0</span></span>
<span class="bottom"><span class="inner">0</span></span>
</div>
</div>
<div class="digit">
<div class="next">
<span class="top"><span class="inner">8</span></span>
<span class="bottom"><span class="inner">8</span></span>
</div>
<div class="current">
<span class="top"><span class="inner">8</span></span>
<span class="bottom"><span class="inner">8</span></span>
</div>
</div></output>
<label for="seconds">SECOND(秒)</label>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var sel = $.cookie("pupmove"); // get the cookie
sel = sel=="true"; // convert to boolean - null is false, "false" is false
$(".qq-close").parent().toggleClass("pupmove",sel); // initial
$(".qq-close").on("click",function() {
var $this = $(this).parent();
sel = !sel; // toggle
$this.toggleClass("pupmove",sel); // toggles
$.cookie("pupmove", sel,{ expires: 1/48, path: '/' });
});
});
</script>
Css代码放入子主题的style.css文件中
@media screen and (max-width: 960px) { .layer-qq { display: none !important; } } .layer-qq { font-size: 14px; font-family: "微软雅黑"; margin: -210px 0 0 -420px; position: fixed; top: 50%; left: 50%; width: 840px; height: 420px; background: url(//img.ahap.cn/files/20220122161805796.jpg) no-repeat; text-align: center; z-index: 99999; overflow: hidden; } .layer-qq h3 { margin: 0; padding: 0; font-size: 35px; text-transform: uppercase; font-weight: bold; padding-top: 45px; line-height: 45px; } .layer-qq strong { font-size: 22px; color: #fff; } /*.layer-qq a.linkqq{display: block; width: 840px; height: 100px; position: absolute; bottom: 0;}*/ .layer-qq a.qq-close { z-index: 9999; display: block; width: 28px; height: 28px; position: absolute; top: 20px; right: 20px; cursor: pointer; color: #fff; } .current .bottom .inner { color: #fff } #kefu { position: absolute; bottom: 40px; color: #fff; font-size: 24px; transform: translate(-50%, 0); } .countdown { width: 750px; text-align: center; position: absolute; transform: translate(-50%, -50%); top: 70%; left: 50%; font-family: 'Mada', sans-serif; } .countdown .intro { margin: 5% auto; color: #9e8686; letter-spacing: 1px; word-spacing: 12px; } .intro .number, .h3move .number { font-size: 40px; font-family: 'Limelight', cursive; } .countdown-wrapper { display: flex; justify-content: space-around; margin: 0 auto; color: #fff; } label, output, .time-el span { display: block; } .time-el { position: relative; margin-right: 20px; } .time-el:not(:last-child):after { content: ":"; position: absolute; right: -36px; top: 18%; font-size: 30px; color: #fff; } .time-el .digit { position: relative; width: 50px; height: 60px; display: inline-block; font-size: 55px; line-height: 65px; font-family: 'Limelight', cursive; perspective: 120px; } .time-el .digit .inner { font-size: 50px; font-family: 'Limelight', cursive; } .countdown .inner { height: 200%; width: 100%; position: absolute; } .countdown .top .inner { top: 0; } .bottom .inner { bottom: 0; } .time-el .top, .time-el .bottom { position: absolute; left: 0; height: 50%; width: 100%; overflow: hidden; /* background: linear-gradient(to bottom, #543243 10%, #461f32 50%, #543243 90%); */ } .time-el .top { top: 0; transform-origin: 50% 100%; color: #fff; /*background: linear-gradient(300deg, #331926 50%, #542e40);*/ border-radius: 6px 6px 0 0; z-index: 1; backface-visibility: hidden; } .time-el .bottom { bottom: 0; transform-origin: 50% 0%; /*background: linear-gradient(340deg, #542e40, #331926 40%);*/ border-radius: 0 0 6px 6px; } .time-el label { font-size: 12px; letter-spacing: 1px; color: #fff; } /*倒计时*/ .layer-qq a { color: #33e153; text-decoration: none; } #layer-qq .text { margin: 5px 70px 15px; } #layer-qq .text h3 { color: #fff; text-align: left; font-weight: 200; text-align: center; } #layer-qq .text p { font-size: 16px; color: #fff; text-align: left; line-height: 28px; letter-spacing: 0.5px; margin: 0 auto 10px; padding: 0; letter-spacing: 2px; text-align: center; } #layer-qq .text h3 span { font-size: 54px; margin-right: 10px; font-family: 'Limelight', cursive; display: inline-block; color: #fff; display: none } /*缩放*/ #layer-qq .h3move { position: absolute; color: #fff; font-size: 75px; font-weight: 400; letter-spacing: 15px; padding-top: 80px; margin: auto 120px; opacity: 0; } #layer-qq .h3move span { transform: rotate(-90deg); display: inline-block; } #layer-qq .h3move .number { font-size: 98px; } table { border-collapse: collapse; border-spacing: 0 } #layer-qq.pupmove .h3move, #layer-qq.pupmove .text, .layer-qq { -webkit-transition: all 5s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; } #layer-qq .h3move { opacity: 0; } #layer-qq.pupmove { transform: scale(0.25) rotate(90deg); left: 0px; border-radius: 30px; width: 600px; margin: -210px 0 0 -300px; } #layer-qq.pupmove .qq-close { opacity: 0; width: 100%; height: 100%; } #layer-qq.pupmove .text { opacity: 0; } #layer-qq.pupmove .h3move { opacity: 1; z-index: 10; } div#layer-qq { border-radius: 8px; }
JavaScript代码
var targetTime = new Date("2, 09, 2022"); var oneSecond = 1000; var oneMinute = oneSecond * 60; var oneHour = oneMinute * 60; var oneDay = oneHour * 24; var $daysEl = $(".time-el #days"); var $hoursEl = $(".time-el #hours"); var $minutesEl = $(".time-el #minutes"); var $secondsEl = $(".time-el #seconds"); function startCountDown() { updateTick(); var timeInterval = setInterval(updateTick, oneSecond); function updateTick() { var timeLeft = Date.parse(targetTime) - Date.parse(new Date()); var spanContent = "\n\n"; $daysEl.html(Math.floor(timeLeft / oneDay)).html(function(i, digit) { return digit.replace(/(\d)/g, spanContent); }); $hoursEl.html(("0" + Math.floor(timeLeft % oneDay / oneHour)).slice(-2)).html(function(i, digit) { return digit.replace(/(\d)/g, spanContent); }); $minutesEl.html(("0" + Math.floor(timeLeft % oneHour / oneMinute)).slice(-2)).html(function(i, digit) { return digit.replace(/(\d)/g, spanContent); }); $secondsEl.html(("0" + Math.floor(timeLeft % oneMinute / oneSecond)).slice(-2)).html(function(i, digit) { return digit.replace(/(\d)/g, spanContent); }); if (timeLeft <= 0) clearInterval(timeInterval); } } function flip() { var timeLeft = Date.parse(targetTime) - Date.parse(new Date()); var tl = TweenMax.to({}, 1, { repeat: -1, onRepeat: function onRepeat() { console.log(Date.parse(targetTime) - Date.parse(new Date())); } }); } $(function() { startCountDown(); }); jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); //这里改时间,单位毫秒,默认为1天。 } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };\n$1\n$1\n\n\n$1\n$1\n\n
需要引入jquery插件,百度自行搜索下载。
引入的时候,一定是jquery插件为先,上面的js代码为后,顺序不能错!
如果是WordPress主题,如主题已引入,不需要再次引入。
根目录引入jquery