关于相关的CSS修改：
新年倒计时：
<div class="card" style="background: url(https://i.loli.net/2021/11/12/A8uPS4zIB1oeiNv.jpg) no-repeat; background-size: cover;"><br>
<center><b> <h4><p><span style="color: #ffffff;">2023年-新春倒计时-996</span></p></h4></b></center>
<div class="gn_box">
<center>
<div id="CountMsg" class="HotDate text-light">
<span style="color: #ffffff;"><span id="t_d">10天</span>
<span id="t_h">9 时</span>
<span id="t_m">7 分</span>
<span id="t_s">42 秒</span></span>
</div><br>
</center><br>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2023/01/21 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>
</div><style>
.copyright {
margin-top: 10px;
padding: 10px;
background: #5f9ea0;
border-radius: 5px;
color : #f0ffff;
}
.copyright .copyright-title {
padding: 5px;
text-align: center;
}
.copyright .copyright-title h3 {
font-size: 18px;
}
.copyright .copyright-text {
font-size: 15px;
line-height: 25px;
}
.copyright .copyright-url {
margin: 5px 0;
}
</style>登录弹窗样式一
直接在后台【网站后台】->【主题设置】->【添加代码】->【底部(footer)自定义 js 代码】
<link rel="stylesheet" type="text/css" href="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0accce98-f18a-476c-ae72-1ab863d93eda/0b636943-d211-4759-be18-74d2ada197c7.css">
<script type="text/javascript">
// 站长 QQ
let qq = '1326145460'
function closeLoginTipsDom() {
document.getElementById("login-tips").style.display = "none"
}
document.write(`<div class="none"><div id="login-tips" class="login-tips"><center><i class="iconfont icon-crying"></i><span style="margin-left: 20px; vertical-align: baseline; display: inline-block; font-size: 18px; font-weight: 700; vertical-align: middle; margin-left: 12px;">一键登录开启个人书签等功能！</span><a href="/login/" class="login-btn">立即登录</a></a></center><div style="position: absolute; top: 10px; right: 10px; background-color:rgba(255, 255, 255, 0.61); width: 20px; height: 20px; cursor: pointer; border-radius: 20px;" onclick="closeLoginTipsDom()"><i style="font-size: 12px; line-height: 20px; vertical-align: middle; margin-bottom: 8px; color:#f1404b" class="iconfont icon-close"></i></div></div></div>`)
</script>
<div class="none"><div id="login-tips" class="login-tips"><center><i class="iconfont icon-crying"></i><span style="margin-left: 20px; vertical-align: baseline; display: inline-block; font-size: 18px; font-weight: 700; vertical-align: middle; margin-left: 12px;">一键登录开启个人书签等功能！</span><a href="/login/" class="login-btn">立即登录</a></center><div style="position: absolute; top: 10px; right: 10px; background-color:rgba(255, 255, 255, 0.61); width: 20px; height: 20px; cursor: pointer; border-radius: 20px;" onclick="closeLoginTipsDom()"><i style="font-size: 12px; line-height: 20px; vertical-align: middle; margin-bottom: 8px; color:#f1404b" class="iconfont icon-close"></i></div></div></div>
效果如下：
可能不会自动关闭，待修复
登录弹窗样式二
代码：这个动漫图标可以自己改也可以删除
<script>
function closeLoginTipsDom() {
document.getElementById("login-tips").style.display = "none";
}
</script>
<div class="none">
<div id="login-tips" class="login-tips">
<center>
<img class="guide-ac" src="http://cdn.aixifan.com/acfun-pc/2.8.36/img/acimg.png" alt="996导航">
<i class="iconfont icon-crying">
</i>
<span style="margin-left:20px;vertical-align: baseline;display: inline-block;font-size: 18px;font-weight: 700;vertical-align: middle;margin-left: 12px;">
一键登录开启个人书签等功能！
</span>
<a href="/login/" class="login-btn">
立即登录
</a>
<a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=VGVtbGBhZWNnZGEUJSV6Nzs5"
title="给我写信" rel="nofollow" class="openlogin-qq-a">
<i class="iconfont icon-qq login-btn">
</i>
</a>
<a href="http://wpa.qq.com/msgrd?v=3&uin=1326145460&site=qq&menu=yes"
class="login-btn">
联系站长
</a>
</center>
<div style="position:absolute;top:10px;right:10px;background-color:rgba(255,255,255,0.61);width:20px;height:20px;cursor: pointer;border-radius: 20px;"
onclick="closeLoginTipsDom()">
<i style="font-size: 12px;line-height: 20px;vertical-align: middle;margin-bottom: 8px;color:#f1404b"
class="iconfont icon-close">
</i>
</div>
</div>
</div>css：
/*弹窗*/ #footer-tools
[data-v-db6ccf64][data-v-41ba7e2c] {
top:unset!important;
bottom:0!important;
right:44px!important
}
@media
(max-width:767.98px) {
footer.main-footer .footer-text {
text-align:center;
float:none
}
#footer-tools {
bottom:65px;
right:5px
}
}footer.main-footer {
margin-top:0;
margin-bottom:80px;
}
#footer-tools {
position:fixed;
bottom:80px;
}
@media (max-width:768px) {
.login-tips {
left:0;
}
footer.main-footer {
margin-top:0;
margin-bottom:110px;
}
#footer-tools {
position:fixed;
bottom:100px;
}
}@media (min-width:768px) {
.login-tips {
left:0;
}
.sidebar-nav.mini-sidebar~.main-content .login-tips {
left:60px !important;
}
}.login-tips {
position:fixed;
bottom:-2px;
right:0;
z-index:22;
background:rgba(255,255,255,0.8);
color:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);
text-align:center;
padding:10px 0;
transition:all 0.3s;
}
.login-tips
.go-icon {
color:rgba(0,0,0,0.6);
font-size:22px;
vertical-align:middle;
}
.login-tips .login-btn {
display:inline-block;
vertical-align:baseline;
height:32px;
padding:0 20px;
background-color:#409CED;
color:#ffffff;
vertical-align:middle;
margin-left:16px;
border-radius:4px;
line-height:32px;
text-align:center;
font-size:14px;
margin:8px 8px;
}
/*.io-black-mode
.login-tips {
backdrop-filter:saturate(5) blur(40px)*/;
}
.screenshot-carousel
.img_wrapper a {
display:contents
}
.fancybox-slide--iframe .fancybox-content {
max-width:1280px;
margin:0
}
.fancybox-slide--iframe.fancybox-slide {
padding:44px 0
}
.navbar-nav
.menu-item-2052 a {
background:#ff8116;
border-radius:50px!important;
padding:5px 10px!important;
margin:5px 0!important;
color:#fff!important;
}
.navbar-nav
.menu-item-2052 a i {
position:absolute;
top:0;
right:-10px;
color:#f13522;
}
.io-black-mode
.navbar-nav .menu-item-2052 a {
background:#ce9412;
}
.io-black-mode .navbar-nav
.menu-item-2052 a i {
color:#fff;
}
.io-black-mode .login-tips {
color:#c6c9cf;
background:#2C2E2F;
box-shadow:0 0 25px 5px rgba(10,10,10,.25);
}
.login-tips .guide-ac {
position:absolute;
bottom:0;
left:180px;
width:330px;
height:145px;
}
关于Tab 工具
DLY代码小工具演示效果
<div class="widget widget_block"><p><iframe loading="lazy" src="https://www.996dh.cn/tool/sj/" height="100" frameborder="no" border="0" width="100%"> </iframe></p></div>天气小工具：
可以去：https://www.tianqi.com/ 申请代码粘贴小工具
本站已经安全运行XX年XX天XX秒
把如下代码放在html页面的网站底部你想放的地方
<span id="sitetime" style="color: #3f7fe0;" ></span>style=”color: #3f7fe0;” 为设置字体颜色代码
JS代码如下：代码放在</body>之前即可（放在js里面记得取消<script></script>）
<script language=javascript>
function siteTime(){
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth()+1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
year - 作为date对象的年份，为4位年份值
month - 0-11之间的整数，做为date对象的月份
day - 1-31之间的整数，做为date对象的天数
hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
minutes - 0-59之间的整数，做为date对象的分钟数
seconds - 0-59之间的整数，做为date对象的秒数
microseconds - 0-999之间的整数，做为date对象的毫秒数 */
var t1 = Date.UTC(2017,09,16,00,00,00); //北京时间2017-09-16 00:00:00创建网站的时间
var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
var diff = t2-t1;
var diffYears = Math.floor(diff/years);
var diffDays = Math.floor((diff/days)-diffYears*365);
var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
document.getElementById("sitetime").innerHTML=+diffYears+"年"+diffDays+"天"+diffHours+"时"+diffMinutes+"分钟"+diffSeconds+"秒";
}
siteTime();
</script>通用的网站广告位占位/招租的代码实例
广告位占位代码 实例一：灰色虚线链接框
复制以下代码到主题设置-自定义代码-自定义css样式中
a.tbaru{border:2px dashed #aaa;padding:40px 15px;font-size:14px;background-color:#fff;display:block;text-decoration:none;color:#888;font-weight:bold;text-align:center;}
a.tbaru:hover{border-color:#666;color:#444;}
@media (max-width:640px){a.tbaru{font-size:12px;padding:25px 15px;}}
然后，复制以下代码到你需要显示的广告位代码框中，其中的中文字可按照自己需求修改
<a class="tbaru" href="链接地址" target="_blank">这是一个广告位，电脑和手机可分别设置</a>
广告位占位代码 实例二：深灰底白色字链接块
复制以下代码到主题设置-自定义代码-自定义css样式中
a.tbaru{padding:40px 15px;font-size:14px;background-color:#666;display:block;text-decoration:none;color:#fff;font-weight:bold;text-align:center;}
a.tbaru:hover{border-color:#555;color:#fff;}
@media (max-width:640px){a.tbaru{font-size:12px;padding:25px 15px;}}
然后，复制以下代码到你需要显示的广告位代码框中，其中的中文字可按照自己需求修改
<a class="tbaru" href="链接地址" target="_blank">这是一个广告位，电脑和手机可分别设置</a>
广告位占位代码 实例三：浅灰链接块
复制以下代码到主题设置-自定义代码-自定义css样式中
a.tbaru{padding:40px 15px;font-size:14px;background-color:#f6f6f6;display:block;text-decoration:none;color:#aaa;font-weight:bold;text-align:center;}
a.tbaru:hover{border-color:#eee;color:#666;}
@media (max-width:640px){a.tbaru{font-size:12px;padding:25px 15px;}}
然后，复制以下代码到你需要显示的广告位代码框中，其中的中文字可按照自己需求修改
<a class="tbaru" href="链接地址" target="_blank">这是一个广告位，电脑和手机可分别设置</a>
简约版彩色文字广告位代码
代码放到你想放置的地方
<div class="single-top-html">
<style>
.tp_advertising{
width: 100%;
display: flex;
justify-content: space-between;
background: #fff;
position: relative;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.tp_advertising p{
color: #fff;
font-size: 14px;
line-height: 22px;
background: #6F8EC5;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0 8px;
border-top-left-radius: 10px;
opacity: .3;
}
.tp_advertising div{
width: 16.66%;
position: relative;
z-index: 1;
}
.tp_advertising a{
font-size: 12px;
line-height: 22px;
text-align: center;
display: block;
text-decoration: none;
white-space:nowrap;
}
.tp_advertising a:hover{
font-weight: bold;
font-size: 14px;
text-shadow: 0px 0px 1px rgba(0,0,0,.5);
}
.tp_1 a{
color: #FF0033;
}
.tp_2 a{
color: #9400D3;
}
.tp_3 a{
color: #00BFFF;
}
.tp_4 a{
color: #FF1493;
}
.tp_5 a{
color: #FF4500;
}
.tp_6 a{
color: #5fb878;
}
</style>
<div class="tp_advertising">
<p>广告</p>
<div class="tp_1">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_2">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_3">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_4">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_5">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
<div class="tp_6">
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
<a href="#" target="_blank">广告招租</a>
</div>
</div>
</div>
WordPress网站添加回复可见内容
functions.php
在主题根目录下的functions.php文件中添加以下代码:
//部分内容评论可见
function reply_to_read($atts, $content = null) {
extract(shortcode_atts(array(
"notice" => '<div class="reply">隐藏内容，回复可见“<a href="'%20.%20get_permalink()%20.%20'#respond" title="回复可见">回复本文</a>”后“<a href="javascript:window.location.reload();" title="刷新页面">刷新页面</a>”查看隐藏内容！</div>'
) , $atts));
$email = null;
$user_ID = (int)wp_get_current_user()->ID;
if ($user_ID > 0) {
$email = get_userdata($user_ID)->user_email;
//对博主直接显示内容
$admin_email = get_bloginfo('admin_email');
if ($email == $admin_email) {
return $content;
}
} else if (isset($_COOKIE['comment_author_email_' . COOKIEHASH])) {
$email = str_replace('%40', '@', $_COOKIE['comment_author_email_' . COOKIEHASH]);
} else {
return $notice;
}
if (emptyempty($email)) {
return $notice;
}
global $wpdb;
$post_id = get_the_ID();
$query = "SELECT `comment_ID` FROM {$wpdb->comments} WHERE `comment_post_ID`={$post_id} and `comment_approved`='1' and `comment_author_email`='{$email}' LIMIT 1";
if ($wpdb->get_results($query)) {
return do_shortcode($content);
} else {
return $notice;
}
}
add_shortcode('reply', 'reply_to_read');
接着需要在编辑器中添加自定义按钮functions.php添加以下代码:
//添加HTML编辑器自定义快捷标签按钮
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'reply', '回复可见', '[@reply]\n\n[/reply]\n', "" );
</script>
<?php
}
以上代码其中[@reply]中的@去掉
style.css
在主题根目录下的style.css文件中添加以下代码:
/*回复可见*/
.reply {
padding: 10px;
border: 1px #49aff9 dashed;
background-color: #fafafa;
color: #f40000;
text-align: center;
font-size: 14px;
}
以上代码根据自己喜欢可以适当修改
调用代码
在文本编辑框可看到回复可见按钮，插入即可，或者输入[@reply]和[/reply]，其中@删除掉
侧边栏添加简单的小模块
<a class="ads" href="https://www.996dh.cn/web_tools" target="终极导航" style="border-radius:5px;">
<h4>996导航</h4>
<h5>996导航推荐，安全有保障</h5>
<span class="ads-btn ads-btn-outline">立即进入</span></a>
<style>
.ads{display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9)}.ads h4{margin:0; font-size:22px; font-weight:bold}.ads h5{margin:10px 0 0; font-size:14px; font-weight:bold}.ads.ads-btn{margin-top:20px; font-weight:bold}.ads.ads-btn:hover{color:#ff5719}.ads-btn{display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out}.ads-btn:hover,.btn:focus,.btn.focus{outline:0; text-decoration:none}.ads-btn:active,.btn.active{outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}.ads-btn-outline{line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff}.ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus{color:#343a3c; background-color:#fff}
</style>
炫酷的网站小工具-倒计时
<html >
<head>
<style type="text/css">
.se-kl{width:190px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:30px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}
</style>
</head>
<body>
<div class="se-kl">
<div class="se-cn">倒计时</div>
<div class="se-en">COUNT DOWN</div>
<i class="se-io"></i>
<div class="se-info">距离结束还剩</div>
<div class="se-count">
<div class="se-day"></div>
<div class="se-hour"><span class="se-txt">00</span></div>
<div class="se-min"><span class="se-txt">00</span></div>
<div class="se-sec"><span class="se-txt">00</span></div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var oDate = new Date();
var nowTime = oDate.getTime(); //现在的毫秒数
oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
var targetDate = new Date(oDate.toLocaleDateString());
run(targetDate);
});
function run(enddate) {
getDate(enddate);
setInterval("getDate('" + enddate + "')", 500);
}
function getDate(enddate) {
var oDate = new Date(); //获取日期对象
var nowTime = oDate.getTime(); //现在的毫秒数
var enddate = new Date(enddate);
var targetTime = enddate.getTime(); // 截止时间的毫秒数
var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数
var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
second = second % 86400; //余数代表剩下的秒数；
var hour = Math.floor(second / 3600); //整数部分代表小时；
second %= 3600; //余数代表 剩下的秒数；
var minute = Math.floor(second / 60);
second %= 60;
var spanH = $('.se-txt')[0];
var spanM = $('.se-txt')[1];
var spanS = $('.se-txt')[2];
spanH.innerHTML = tow(hour);
spanM.innerHTML = tow(minute);
spanS.innerHTML = tow(second);
}
function tow(n) {
return n >= 0 && n < 10 ? '0' + n : '' + n;
}
</script>
</body>
</html>996导航倒计时板块：
<html >
<head>
<style type="text/css">
.se-kl{width:310px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:95px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}
</style>
</head>
<body>
<div class="se-kl">
<div class="se-cn">新年倒计时</div>
<div class="se-en">COUNT DOWN</div>
<i class="se-io"></i>
<div class="se-info">距离结束还剩</div>
<div class="se-count">
<div class="se-day"></div>
<div class="se-hour"><span class="se-txt">00</span></div>
<div class="se-min"><span class="se-txt">00</span></div>
<div class="se-sec"><span class="se-txt">00</span></div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var oDate = new Date();
var nowTime = oDate.getTime(); //现在的毫秒数
oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
var targetDate = new Date(oDate.toLocaleDateString());
run(targetDate);
});
function run(enddate) {
getDate(enddate);
setInterval("getDate('" + enddate + "')", 500);
}
function getDate(enddate) {
var oDate = new Date(); //获取日期对象
var nowTime = oDate.getTime(); //现在的毫秒数
var enddate = new Date(enddate);
var targetTime = enddate.getTime(); // 截止时间的毫秒数
var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数
var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
second = second % 86400; //余数代表剩下的秒数；
var hour = Math.floor(second / 3600); //整数部分代表小时；
second %= 3600; //余数代表 剩下的秒数；
var minute = Math.floor(second / 60);
second %= 60;
var spanH = $('.se-txt')[0];
var spanM = $('.se-txt')[1];
var spanS = $('.se-txt')[2];
spanH.innerHTML = tow(hour);
spanM.innerHTML = tow(minute);
spanS.innerHTML = tow(second);
}
function tow(n) {
return n >= 0 && n < 10 ? '0' + n : '' + n;
}
</script>
</body>
</html>
主题添加浏览器右侧滚动条美化
将下面css代码复制添加到主题css文件即可或者添加到主题自定义css代码里面
/*滚动条样式*/
::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%,
rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}主题鼠标点击爱心特效
代码：主题页眉(header)中引用
<script>
//鼠标点击出现爱心特效
(function(window,document,undefined){
var hearts = [];
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback){
setTimeout(callback,1000/60);
}
})();
init();
function init(){
css(".heart{width:10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop(){
for(var i=0;i<hearts.length;i++){
if(hearts[i].alpha <=0){
document.body.removeChild(hearts[i].el);
hearts.splice(i,1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent(){
var old = typeof window.οnclick==="function" && window.onclick;
window.onclick = function(event){
old && old();
createHeart(event);
}
}
function createHeart(event){
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el : d,
x : event.clientX - 5,
y : event.clientY - 5,
scale : 1,
alpha : 1,
color : randomColor()
});
document.body.appendChild(d);
}
function css(css){
var style = document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor(){
return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
}
})(window,document);
</script>
网站导航菜单栏目增加角标
/*菜单标签美化黄色*/
.vip {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
/*菜单标签美化红色*/
.new {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to top, #f308a0 0%, #fb0655 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
/*菜单标签美化蓝色*/
.label {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to right, #6454ef 0%, #3021ec 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
/*菜单标签美化绿色*/
.hot {
display: inline-block;
transform: translateY(-12px);
font-size: .75rem;
letter-spacing: 0.05em;
background: linear-gradient(to right, #02C874 0%, #00BB00 100%);
color: #ffffff;
border-radius: 1rem;
padding: .15rem .275rem;
line-height: 1;
font-weight: bold;
}
然后到主题下面的菜单设置里，在你的菜单名字后面添加上你需要的代码，如
<span class="hot">推荐</span> 显示的是绿色，大家可以自定义颜色代码
样式为258导航所用演示，其他的主题位置有偏移适当修改就好了！
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
