OneStep ↻

网站修改流水记录

⇧ 目录 ⇩
Toc目录

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>

提取自OFFODD的Initial主题

通过简单的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();
    }
});
点赞(3)👍 👎
Cate&Tag:技术 
浏览次数(586) 字数(469)
@贝多叶
☕打赏❤赞助！
支付宝打赏 微信打赏

免责声明:本站多数资源来源于互联网。少数原创内容为本人随意书写不对其负任何法律责任(均为键盘和鼠标自行敲击)，部分有助于网友的内容仅供学习与交流。如有转载、盗链等其它行为产生对国家社会网络不良影响均与本人无关。
版权说明:未经博主授权禁止转载、摘编、复制或建立镜像。对既成事实本站将保留所有的权利。

⇦       ⇨




发表评论

发表新评论

请输入本站名：

暂无评论   

发送消息！ ✕
取消 发送
onestep
网站二维码
手机扫一扫，查看
.
贝多叶@聚合支付

真诚赞赏，手留余香

使用微信扫描二维码完成支付