请注意,本文编写于 442 天前,最后修改于 435 天前,其中某些信息可能已经过时。
滚动条效果
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width:9px;
height:8px;
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color:white;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
border-radius: 0em;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background-color: #ff676c;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
cursor: pointer;
}
左侧彩色图标&右侧彩色标签云
需要将以下代码添加到PJAX->PJAX回调函数中
红色为主,不太好看
//左侧图标多彩
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr=["#ff3300","#ff3399","#54d100","#9900cc","#0033ff","#FF6699","#FF33FF","#ff8100","#33CC00","#FF1493","#8A2BE2","#8B3E2F","#00CC33"];
leftHeader.forEach(
tag=>{
tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];
tag.style.color=tagsColor
}
);
// 右侧彩色标签云
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#0089ff", "#00c919", "#ff4747", "#c052ff", "#ff8939","#ff1200","#ff3399","#ffde00","#6000ff"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
info.style.backgroundColor = infosColor;
});
function addNumber(a) {
var length = document.getElementById("comment").value.length;
if(length> 0){
document.getElementById("comment").focus()
document.getElementById("comment").value += '\n' + a + new Date
}else{
document.getElementById("comment").focus()
document.getElementById("comment").value += a + new Date
}
}
$(function(){
$("#PageLoading").fadeOut(400);
$("#body").css('overflow','');
});
博主文字介绍动态化
将代码里的 这是我的介绍文字内容修改成需要展示的文字内容即可,顺便那个❤也是可以改的。 将以下代码放到 主题后台-外观-设置外观-初级设置-博主的介绍内即可
<span class="text-muted text-xs block"><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>
</span>
Typecho开启Gzip加速
Typecho开启Gzip加速
找到Typecho安装目录中的config.inc.php文件,添加一行代码即可。
/* 开启gzip压缩 */
ob_start('ob_gzhandler');
handsome实现评论一键打卡、赞、踩功能
handsome实现评论一键打卡、赞、踩功能
在handsome/component/comment.php中替换成如下内容
在handsome/component/comment.php中替换成如下内容
<div class="comment-form-comment form-group">
<label for="comment"><?php _me("评论") ?>
<span class="required text-danger">*</span>
</label>
<span class="required text-danger">(请使用真实邮箱地址,方便及时接收评论回复!)</span>
<textarea id="comment" class="textarea form-control OwO-textarea" name="text" rows="5" placeholder="<?php _me("说点什么吧……") ?>" οnkeydοwn="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"><?php $this->remember('text'); ?>
</textarea>
<div class="OwO padder-v-sm" style="display: inline;" ></div>
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();"><div class="OwO-logo"><span class="smile-icons"><i class="iconfont icon-daohanglan-01"></i></span><span class="OwOlogotext">打卡</span></div></div>
<div class="OwO" title="语录" style="display: inline;" onclick="javascript:SIMPALED.Editor.yulu();"><div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">语录</span></div></div>
<div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div></div>
<div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();"><div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div></div>
<?php $options = mget(); if (in_array('ajaxComment', Utils::checkArray( $options->featuresetup))): ?>
<div class="secret_comment" id="secret_comment" data-toggle="tooltip" data-original-title="<?php _me("开启该功能,您的评论仅作者和评论双方可见") ?>">
<label class="secret_comment_label control-label"><?php _me("私密评论") ?></label>
<div class="secret_comment_check">
<label class="i-switch i-switch-sm bg-dark m-b-ss m-r">
<input type="checkbox" id="secret_comment_checkbox">
<i></i>
</label>
</div>
</div>
<?php endif; ?>
</div>
在后台 --> 设置外观 --> 开发者设置 --> 自定义JavaScript 加入以下代码:
<!--评论 打卡、赞、踩 功能-->
window.SIMPALED = {}; // 创建全局对象 SIMPALED,用于存放编辑器功能
// ... (existing code)
// 定义一个函数 a,用于在文本框中插入文字
function a(a, b, c) {
if (document.selection) {
a.focus();
sel = document.selection.createRange();
c ? (sel.text = b + sel.text + c) : (sel.text = b);
a.focus();
} else if (a.selectionStart || "0" == a.selectionStart) {
var l = a.selectionStart;
var m = a.selectionEnd;
var n = m;
c
? (a.value =
a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length))
: (a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length));
c ? (n += b.length + c.length) : (n += b.length - m + l);
l == m && c && (n -= c.length);
a.focus();
a.selectionStart = n;
a.selectionEnd = n;
} else {
a.value += b + c;
a.focus();
}
}
window.SIMPALED.Editor = {
daka: function() {
var b = new Date().toLocaleTimeString();
var c = document.getElementById("comment") || 0;
a(c, "滴!学生卡!打卡时间:" + b, ",请上车的乘客系好安全带~<br>");
// 将光标移到文本最后
if (c.setSelectionRange) {
var len = c.value.length;
c.setSelectionRange(len, len);
c.focus();
} else if (c.createTextRange) {
var range = c.createTextRange();
range.collapse(false);
range.select();
c.focus();
}
},
zan: function() {
var c = document.getElementById("comment") || 0;
var yuluResponses = [
" 这篇文章展现了作者深邃的思想和独特的观点,令人赞叹不已。 ::aru:proud:: <br>",
" 文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动,实在值得赞美。 ::aru:proud:: <br>",
" 作者以敏锐的洞察力和真挚的情感,将文字融为一体,这种写作技巧令人赞赏。::aru:proud:: <br>",
" 这篇文章展现了作者的才华和学识,无不让人对其赞美有加。 ::aru:proud:: <br>",
" 文章中的感人故事和深刻的寓意令人深深地感动和赞叹。::aru:proud:: <br> ",
" 作者的文字流畅而富有节奏感,令人为之倾倒,实在是一篇令人赞美的佳作。 ::aru:proud:: <br>",
" 文章中的深邃思考和清晰逻辑令人对作者的才华赞赏不已。 ::aru:proud:: <br>",
" 这篇文章的独到见解和新颖观点,让人对作者的创意赞美有加。 ::aru:proud:: <br>",
" 作者运用生动的比喻和细腻的描写,让读者仿佛身临其境,实在是一种令人赞美的写作艺术。 ::aru:proud:: <br>",
" 这篇文章的深情笔触和真挚感受让人深深感叹,实在是一篇值得赞美的美文。 ::aru:proud:: <br>",
// // 添加更多额外的语录内容
];
var randomIndex = Math.floor(Math.random() * yuluResponses.length);
var randomResponse = yuluResponses[randomIndex];
a(c, randomResponse);
},
cai: function() {
var c = document.getElementById("comment") || 0;
var yuluResponses = [
" 我是来替大家批评博主的,我是来批评的,这篇文章的结构有点混乱,需要更好地组织和展开内容。博主多多像我学习啊!::aru:spit:: <br>",
" 我是来替大家批评博主的,作者的表达能力有待提高,有些地方表述不够清晰,读者可能会感到困惑。博主多多像我学习啊! ::aru:spit:: <br>",
" 我是来替大家批评博主的,文章的语法错误较多,建议仔细检查并进行修改。博主多多像我学习啊! ::aru:spit:: <br>",
" 我是来替大家批评博主的,内容有些空洞,需要更多具体的例子或细节来支撑观点。博主多多像我学习啊!::aru:spit:: <br>",
" 我是来替大家批评博主的,文章缺乏逻辑,有些段落之间的衔接不够自然。博主多多像我学习啊! ::aru:spit:: <br>",
" 我是来替大家批评博主的,作者的观点没有充分论证,需要更多的证据和理由来支持主张。博主多多像我学习啊! ::aru:spit:: <br>",
" 我是来替大家批评博主的,文章中出现了一些拼写错误和用词不当的情况,建议进行仔细校对。博主多多像我学习啊! ::aru:spit:: <br>",
" 我是来替大家批评博主的,语言表达过于简单,可以尝试使用更丰富的词汇和句式来提升文章质量。博主多多像我学习啊!::aru:spit:: <br>",
" 我是来替大家批评博主的,这篇文章的主题不够突出,需要更好地明确中心思想。博主多多像我学习啊! ::aru:spit:: <br>",
" 我是来替大家批评博主的,文章缺乏吸引人的开头,建议引入更有趣的故事或引语来吸引读者注意。博主多多像我学习啊! ::aru:spit:: <br>",
// // 添加更多额外的语录内容
];
var randomIndex = Math.floor(Math.random() * yuluResponses.length);
var randomResponse = yuluResponses[randomIndex];
a(c, randomResponse);
},
yulu: function() {
var c = document.getElementById("comment") || 0;
var yuluResponses = [
" 有你在的日子才是我的日常。 ::aru:nomatter:: <br>",
" 夹在我女友与前女友与青梅竹马间的果然是修罗场! ::aru:nomatter:: <br>",
" 既然如此,就再努力一次吧。别在这里愁眉不展,也不要再自欺欺人,重新来过! ::aru:nomatter:: <br>",
" 比自己,比梦想更重要的东西永远都存在着... ::aru:nomatter:: <br>",
" 嘛,那又怎么样呢? ::aru:nomatter:: <br>",
" 自身不先改变的话,一切都不会改变。 ::aru:nomatter:: <br>",
" 比起有一百个朋友,不如有个比一百人还要重要的真心朋友。 ::aru:nomatter:: <br>",
" 我有在反省,但我不后悔。 ::aru:nomatter:: <br>",
" 要超越过去与悲伤,用坚强和笑容去开拓明天。 ::aru:nomatter:: <br>",
" 男人许下的诺言就一定要遵守。 ::aru:nomatter:: <br>",
" 没有回忆就去创造回忆,没有道路就去开辟道路。 ::aru:nomatter:: <br>",
" 我敬你是条汉子! ::aru:nomatter:: <br>",
" 不相信自己的人,连努力的价值都没有。 ::aru:nomatter:: <br>",
" 微风摇曳着窗帘,夕阳斜射入教室,在那里鼓起勇气告白的少年。即使现在也能清晰地回想起她的声音「当朋友,不行吗?」 ::aru:nomatter:: <br>",
" 就算是沉落地面的太阳,只要夜晚过了一定会再度升起,不管有什么痛苦或难过的事,跟今天截然不同的明天也一定会到来。 ::aru:nomatter:: <br>",
" 我的腿让我停下,可是心却不允许我那么做。 ::aru:nomatter:: <br>",
" 生活就像超级女生,走到最后的都是纯爷们。 ::aru:nomatter:: <br>",
" 我要拼,装上假牙也要拼! ::aru:nomatter:: <br>",
" 想要成为无论多么悲伤的时候,也能够漂亮微笑的人吧。 ::aru:nomatter:: <br>",
" 人们只是用好人来称呼对自己有用的人而以,不存在对所有人都有用的人。 ::aru:nomatter:: <br>",
" 烈焰中舞动的火花,将赐予邪恶异性交往以天罚。 ::aru:nomatter:: <br>",
" 无论乌云有多浓厚,星星也一定还在,只是暂时看不到了而已。 ::aru:nomatter:: <br>",
" 不相信人咬不到肚脐的,咬破肚脐去死如何? ::aru:nomatter:: <br>",
" 人一生会遇到约万人,两个人相爱的概率是.。所以你不爱我,我不怪你。 ::aru:nomatter:: <br>",
" 不管看到什么样的过去,都请不要迷失自己,不管你变成什么样子,我都是你的同伴。 ::aru:nomatter:: <br>",
" 心,可是很重的。 ::aru:nomatter:: <br>",
" 我爱上的人,称我为怪叔叔 ::aru:nomatter:: <br>",
" 慕君之心,至死方休。 ::aru:nomatter:: <br>",
" 虚伪的眼泪,会伤害别人,虚伪的笑容,会伤害自己。 ::aru:nomatter:: <br>",
" 若隐若现才是艺术! ::aru:nomatter:: <br>",
" 生我何用?不能欢笑。灭我何用?不减狂骄。 ::aru:nomatter:: <br>",
" 就是因为你不好,才要留在你身边,给你幸福。 ::aru:nomatter:: <br>",
" 呐,我们好像是,被宇宙和地球拆散的恋人似的。 ::aru:nomatter:: <br>",
" 你会梦游,我会磨牙,我们晚上一起去吓人吧! ::aru:nomatter:: <br>",
" 或许只需一滴露水,便能守护这绽放的花朵。 ::aru:nomatter:: <br>",
" 自己永远是孤单的,但你可以让其他人变得不孤单。 ::aru:nomatter:: <br>",
" 和哥哥的便当比起来夜空的薯片就像大便一样!只会给我大便的大便夜空是笨蛋~笨蛋~ ::aru:nomatter:: <br>",
" 我手中的魔法,是守护挚爱的力量,是坚定这个信念所必须的力量,我一定会拯救你的,无论在何时、何地。 ::aru:nomatter:: <br>",
" 要改变别人的心真是件很难办的事,不过改变自己要容易一点。 ::aru:nomatter:: <br>",
" 风筝的线你随时可以放开,只是别盼望我会回来。 ::aru:nomatter:: <br>",
" 与你的生命等价的东西,这个世界上根本没有。 ::aru:nomatter:: <br>",
" 君子可寓意于物,但不可留意于物。 ::aru:nomatter:: <br>",
" 最好的感觉,是有人懂你的欲言又止。 ::aru:nomatter:: <br>",
" 看似美好的东西,往往藏着陷阱。 ::aru:nomatter:: <br>",
" 爱,其实很简单,困难的是去接受它。 ::aru:nomatter:: <br>",
" 喜欢大胸只是本能,喜欢贫乳才是审美。 ::aru:nomatter:: <br>",
" 二次元什么的我本来是不感冒的,直到我的膝盖中了一箭。 ::aru:nomatter:: <br>",
" 你才是⑨!你全家都是⑨! ::aru:nomatter:: <br>",
" 努力是不会背叛自己的,虽然梦想有时会背叛自己。 ::aru:nomatter:: <br>",
" 面对就好,去经历就好。 ::aru:nomatter:: <br>",
" 我从小就害怕虫子 ::aru:nomatter:: <br>",
" 做不到的话,不过就是一死 。但是,赢了就能活下去,要是不战斗就赢不了。 ::aru:nomatter:: <br>",
" 既然认准这条路,何必去打听要走多久。 ::aru:nomatter:: <br>",
" 研表究明,汉字的序顺并不定一能影阅响读,比如当你看完这句话后,才发这现里的字全是都乱的。 ::aru:nomatter:: <br>",
" 少年心意,一如明月松间的青石流水,那些年里看到了,却不懂。 ::aru:nomatter:: <br>",
" 明明只是活着,哀伤却无处不在⋯⋯ ::aru:nomatter:: <br>",
" 少罗嗦,你还不如虫子呢! ::aru:nomatter:: <br>",
" 天空是连着的,如果我们也能各自发光的话,无论距离有多远,都能看到彼此努力的身影。 ::aru:nomatter:: <br>",
" 别人恋爱不成功,你连暗恋都不成功! ::aru:nomatter:: <br>",
// // 添加更多额外的语录内容
];
var randomIndex = Math.floor(Math.random() * yuluResponses.length);
var randomResponse = yuluResponses[randomIndex];
a(c, randomResponse);
},
};
左侧彩色导航
左侧彩色导航
自定义 JavaScript 和pjax回调添加下面代码
自定义 JavaScript 和pjax回调添加下面代码
<!--左侧彩色图标-->
let leftHeader=document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");let leftHeaderColorArr=["#7887EB","#ABDEF3", "#6CC3E8", "#86DEF3", "#7887EB", "#9BA8F5","#7988EC","#B3BCF5","#ABDEF3","#B3BCD7","#91D7F3","#7988EC","#9CD2E9","#9BA8F5","#B3BCF5"];leftHeader.forEach(tag=>{tagsColor=leftHeaderColorArr[Math.floor(Math.random()*leftHeaderColorArr.length)];tag.style.color=tagsColor});
右侧标签云
右侧标签云
自定义 JavaScript 和pjax回调添加下面代码
自定义 JavaScript 和pjax回调添加下面代码
<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud a,#tag_cloud-post a"); let colorArr = ["#ABB6F5", "#6B7CEB", "#86D2F3", "#5DBDE7", "#A3DBF3", "#ADD8E6"]; tags.forEach(tag => { tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)]; tag.style.backgroundColor = tagsColor; });
左上角fps显示
左上角fps显示
自定义 JavaScript 和pjax回调添加下面代码
自定义 JavaScript 和pjax回调添加下面代码
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
CSS修改
CSS修改
将以下代码添加至后台-开发者设置-自定义CSS。
将以下代码添加至后台-开发者设置-自定义CSS。
/*手机不显示标签云*/
@media (max-width:767px) {
#tag_cloud,#tag_cloud a,#tag_cloud-post,#tag_cloud-post a {
display: none;
}
}
/*标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}
/*小字体背景色右侧博客信息*/
.badge {
background-color: #ABB6F5;
}
/* 非盒子模式页面宽度 */
.no-container #post-panel, .no-container .blog-posts {
max-width: 90%;
}
/*标签云整齐排列*/
#tag_cloud-2 a {
border-radius: 5px;
width: 32%;
}
/*头像旋转*/
.img-circle {
border-radius: 80%;
animation: light 5s ease-in-out infinite;
transition: 0.5s;
}
.img-circle:hover {
transform: scale(1.15) rotate(360deg);
}
.img-square {
border-radius: 80%;
animation: light 5s ease-in-out infinite;
transition: 0.5s;
}
.img-square:hover {
transform: rotate(360deg);
}
首页图片放大
首页图片放大
/**首页图片放大**/
.item-thumb {
transition: 0.5s;
transform: scale(1.0);
}
.item-thumb:hover {
transition: 0.5s;
transform: scale(1.06);
}
文章end标识
文章end标识
文章end标识
在模板文件 post.php内添加以下代码,建议在83行广告输出结束后添加。
<!--内容结束分割线-->
<div class="tt-fenge-end">
<span>End</span>
</div>
<!--/ 内容结束分割线-->
在后台 自定义css中添加如下代码
/*文章正文下的结束End分割线样式*/
.tt-fenge-end{border-top: 2px dotted #8e8e8e96;margin: 100px 0px 50px;text-align: center;width: 100%;line-height: 0.1em;}
.tt-fenge-end span{background-color: #23b7e5;color: #fff;padding: 5px 15px;top: -14px;border-radius: 20px;font-size: 12px;}
/*深色模式下文章正文下的结束End分割线颜色*/
html.theme-dark .tt-fenge-end{border-top: 2px dotted #4f4f4f;}
自定义海浪背景
自定义海浪背景
添加至后台主题设置-开发者设置-自定义CSS
/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }
添加至后台主题设置-开发者设置-自定义网站头部代码
<div id="wavesDIV" style="display: block;">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
<use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
</g>
</svg>
</div>
背景添加冒泡动画
背景添加冒泡动画
<!--背景添加冒泡动画-->
<div id="bubble"></div><script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>
说明
id: '', //容器ID
num: 100, // 个数
start_probability: 0.1, // 如果数量小于num,有这些几率添加一个新的
radius_min: 1, // 初始半径最小值
radius_max: 2, // 初始半径最大值
radius_add_min: .3, // 半径增加最小值
radius_add_max: .5, // 半径增加最大值
opacity_min: 0.3, // 初始透明度最小值
opacity_max: 0.5, // 初始透明度最大值
opacity_prev_min: .003, // 透明度递减值最小值
opacity_prev_max: .005, // 透明度递减值最大值
light_min: 40, // 颜色亮度最小值
light_max: 70, // 颜色亮度最大值
is_same_color: false, //泡泡颜色是否相同
background:"#f1f3f4" //背景颜色
文章头图放大
文章头图放大
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
加载耗时及访问总量字数统计
加载耗时及访问总量字数统计
在主题的functions.php文件中添加以下代码
//字数统计
function allOfCharacters() {
$chars = 0;
$db = Typecho_Db::get();
$select = $db ->select('text')->from('table.contents');
$rows = $db->fetchAll($select);
foreach ($rows as $row) { $chars += mb_strlen(trim($row['text']), 'UTF-8'); }
$unit = '';
if($chars >= 10000) { $chars /= 10000; $unit = '万'; }
else if($chars >= 1000) { $chars /= 1000; $unit = '千'; }
$out = sprintf('%.2lf %s',$chars, $unit);
return $out;
}
/*访问总量*/
function theAllViews(){
$db = Typecho_Db::get();
$row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
echo number_format($row[0]['SUM(VIEWS)']);
}
//加载耗时
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime() );
$timestart = $mtime[1] + $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime() );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display ) {
echo $r;
}
return $r;
}
然后在/usr/themes/handsome/component/sidebar.php中添加以下代码
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="edit"></i></span> <span class="badge pull-right"><?php echo allOfCharacters(); ?></span><?php _me("全站字数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="user"></i></span> <span class="badge pull-right"><?php echo theAllViews(); ?></span><?php _me("访客总数") ?></li>
<li class="list-group-item text-second"><span class="blog-info-icons"> <i data-feather="clock"></i></span> <span class="badge pull-right"><?php echo timer_stop(); ?></span><?php _me("加载耗时") ?></li>
正文结束添加版权信息
正文结束添加版权信息
post添加
post添加
<!--版权声明开始-->
<div class="entry-content l-h-2x">
<div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
<span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div>
<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
<span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
</div>
</div>
<!--版权声明结束-->
文章中添加网页
文章中添加网页
<iframe align="center" width="100%" height="740px" src="链接地址" frameborder="no" border="0" scrolling="no" marginwidth="0" marginheight="0" ></iframe>
修改右侧缩略图
修改右侧缩略图
路径handsome/functions_mine
2.1 找到这行代码,并把jpg,修改为svg
$random = STATIC_PATH . 'img/sj2/' . $randomNum[$index] . '.svg';
首页list模糊显示
首页list模糊显示
libs/content.php中修改
添加内容:
<div class="tt-blur-img" style="background-image:url($parameterArray[imgSrc])" ></div>
至
$html .= <<<EOF
<div class="panel-small single-post box-shadow-wrap-normal tt-small-blur">
<div class="index-post-img-small post-feature index-img-small tt-left-box">
<a href="{$parameterArray['linkUrl']}">
<div class="item-thumb-small lazy tt-left-img">
<img $img class="post-pic lazy">
</div>
</a>
</div>
XXXX这里
EOF;
添加自定义css
/*首页list模糊显示*/
.tt-small-blur{position:relative;z-index:1;display:flex;overflow:hidden;background-color:#8abcd1;color:#fff;}
.tt-small-blur .tt-left-box{z-index:1;-webkit-clip-path:polygon(0 0,94% 0,100% 100%,0 100%);clip-path:polygon(0 0,94% 0,100% 100%,0 100%);}
.tt-small-blur .tt-left-img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
.tt-small-blur .tt-blur-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%;background-position:center;background-size:cover;transform:scale(1.4);-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(1.275rem) brightness(.83);filter:blur(1.275rem) brightness(.83);}
.tt-small-blur .post-meta{z-index:1;display:flex;color:inherit;flex-direction:column;justify-content:space-between;}
.tt-small-blur .text-title{color:inherit;}
.tt-small-blur .post-meta h2,.tt-small-blur .post-meta p{text-shadow:.1875rem .1875rem .3125rem #333;letter-spacing:.09rem;}
.tt-small-blur .text-muted{color:inherit;}
.tt-small-blur .post-meta {padding: 30px 30px 15px 30px;}
.post-item-foot {background: #eeeeee52;}
html.theme-dark .text-muted {
color: #eeeeeed6!important;
}
html.theme-dark .text-title {
color: #ffffffad!important;
}
@media (max-width:500px){.tt-small-blur .index-post-title{display:-webkit-box;display:-moz-box;overflow:hidden;margin-bottom:2px;height:48px;text-overflow:ellipsis;white-space:normal;word-wrap:break-word;line-height:1.4;-webkit-line-clamp:2;-webkit-box-orient:vertical;-moz-line-clamp:2;-moz-box-orient:vertical;word-break:break-all;}}
@media (max-width:500px){.tt-small-blur .summary{display:none;}}
@media (max-width:380px){.tt-small-blur .post-meta{padding:10px 15px;}}
@media (min-width:768px) and (max-width: 1199px){.tt-small-blur .summary {height: 55px;}.tt-small-blur .line-lg {margin-top: 1px;margin-bottom: 1px;}}
修改字体
选择字体,然后去字体转换把 otf、ttf转换成 woff格式。
将转换成功后的字体上传至网站目录中,默认字体目录是 /usr/themes/handsome/assets/fonts文件夹里。
前往 外观设置-开发者设置-自定义css中添加以下代码
/*自定义字体*/
@font-face{font-family:HarmonyOS_Sans_SC_Medium;font-style:normal;font-display:swap; src:url(填写字体所在的位置) format('woff2')}
*{font-family:HarmonyOS_Sans_SC_Medium} body {font- family: HarmonyOS!important;}
添加浏览器UA标识
在comment你想要的位置加入
<!--客户端ua-->
<span style="color:#939393;margin-left: 0px;" class="comment-ua">
<?php getOs($comments->agent); ?>
<?php getBrowser($comments->agent); ?>
</span>
在function中添加getos 和 getbrowser
// 获取浏览器信息
function getBrowser($agent)
{
if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-ie" data-toggle="tooltip" data-original-title="IE"></i> IE';
} else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Firefox/', $regs[0]);
$FireFox_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-firefox" data-toggle="tooltip" data-original-title="firefox"></i> FireFox';
} else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Maxthon/', $agent);
$Maxthon_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge" data-toggle="tooltip" data-original-title="Edge"></i> Edge';
} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360" data-toggle="tooltip" data-original-title="360极速浏览器"></i> 360极速浏览器';
} else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Edge/', $regs[0]);
$Edge_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge" data-toggle="tooltip" data-original-title="Edge"></i> Edge';
} else if (preg_match('/UC/i', $agent)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc" data-toggle="tooltip" data-original-title="UC浏览器"></i> UC浏览器';
} else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$QQ_vern = explode('.', $str1[1]);
$outputer = '<i class= "ua-icon icon-qq" data-toggle="tooltip" data-original-title="QQ浏览器"></i> QQ浏览器';
} else if (preg_match('/UBrowser/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc" data-toggle="tooltip" data-original-title="UC浏览器"></i> UC浏览器';
} else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
$outputer = '<i class= "ua-icon icon-opera" data-toggle="tooltip" data-original-title="Opera"></i> Opera';
} else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Chrome/', $agent);
$chrome_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-chrome" data-toggle="tooltip" data-original-title="Chrome"></i> Chrome';
} else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Version/', $agent);
$safari_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-safari" data-toggle="tooltip" data-original-title="Safari"></i> Safari';
} else{
$outputer = '<i class="ua-icon icon-chrome" data-toggle="tooltip" data-original-title="Chrome"></i> Chrome';
}
echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
$os = false;
if (preg_match('/win/i', $agent)) {
if (preg_match('/nt 6.0/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1" data-toggle="tooltip" data-original-title="Win Vista"></i> Win Vista / ';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1" data-toggle="tooltip" data-original-title="Win 7"></i> Win 7 / ';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = ' <i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 8"></i> Win 8 / ';
} else if(preg_match('/nt 6.3/i', $agent)) {
$os = ' <i class= "ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 8.1"></i> Win 8.1 / ';
} else if(preg_match('/nt 5.1/i', $agent)) {
$os = ' <i class="ua-icon icon-win1" data-toggle="tooltip" data-original-title="Win XP"></i> Win XP / ';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 10"></i> Win 10 / ';
} else if (preg_match('/nt 13.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win 11"></i> Win 11 / ';
} else{
$os = ' <i class="ua-icon icon-win2" data-toggle="tooltip" data-original-title="Win x64"></i> Win X64 / ';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = ' <i class="ua-icon icon-android" data-toggle="tooltip" data-original-title="Android"></i> Android Pie / ';
}
else if (preg_match('/android 8/i', $agent)) {
$os = ' <i class="ua-icon icon-android" data-toggle="tooltip" data-original-title="Android"></i> Android Oreo / ';
}
else{
$os = ' <i class="ua-icon icon-android" data-toggle="tooltip" data-original-title="Android"></i> Android / ';
}
}
else if (preg_match('/ubuntu/i', $agent)) {
$os = ' <i class="ua-icon icon-ubuntu" data-toggle="tooltip" data-original-title="Ubuntu"></i> Ubuntu / ';
} else if (preg_match('/linux/i', $agent)) {
$os = ' <i class= "ua-icon icon-linux" data-toggle="tooltip" data-original-title="Linux"></i> Linux / ';
} else if (preg_match('/iPhone/i', $agent)) {
$os = ' <i class="ua-icon icon-apple" data-toggle="tooltip" data-original-title="iPhone"></i> iPhone / ';
} else if (preg_match('/mac/i', $agent)) {
$os = ' <i class="ua-icon icon-mac" data-toggle="tooltip" data-original-title="MacOS"></i> MacOS / ';
}else if (preg_match('/fusion/i', $agent)) {
$os = ' <i class="ua-icon icon-android" data-toggle="tooltip" data-original-title="Android"></i> Android / ';
} else {
$os = ' <i class="ua-icon icon-linux" data-toggle="tooltip" data-original-title="Linux"></i> Linux / ';
}
echo $os;
}
修改评论时间及归属地
在comment中取消原本时间显示,添加如下,在typecho文件夹中添加qqwry纯真数据库,可能需要定期更新
<a href="#<?php $comments->theId()?>"><time class="format_time text-muted text-xs block m-t-xs" pubdate="pubdate" datetime="<?php $comments->date('c'); ?>"><?php get_diff_time(date('Y-m-d H:i:s' , $comments->created))//$comments->date('Y-m-d H:i'); ?> · 来自<?php echo get_city(convertips($comments->ip));?></time></a>
在function中添加如下函数
/**
* diff时间
*
*/
function get_diff_time($created_time) {
$date1 = time();
$date2 =strtotime($created_time);
$diff=$date1-$date2;
$years = floor($diff / (365*24*60*60));
$months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));
$days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));
$hours = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24)/ (60*60));
$mins = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24 - $hours*60*60)/ (60));
$secends = floor($diff - $years * 365*60*60*24 - $months*30*60*60*24 - $days*60*60*24 - $hours*60*60 - $mins*60);
if ($years > 0){
echo "发布于 ".$years."年前";
} elseif ($months > 0){
echo "发布于 ".$months."月前";
} elseif ($days > 0){
echo "发布于 ".$days."日前";
} elseif ($hours > 0){
echo "发布于 ".$hours."小时前";
} elseif ($mins > 0){
echo "发布于 ".$mins."分钟前";
} elseif ($secends > 0){
echo "发布于 ".$secends."秒前";
}else{
echo "发布于 1秒前";
}
}
//从省市提取市
function get_city($addres){
preg_match_all("/\省(.*?)\市/s",$addres,$city_name);
$city=$city_name[1][0];
if(!empty($city)){
return $city;
}else{
return "仙女座γ星系";
}
}
//使用ip-api查询
//https://www.svlik.com/t/ipapi/ip.php?ip=1.83.107.38&type=0
//获取IP的地址
function convertips($ip){
$ip1num = 0;
$ip2num = 0;
$ipAddr1 ="";
$ipAddr2 ="";
$dat_path = dirname(__FILE__).'/qqwry.dat';
if(!preg_match("/^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/", $ip)) {
return 'IPV6无法获取归宿地';
}
if(!$fd = @fopen($dat_path, 'rb')){
return 'IP 数据库路径不正确';
}
$ip = explode('.', $ip);
$ipNum = $ip[0] * 16777216 + $ip[1] * 65536 + $ip[2] * 256 + $ip[3];
$DataBegin = fread($fd, 4);
$DataEnd = fread($fd, 4);
$ipbegin = implode('', unpack('L', $DataBegin));
if($ipbegin < 0) $ipbegin += pow(2, 32);
$ipend = implode('', unpack('L', $DataEnd));
if($ipend < 0) $ipend += pow(2, 32);
$ipAllNum = ($ipend - $ipbegin) / 7 + 1;
$BeginNum = 0;
$EndNum = $ipAllNum;
while($ip1num>$ipNum || $ip2num<$ipNum) {
$Middle= intval(($EndNum + $BeginNum) / 2);
fseek($fd, $ipbegin + 7 * $Middle);
$ipData1 = fread($fd, 4);
if(strlen($ipData1) < 4) {
fclose($fd);
return 'System Error';
}
$ip1num = implode('', unpack('L', $ipData1));
if($ip1num < 0) $ip1num += pow(2, 32);
if($ip1num > $ipNum) {
$EndNum = $Middle;
continue;
}
$DataSeek = fread($fd, 3);
if(strlen($DataSeek) < 3) {
fclose($fd);
return 'System Error';
}
$DataSeek = implode('', unpack('L', $DataSeek.chr(0)));
fseek($fd, $DataSeek);
$ipData2 = fread($fd, 4);
if(strlen($ipData2) < 4) {
fclose($fd);
return 'System Error';
}
$ip2num = implode('', unpack('L', $ipData2));
if($ip2num < 0) $ip2num += pow(2, 32);
if($ip2num < $ipNum) {
if($Middle == $BeginNum) {
fclose($fd);
return 'Unknown';
}
$BeginNum = $Middle;
}
}
$ipFlag = fread($fd, 1);
if($ipFlag == chr(1)) {
$ipSeek = fread($fd, 3);
if(strlen($ipSeek) < 3) {
fclose($fd);
return 'System Error';
}
$ipSeek = implode('', unpack('L', $ipSeek.chr(0)));
fseek($fd, $ipSeek);
$ipFlag = fread($fd, 1);
}
if($ipFlag == chr(2)) {
$AddrSeek = fread($fd, 3);
if(strlen($AddrSeek) < 3) {
fclose($fd);
return 'System Error';
}
$ipFlag = fread($fd, 1);
if($ipFlag == chr(2)) {
$AddrSeek2 = fread($fd, 3);
if(strlen($AddrSeek2) < 3) {
fclose($fd);
return 'System Error';
}
$AddrSeek2 = implode('', unpack('L', $AddrSeek2.chr(0)));
fseek($fd, $AddrSeek2);
} else {
fseek($fd, -1, SEEK_CUR);
}
while(($char = fread($fd, 1)) != chr(0))
$ipAddr2 .= $char;
$AddrSeek = implode('', unpack('L', $AddrSeek.chr(0)));
fseek($fd, $AddrSeek);
while(($char = fread($fd, 1)) != chr(0))
$ipAddr1 .= $char;
} else {
fseek($fd, -1, SEEK_CUR);
while(($char = fread($fd, 1)) != chr(0))
$ipAddr1 .= $char;
$ipFlag = fread($fd, 1);
if($ipFlag == chr(2)) {
$AddrSeek2 = fread($fd, 3);
if(strlen($AddrSeek2) < 3) {
fclose($fd);
return 'System Error';
}
$AddrSeek2 = implode('', unpack('L', $AddrSeek2.chr(0)));
fseek($fd, $AddrSeek2);
} else {
fseek($fd, -1, SEEK_CUR);
}
while(($char = fread($fd, 1)) != chr(0)){
$ipAddr2 .= $char;
}
}
fclose($fd);
if(preg_match('/http/i', $ipAddr2)) {
$ipAddr2 = '';
}
$ipaddr = "$ipAddr1 $ipAddr2";
$ipaddr = preg_replace('/CZ88.NET/is', '', $ipaddr);
$ipaddr = preg_replace('/^s*/is', '', $ipaddr);
$ipaddr = preg_replace('/s*$/is', '', $ipaddr);
if(preg_match('/http/i', $ipaddr) || $ipaddr == '') {
$ipaddr = '可能来自火星';
}
$ipaddr = iconv('gbk', 'utf-8//IGNORE', $ipaddr);
return $ipaddr;
}
修改鼠标效果
$("body").css("cursor","url('http://tpblogstatic.dsecret.com/normal.cur'), default");$("a").css("cursor","url('http://tpblogstatic.dsecret.com/link.cur'), pointer");
点击出现心心
!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);
根据PC添加动态背景
根据PC添加动态背景
在head中判断PC,执行html
在head中判断PC,执行html
<?php
//获取USER AGENT
$agent = strtolower($_SERVER['HTTP_USER_AGENT']);
//分析数据
$is_pc = (strpos($agent, 'windows nt')) ? true : false;
if($is_pc){
echo "<div id='wavesDIV' style='display: block;'>
<svg class='waves' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 24 150 28' preserveAspectRatio='none' shape-rendering='auto'>
<defs>
<path id='gentle-wave' d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z'></path>
</defs>
<g class='parallax'>
<use xlink:href='#gentle-wave' x='48' y='-2' fill='rgba(125,165,191,0.3)'></use>
<use xlink:href='#gentle-wave' x='48' y='3' fill='rgba(125,165,191,0.5)'></use>
<use xlink:href='#gentle-wave' x='48' y='5' fill='rgba(125,165,191,0.7)'></use>
<use xlink:href='#gentle-wave' x='48' y='12' fill='rgba(125,165,191,1)'></use>
</g>
</svg>
</div>";
echo "<div id=\"bubble\"></div>
<script>class BGBubble{constructor(i){this.defaultOpts={id:\"\",num:150,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:\"#f1f3f4\"},\"[object Object]\"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(\${t?i:this.random(0,360)},100%,\${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement(\"canvas\"),this.ctx=this.canvas.getContext(\"2d\"),this.canvas.style.display=\"block\",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position=\"fixed\",this.canvas.style.top=\"0\",this.canvas.style.left=\"0\",this.canvas.style.zIndex=\"-1\",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble(\"bubble\");bubbleDemo.createCanvas(),bubbleDemo.start();</script>";
}
?>
15 条评论
爱,其实很简单,困难的是去接受它。
刚刚发货 看似美好的东西,往往藏着陷阱。
我从小就害怕虫子
阿三地方滴!学生卡!打卡时间:04:08:59,请上车的乘客系好安全带~
滴!学生卡!打卡时间:01:18:14,请上车的乘客系好安全带~
夹在我女友与前女友与青梅竹马间的果然是修罗场!
君子可寓意于物,但不可留意于物。
天空是连着的,如果我们也能各自发光的话,无论距离有多远,都能看到彼此努力的身影。
滴!学生卡!打卡时间:00:22:59,请上车的乘客系好安全带~
滴!学生卡!打卡时间:23:14:55,请上车的乘客系好安全带~
滴!学生卡!打卡时间:23:14:58,请上车的乘客系好安全带~
滴!学生卡!打卡时间:23:15:00,请上车的乘客系好安全带~
滴!学生卡!打卡时间:23:15:02,请上车的乘客系好安全带~
与你的生命等价的东西,这个世界上根本没有。
别人恋爱不成功,你连暗恋都不成功!
作者运用生动的比喻和细腻的描写,让读者仿佛身临其境,实在是一种令人赞美的写作艺术。
文章中的优美语言和精彩描写让人感受到一种心灵的震撼和触动,实在值得赞美。 ::coolapk:96::
我是来替大家批评博主的,我是来批评的,这篇文章的结构有点混乱,需要更好地组织和展开内容。博主多多像我学习啊! ::dunjiao:315::
少年心意,一如明月松间的青石流水,那些年里看到了,却不懂。 ::dunjiao:302::
慕君之心,至死方休。 ::dunjiao:302::
我要拼,装上假牙也要拼! ::dunjiao:302::
比自己,比梦想更重要的东西永远都存在着... ::dunjiao:302::
阿三地方
牛皮
阿三地方33
阿三地方333
你屁你铺i
牛逼屁
大路考到底