shuqian网址收藏网站 编辑网址显示二维码 调整为单击显示 鼠标移开自动隐藏
原始代码如下
$("#qrcode").bind({
mouseover: function() {
var url = $.trim($("#link_url").val());
if(url.match(/^https?:\/\/.+/i)) {
var img = new Image();
img.src = "<!--{BASE_URL}-->/qrcode.php?url="+encodeURIComponent(url);
img.onload = function() {
$("#qr").html(img);
$("#form1").hide();
$("#form2").show();
}
}
},
mouseout: function() {
$("#form2").hide();
$("#form1").show();
}
});
修改后代码
//单击显示,鼠标移开自动隐藏(将初始mouseover方法改为click)避免鼠标误操作显示
$("#qrcode").bind({
click: function() {
var url = $.trim($("#link_url").val());
if(url.match(/^https?:\/\/.+/i)) {
var img = new Image();
img.src = "<!--{BASE_URL}-->/qrcode.php?url="+encodeURIComponent(url);
img.onload = function() {
$("#qr").html(img);
$("#form1").hide();
$("#form2").show();
}
}
},
mouseout: function() {
$("#form2").hide();
$("#form1").show();
}
});
重新修改夜间模式下 背景颜色
初始背景颜色background-color: #162633 !important;
,code标签和pre标签背景颜色background: #f3f3f0;
全部修改为豆沙绿#C7EDCC
博客增加单一的音乐播放功能
html代码
<li id="musicbtn" class="hidden"><span><i></i></span><audio id="audio" preload="none"></audio></li>
js代码
<script>
(function(){var a=document.getElementById("audio");var b=document.getElementById("musicbtn");
var c=["http://music.163.com/song/media/outer/url?id=25923470.mp3","http://music.163.com/song/media/outer/url?id=220289.mp3"];
a.src=c.shift();a.addEventListener('play',g);
a.addEventListener('pause',h);a.addEventListener('ended',f);
a.addEventListener('error',f);a.addEventListener('canplay',j);
function f(){if(!c.length){a.removeEventListener('play',g);
a.removeEventListener('pause',h);
a.removeEventListener('ended',f);
a.removeEventListener('error',f);
a.removeEventListener('canplay',j);
b.style.display="none";alert("本站的背景音乐好像有问题了,希望您可以通过留言等方式通知管理员,谢谢您的帮助。")}else{a.src=c.shift();
a.play()}}
function g(){b.setAttribute("class","play");
a.addEventListener('timeupdate',k)}
function h(){b.removeAttribute("class");
a.removeEventListener('timeupdate',k)}
function j(){c.push(a.src)}
function k(){b.getElementsByTagName("i")[0].style.width=(a.currentTime/a.duration*100).toFixed(1)+"%"}
b.onclick=function(){if(a.canPlayType('audio/mpeg')!=""||a.canPlayType('audio/ogg;codes="vorbis"')!=""||a.canPlayType('audio/mp4;codes="mp4a.40.5"')!=""){if(a.paused){if(a.error){f()}else{a.play()}}else{a.pause()}}else{alert("对不起,您的浏览器不支持HTML5音频播放,请升级您的浏览器。")}};
b.removeAttribute("class")})();
</script>
通过简单的JS代码和CSS样式表实现 代码块 增加行号
Javascript代码:
//numbering for pre>code blocks
$(function(){
$('pre code').each(function(){
var lines = $(this).text().split('\n').length - 1;
var $numbering = $('<ul/>').addClass('pre-numbering');
$(this)
.addClass('has-numbering')
.parent()
.append($numbering);
for(i=1;i<=lines;i++){
$numbering.append($('<li/>').text(i));
}
});
});
css代码:
/* 代码块 增加行号 */
.pre-numbering {
position: absolute;
top: 7px;
left: -20px;
text-align: right;
color: #333;
list-style: none;
font-size: small;
padding: 0!important;
margin: 11px 0!important;
font-family: "Lucida Console",Consolas,"DejaVu Sans Mono",monospace;
}
.pre-numbering li {
margin: 4px 0;
}
优点:不依赖第三方脚本框架(高亮插件等),代码条数少,简洁。
缺点:样式比较丑,行号数字上下间距不易把控 极易造成行号和代码块不在同一行。
来源于网络 Highlightjs 添加代码行号
代码块 增加复制按钮
<script>
// 在代码块右上角添加复制按钮
document.addEventListener('DOMContentLoaded', initCodeCopyButton);
function initCodeCopyButton() {
function initCSS(callback) {
const css = `
.code-copy:hover .btn-code-copy {
display: block;
}
.btn-code-copy {
display: none;
position: absolute;
line-height: .6em;
top: .4em;
right: .4em;
padding: 6px;
color: rgb(87, 87, 87);
background-color: #eee;
border-radius: 4px;
}
.btn-code-copy:hover {
color: rgb(145, 145, 145);
cursor: pointer;
}
`;
const styleId = btoa('btn-code-copy').replace(/[=+\/]/g, '');
const head = document.getElementsByTagName('head')[0];
if (!head.querySelector('#' + styleId)) {
const style = document.createElement('style');
style.id = styleId;
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
callback();
};
function copyTextContent(source) {
let result = false;
const target = document.createElement('pre');
target.style.opacity = '0';
target.textContent = source.textContent;
document.body.appendChild(target);
try {
const range = document.createRange();
range.selectNode(target);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
result = true;
} catch (e) { console.log('copy failed.'); }
document.body.removeChild(target);
return result;
};
function initButton(pre) {
const code = pre.querySelector('code');
if (code) {
const preParent = pre.parentElement;
const newPreParent = document.createElement('div');
newPreParent.className = 'code-copy';
newPreParent.style = 'position: relative';
preParent.insertBefore(newPreParent, pre);
const copyBtn = document.createElement('div');
copyBtn.innerHTML = 'copy';
copyBtn.className = 'btn-code-copy';
copyBtn.title = '复制';
copyBtn.addEventListener('click', () => {
copyBtn.innerHTML = copyTextContent(code) ? 'success' : 'failure';
setTimeout(() => copyBtn.innerHTML = 'copy', 250);
});
newPreParent.appendChild(copyBtn);
newPreParent.appendChild(pre);
}
};
const pres = document.querySelectorAll('pre');
if (pres.length !== 0) {
initCSS(() => pres.forEach(pre => initButton(pre)));
}
};
</script>
将js脚本 放在 头文件header.php
的</head>
标签之前
效果:鼠标悬停 代码块,右上角显示 复制按钮
本文内容转载自 为 Typecho的代码块添加Copy按钮
博客页面增加鼠标点击特效
// 鼠标点击爱心特效
!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);
网址书签源码home.html页面修改 初始代码备忘
<li id="cid_0" <!--{if($cid == 0)}-->data-cur="1"<!--{/if}-->>
<a href="<!--{:get_root_url()}-->" <!--{if(!$cid)}-->class="hover"<!--{/if}-->>所有书签
</a>
</li>
原为所有书签的点击链接 修改为 按 点击量热门排序
网址书签源码index.php页面修改
if($cid == 0) {
$sql = "select * from link $where order by id desc limit $offset,$each";
}elseif($cid == 1){
$sql = "select * from link $where order by hits desc limit $offset,$each";
}else{
$sql = "select * from link $where order by ctime desc limit $offset,$each";}
$res = mysql::query($sql);
$link_list = $res;
links站点 删除ico图标显示
tpl文件夹下home.html
<img <!--{if($v['icon'])}-->src="./icoapi/fav.php?url=<!--{:H($v['icon'])}-->"<!--{else}-->src="../img/error.png"<!--{/if}--> title="<!--{:H($v['create_time'])}-->" alt="<!--{:H($v['icon'])}-->" onerror="this.src='../img/no.png'"/>
m文件夹下home.html
<img <!--{if($v['icon'])}-->src="../icoapi/fav.php?url=<!--{:H($v['icon'])}-->"<!--{else}-->src="../img/error.png"<!--{/if}--> alt="<!--{:H($v['icon'])}-->" onerror="this.src='../img/no.png'"/>
links站点-增加网站描述一栏
link_add.html
页面
<div class="line">
<span id="title_Or_description">标题:</span>
<input id="link_title" type="text" value="<!--{$link['title']}-->" />
<input id="link_description" type="text" value="<!--{$link['description']}-->" style="display: none;" />
</div>
下面是js代码
$("#title_Or_description").click(function() {
var $this = $(this);
if($("#link_description").is(":hidden")) {
$this.html("描述:");
$("#link_title").hide();
$("#link_description").show();
} else {
$this.html("标题:");
$("#link_title").show();
$("#link_description").hide();
}
});
![支付宝 支付宝打赏](https://code.beiduoye.cn/usr/themes/bdy/images/zfb.jpg)
![微信 微信打赏](https://code.beiduoye.cn/usr/themes/bdy/images/wx.jpg)
暂无评论