功能
:::: collapse-panel accordion
::: collapse-item 框架引用单页代码
<iframe style="max-width: 100%"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="100%"
height="750px"
src="http://yejiuqiu.cn">
</iframe>
:::
::: collapse-item 不同时间段问候语代码
<div class="sidebar">
<div class="widget widget_ui_textads widget_twitter"><a class="style01"><strong>温馨提示：</strong>
<br><br><font size="2" color="#999">
<script language="JavaScript">
day = new Date( )
nge_Hour = day.getHours( )
var nge_warmprompt = "";
if (nge_Hour == 0)
nge_warmprompt = "现在已经过凌晨了，身体是无价的资本喔，小伙伴早点休息吧！ --九秋笔记"
if (nge_Hour == 1)
nge_warmprompt = "凌晨1点多了，工作是永远都做不完的，小伙伴别熬坏身子！ --九秋笔记"
if (nge_Hour == 2)
nge_warmprompt = "亲爱的小伙伴该休息了，身体可是革命的本钱啊！ --九秋笔记"
if (nge_Hour == 3)
nge_warmprompt = "夜深了，熬夜很容易导致身体内分泌失调，长痘痘的！ --九秋笔记"
if (nge_Hour == 4)
nge_warmprompt = "四点过了额(⊙o⊙)…，你明天不学习工作吗？？？ --九秋笔记"
if (nge_Hour == 5)
nge_warmprompt = "你知道吗，此时是国内网络速度最快的时候！ --九秋笔记"
if (nge_Hour == 6)
nge_warmprompt = "清晨好，这么早就来网站啦，谢谢小伙伴的关注哦，昨晚做的梦好吗？ --九秋笔记 "
if (nge_Hour == 7)
nge_warmprompt = "新的一天又开始了，祝你过得快乐! --九秋笔记"
if (nge_Hour == 8)
nge_warmprompt = "小伙伴早上好哦，一天之际在于晨，又是美好的一天！ --九秋笔记"
if ((nge_Hour == 9) || (nge_Hour ==10))
nge_warmprompt = "上午好！今天你看上去好精神哦！ --九秋笔记"
if (( nge_Hour == 11) || (nge_Hour == 12))
nge_warmprompt = "小伙伴啊！该吃午饭啦！有什么好吃的？您有中午休息的好习惯吗？ --九秋笔记"
if (( nge_Hour >= 13) && (nge_Hour <= 17))
nge_warmprompt = "下午好！外面的天气好吗？记得朵朵白云曾捎来朋友殷殷的祝福。 --九秋笔记"
if (( nge_Hour >= 17) && (nge_Hour <= 18))
nge_warmprompt = "太阳落山了！快看看夕阳吧！如果外面下雨，就不必了 ^_^ --九秋笔记"
if (( nge_Hour >= 18) && (nge_Hour <= 19))
nge_warmprompt = "晚上好，小伙伴今天的心情怎么样？去留言板诉说一下吧！ --九秋笔记"
if (( nge_Hour >= 19) && (nge_Hour <= 21))
nge_warmprompt = "忙碌了一天，累了吧？去看看最新的新闻资讯醒醒脑吧！ --九秋笔记"
if (( nge_Hour >= 22) && (nge_Hour <= 23))
nge_warmprompt = "这么晚了，小伙伴还在上网？早点洗洗睡吧，睡前记得洗洗脸喔！明天一天都会萌萌哒！ --九秋笔记"
document.write("<div><i class='fa fa-beer'></i> ")
document.write(nge_warmprompt)
document.write("</div>")
</script>
</font><br>
</a>
</div>
</div>
</div>
:::
::: collapse-item 网站访客统计
给网站增加一个统计访问量的小功能。
在网站根目录新建一个名为tongji.php的文件，然后写入以下代码
<?php
$n=file_get_contents('tongji.txt');
$n++;
file_put_contents('tongji.txt',$n);
echo "document.write($n);";
?>
在需要显示的地方添加以下调用代码
你是第<script type=text/javascript src=tongji.php></script>位访问者
加入调用代码后打开网页，会在后台生成一个名为tongji.txt的记录文件，编辑此文件可以实现修改访问量，如需统计次目录下的单页访问量，可以在次目录下新建tongji.php文件，然后添加调用代码即可。
:::
::: collapse-item 网站变灰代码
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;
utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
将代码加入网页的style标签内或者加入网站style.css中即可。
:::
::: collapse-item 手机端底部悬浮代码
手机端底部悬浮代码，将链接改成自己的联系方式，粘贴到全局代码里面就行了。
<style type="text/css">
.nav{
display:none;
}
@media only screen and (max-width:450px){
.site-info{
padding:15px 0 58px 0;
}
#advert_widget, .php_text .widget-text, .widget .textwidget{
padding:0;
}
.nav{
position:fixed;
z-index:999;
bottom:0;
width:100%;
height:40px;
display:block;
right:0;
box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-webkit-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-mox-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-o-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
-ms-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
}
.nav{
padding-left:0;
margin-bottom:0;
list-style:none;
}
.nav span{
width:50px !important;
height:50px !important;
}
.font-text {
margin: 0 0 0 5px;
color: #1ba1e2;
}
.nav > ul{
position:relative;
z-index:1;
height:40px;
background: rgba(255,255,255,.85);
list-style-type:none;
margin:0px;
padding:0px!important;
}
.nav ul li{
position:relative;
float:left;
width:25%;
text-align:center;
margin:0px;
padding:0px
list-style-type:none;
top:10px;
}
.nav ul li a{
display:block;
margin-right:auto;
margin-left:auto;
}
}
</style>
<div class="nav">
<ul>
<li> <a href="/"><span class="font-text"><i class="iconfont icon-shouye"></i> <span class="font-text">手机联系</span></span></a></li>
<li> <a href="/"><span class="font-text"><i class="be be-loader"></i> <span class="font-text">QQ咨询</span></span></a></li>
<li> <a href="/"><span class="font-text"><i class="iconfont icon-weiyuqiang-"></i> <span class="font-text">在线沟通</span></span></a></li>
<li> <a href="/"><span class="font-text"><i class="iconfont icon-liuyan"></i> <span class="font-text">留言咨询</span></span></a></li>
</ul>
</div>
:::
::: collapse-item 随机文字代码
随机文字代码，比起那些固定内容的API接口，自定义的随机文字效果更好。
<center><script language="JavaScript">
<!-- Hide
var a = Math.random() + ""
var rand1 = a.charAt(5)
quotes = new Array
<!-- 修改下面的文字为你需要的文字-->
quotes[1] = '文本内容1'
quotes[2] = '文本内容2'
quotes[3] = '文本内容3'
quotes[4] = '文本内容4'
quotes[5] = '文本内容5'
quotes[6] = '文本内容6'
quotes[7] = '文本内容7'
quotes[8] = '文本内容8'
quotes[9] = '文本内容9'
quotes[0] = '文本内容10'
var quote = quotes[rand1]
//-->
</script>
<script language="JavaScript">
<!-- Hide
document.write(quote)
// -->
</script></center>
:::
::: collapse-item 随机跳转代码
直接跳转代码
<script language='javascript'>document.location = http://yejiuqiu.cn''</script>
随机跳转
<script type="text/javascript" >
var dumplist=["http://zimeiti.yejiuqiu.cn","http://yejiuqiu.cn","http://yejiuqiu.cn/youlian/","http://juxian.yejiuqiu.cn"];
var n=Math.floor(Math.random()* dumplist.length + 1)-1;
//var p=alert(Arr[n]);
window.location.href=dumplist[n];
</script>
:::
::: collapse-item 防止iframe代码分享
<script>
this.top.location !== this.location && (this.top.location = this.location);
</script>
:::
::::
美化
:::: collapse-panel accordion
::: collapse-item 右下角安全图标
<div id="cc-myssl-id" style="position: fixed;right: 0;bottom: 0;width: 65px;height: 65px;z-index: 99;">
<img src="/uploads/2024/08/20240823140119_myssl-id.png" target="_blank" rel="nofollow noopener noreferrer" alt="叶九秋" style="width:100%;height:100%">
</a>
</div>
:::
::: collapse-item PC端滚动条美化
/*滚动条*/
/*—滚动条默认显示样式–*/
::-webkit-scrollbar-thumb{
background-color:#20a0e1;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*—鼠标点击滚动条显示样式–*/
::-webkit-scrollbar-thumb:hover{
background-color:#20a0e1;
height:50px;
-webkit-border-radius:4px;
}
/*—滚动条大小–*/
::-webkit-scrollbar{
width:16px;
height:16px;
}
/*—滚动框背景样式–*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}
:::
::: collapse-item 雪花飘落效果
<script type="text/javascript">
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度，数字越小越密集 */
});
});
</script>
:::
::: collapse-item 动态网页标题
给网页标题增加动态文字，在离开当前页面的时候，会有提示。
<script type="text/javascript">
/* 动态网页标题*/
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
if (document.hidden) {
$('[rel="shortcut icon"]').attr("href", "https:/yejiuqiu.cn/favicon.ico");
document.title = "你别走吖 Σ(っ °Д °;)っ";
clearTimeout(titleTime)
} else {
$('[rel="shortcut icon"]').attr("href", "https://yejiuqiu.cn/favicon.ico");
document.title = "你可算回来了 (｡•ˇ‸ˇ•｡)" + OriginTitile;
titleTime = setTimeout(function() {
document.title = OriginTitile
},
2000)
}
});
</script>
:::
::: collapse-item 彩色文字打印特效
<div id="chakhsu"></div>
<script>
var chakhsu = function (r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
/*以下内容自定义修改*/
var l = "众里寻他千百度，",
o = ["蓦然回首，那人却在灯火阑珊处。", ].map(function (r) {
return r + ""
}), a = 2, g = 1, s = 5, d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g};
i()
};
chakhsu(document.getElementById('chakhsu'));
</script>
:::
::: collapse-item 鼠标点击特效
文字特效
<script type="text/javascript">
/* 鼠标点击文字特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
心形特效
<script type="text/javascript">
/*鼠标点击爱心特效*/
!function(e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(),
o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart",
s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}),
t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch(t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame ||
function(e) {
setTimeout(e, 1e3 / 60)
},
i(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),
n(),
r()
} (window, document);
</script>
:::
::: collapse-item 微信分享缩略图
首先准备一张300*300的图片作为缩略图。
在head头部添加一个div，包含img标签。
<div style="display:none;"><img src="/img/wechat.png" alt=""></div>
<meta property="og:image" content="https://*.***.***/*.png">
第一行src、第二行content更改为图片地址即可，第二行的图片地址必须为完整地址。
:::
::::
工具
DevTools：Chrome 插件，即时修改页面和快速诊断问题。