神奇

收藏一些可能有用或者只是单纯好玩的东西,点击标题即可传送至原文站点。点击下方目录可快速定位至对应部分,点击页面右下角小圆点快速返回顶部。

手动目录:

更多精彩等待发掘...

 

Typecho1.2 可用的页面加载时间代码">Typecho1.2 可用的页面加载时间代码

在主题 functions.php 文件里放入下面代码

/**
 * 加载时间
 * @return bool
 */
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;
}

然后在主题foot.php文件需要放加载时间的地方添加下面语句即可:

加载耗时:<?php echo timer_stop();?>

 

Typecho 默认主题评论框架样式修改方法">Typecho 默认主题评论框架样式修改方法

后台编辑 style.css 主题文件,在最后添加以下 CSS 代码;

#comment-form {
    padding-top: 5px;
}
.col1 {
    margin-right: -210px;
    height: auto;
    float: left;
    width: 100%;
    position: relative;
    background-position: 0 0;
}
.col2 {
    width: 194px;
    float: right;
    position: relative;
    overflow: hidden;
    background-position: right top;
}
.clear {
    clear: both;
}
.col2 p, .col1 p {
    margin: 9px 0;
}
#comment-form label {
    display: block;
    color: #888;
    position: absolute;
    margin: 8px;
}
#comment-form input {
    padding: 5px 6px;
    line-height: 16px;
    height: 32px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px #D4D4D4;
    background: #fdfdfd;
    font: 14px;
    padding-left: 50px;
}
    button.submit {
    border: 1px solid #ddd;
    display: block;
    line-height: 32px;
    width: 100%;
    outline: none;
    background: #e8e8e8;
}
button.submit {
    color: #6E7173;
    text-decoration: none;
    -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;
    border: 1px solid #ddd;
    display: block;
    line-height: 32px;
    width: 100%;
    outline: none;
    background: #e8e8e8;
}
button.submit:hover {
    background: #dfdfdf;
}
.col1 p {
    margin-right: 210px;
}
textarea.textarea {
    line-height: 1.8;
    padding: 5px 10px 5px 10px;
    width: 100%;
    height: 162px;
    padding: 10px;
    overflow: auto;
    margin: 0;
    line-height: 1.8;
    color: #222;
    font-size: 14px;
    background: #fdfdfd!important;
    font-family:"Microsoft Yahei";
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
    padding: 5px;
    border: 1px solid #ddd;
    width: 100%;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

进入后台编辑 comments.php 主题文件定位到以下标签,并将 <form></form> 之间所有代码替换为后面给出的代码:

<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">

在定位到以上代码之后,删除此代码之后标签之前的所有代码,并添加以下代码;

<div class="col1">
    <p><textarea rows="8" cols="50" name="text" id="textarea" class="textarea" required><?php $this->remember('text'); ?></textarea></p>
</div>
<div class="col2">
    <p><label for="author" class="required">称呼</label><input type="text" name="author" id="author" class="text" value="<?php $this->remember('author'); ?>" required=""></p>
    <p><label for="mail" <?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?> >邮箱</label><input type="email" name="mail" id="mail" class="text" value="<?php $this->remember('mail'); ?>" <?php if ($this->options->commentsRequireMail): ?> required <?php endif; ?>></p>
    <p><label for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>>网站</label><input type="url" name="url" id="url" class="text" placeholder="https://example.com" value="<?php $this->remember('url'); ?>" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>></p>
    <p><button type="submit" class="submit">提交评论</button></p>
</div>
<div class="clear"></div>

Bug:后台登陆之后切换到前台无法直接回复评论(无管理员已登录提示)。现在清空一下 cookie 缓存或者浏览器无痕模式刷新一下,即可看到新的评论框。

 

让你的网站文字“抖”起来">让你的网站文字“抖”起来

  • 静态效果
    只需要给对应的选择器添加 text-shadow 属性即可完成。例如我让 body 里面的所有文字抖起来,就这样写:
body{
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
  • 动态效果
    CSS3 动画
// CSS3 动画
@keyframes shake-it{
    0%{
        text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
    }
    25%{
        text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    }
    50%{
        text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
    }
    100%{
        text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
    }
}
 
// 添加属性
body{
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
  • 封装脚本
    本脚本于 2018.7.8 更新,可用于切换开启和关闭
function paul_shake(action, selector) {
    var status = false;
 
    action.addEventListener("click", function () {
        if(status === true){
            status = false;
            selector.style = "";
        }
        else{
            status = true;
            selector.style = "animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55)";
        }
    })
}
 
paul_shake(切换开启和关闭的按钮, document.body);

 

JS 制作网页运行时间展示">JS 制作网页运行时间展示

利用 Unix 时间戳 来进行处理,这样更加一目了然了~ 其中有一个最主要的方法是 Date.parse() 支持将字符串直接转换成时间戳(需要除去 1000 才是正确的结果),在后面计算天数的时候有一个数字是 864e5,这个数字其实就是 86400000 的简写。

function run_date(date){
    // 建站日期
    var created = Date.parse(date);
    // 现在时间
    var now = new Date().getTime();
    // 存活时间
    var cha = now - created;
    // 有多少天
    var day = cha / 864e5;
    // 取整数输出天
    var day_c = Math.floor(day);
    // 减去整数的天,得出剩下的小数,并变成小时(1 天等于 24 小时)
    var hour = 24 * (day - day_c);
    // 取整数输出小时
    var hour_c = Math.floor(hour);
    // 减去剩下的小时,得出剩下的小数,几分钟(1小时等于60分)
    var min = 60 * (hour - hour_c);
    // 取整数输出分钟
    var min_c = Math.floor(min);
    // 剩下的就是秒,直接取整
    var sec = Math.floor(60 * (min - min_c));

    return "站点已萌萌哒存活了 <a>" + day_c + "</a> 天 <a>" + hour_c + "</a> 小时 <a>" + min_c + "</a> 分 <a>" + sec + "</a> 秒";
}

然后我们通过 setInterval 方法,让它每秒运行处理一次,就可以实现刷新了!

setInterval(function () {
    你的元素选择器.innerHTML = run_date("2018/1/1");
}, 1000);

如果要添加到一个模板上,需要修改模板的 footer.php 文件,在你喜欢的位置上创建一个 div 或者是 span 标签,并设置一个类名,例如这样:

<span class="foot-date">站点已萌萌哒存活了 <a>?</a> 天 <a>?</a> 小时 <a>?</a> 分 <a>?</a> 秒</span>

复制上方 JS 代码,将 “元素选择器” 改成 document.querySelector(".foot-date") 并填入你的建站时间,放在模板内任一 JS 文件里面就可以了!如果你使用的是我开发的主题,你可以把 “元素选择器” 写成 ks.select(".foot-date"),更加简便易懂。
想要补零?通过添加这段函数,就可以实现补零的操作了!

function add_zero(num){
    if(num.toString().length < 2){
        num = "0" + num;
    }
    return num;
}

把需要补零的数字参数(例如 sec)改成 add_zero(sec) 就可以了!Enjoy it!

 

Material 默认友链样式存档

  • CSS 部分:
<style>
    .md-links {
        min-height: calc(100% - 120px - 5pc - 6em);
        text-align: center;
        overflow: auto;
        padding: 0;
        margin: 0 auto;
        max-width: 320px;
    }

    @media screen and (min-width: 680px) {
        .md-links {
            max-width: 640px;
        }
    }

    @media screen and (min-width: 1000px) {
        .md-links {
            max-width: 960px;
        }
    }

    @media screen and (min-width: 1320px) {
        .md-links {
            max-width: 1280px;
        }
    }

    @media screen and (min-width: 1640px) {
        .md-links {
            max-width: 1600px;
        }
    }

    @media screen and (max-width: 480px) {
        .md-links {
            min-height: calc(100% - 200px - 5pc - 6em);
            margin-top: 6em;
        }
    }

    .md-links-item {
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
        height: 72px;
        line-height: 15px;
        margin: 20px 10px;
        padding: 0px 0px;
        transition: box-shadow 0.25s;
    }

    .md-links a {
        color: #333;
        text-decoration: none;
    }

    .md-links li {
        width: 300px;
        float: left;
        list-style: none;
    }

    .md-links-item img {
        float: left;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 11px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    }

    .md-links-item:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    .md-links-item a:hover{
        cursor: pointer;
    }

    .md-links-title {
        font-size: 20px;
        line-height: 50px;
    }

    #scheme-Paradox .mdl-mini-footer{
        clear: left;
    }
    #bottom{
        position: relative;
    }
</style>
  • php 部分:
        <div class="md-links" style="display:none;">
            <?php if (class_exists("Links_Plugin")): ?>
                <?php Links_Plugin::output('
                <a href="{url}" title="{title}" target="_blank">
                    <li class="md-links-item">
                        <img src="{image}" alt="{name}" height="72px"/>
                        <span  class="md-links-title">{name}</span><br />
                        <span>{description}</span>
                    </li>
                </a>
                '); ?>
            <?php endif; ?>
        </div>

 

给你的网站添加一个愚人节彩蛋">给你的网站添加一个愚人节彩蛋

它的原理很简单:利用 CSS 实现页面翻转,然后用 JS 定时器定时取消翻转。废话不多说,直接上代码!

<script>  
if (!mkReaddata("fool")) {  // 如果没有触发过彩蛋  
    document.body.classList.add('mk-fool-egg');     // 给 body 增加彩蛋 class  
    window.setTimeout(function () {     // 定时退出彩蛋  
        mkSavedata("fool", "fool");     // 记录彩蛋已被执行  
        alert("恭喜发现愚人节彩蛋 :)");     // 弹窗(这里可以自己发挥)  
        document.body.classList.remove('mk-fool-egg');  
    }, 5000);   // 这里的 5000 代表 5s,也就是经过 5s 后弹窗,并退出彩蛋  
}  
 
// 写入 Cookie  
function mkSavedata(key, data) {  
    key = 'mk_' + key;  
    data = JSON.stringify(data);  
    if (window.localStorage) {  
        localStorage.setItem(key, data);  
    }  
}  
  
// 读取 Cookie  
function mkReaddata(key) {  
    if (!window.localStorage) return '';  
    key = 'mk_' + key;  
    return JSON.parse(localStorage.getItem(key));  
}  
</script>  
   
<style>  
/* 彩蛋的样式代码 */  
.mk-fool-egg {  
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);  
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);  
    transform: matrix(-1, 0, 0, 1, 0, 0);  
    -o-transform: skew(0deg, 180deg) scale(-1, 1);  
    filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);  
}  
</style>

把上面这段代码加到你的网页页脚部分就行了(记住,一定要加在页脚才会生效哦)

 

给博客加入封面效果">给博客加入封面效果

大概的效果就是,当访客访问你的博客时,页面会首先显示一张全屏大图,然后再逐渐显示网页内容,很有趣...

先贴出 CSS 代码,将下方代码添加到 header 内(不要放入 css 文件内)

<style>
.loading{opacity:0;background:#fff url(images/loading.jpg);
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:Loading 2s;line-height:100vh;text- align:center;font-size:30px;color:#ccc;}
@keyframes Loading
{
0% {opacity:1;color:#C1FF50;z-index:999999;}
20% {opacity:1;color:#5CB8FF;}
40% {opacity:1;color:#FFD350;}
60% {opacity:1;color:#FF5950;}
80% {opacity:.5;color:#fff;}
100% {opacity:0;}
}
</style>

将下面 HTML 代码放入 body 的最上面

<div class="loading">Loading...</div>

*注:代码通过 CSS3 动画控制的效果,很轻量,但是兼容浏览器没有 JS 的全面。

 

Typecho主题评论原生表情实现方法">Typecho主题评论原生表情实现方法

表情放在主题目录 img/smilies 下。 首先添加 functions.php 自定义评论回调部分的代码,自定义评论回调部分可以参考 Typecho 更简单的解决 Gravatar 被墙 提到的方法。 然后再在 functions.php 将回调函数的 content(); ?> 修改为 content); ?> 接着在 functions.php 下面加入代码:

/** 解析表情 */
function convertSmilies($widget)
{
    $smiliesTrans = array(
    '转义字符'        => '图片.gif',
    );
    $imgUrl = Typecho_Widget::widget('Widget_Options')->themeUrl . '/img/smilies/';
    foreach($smiliesTrans as $smiley => $img) {
        $smiliesTag[] = $smiley;
        $smiliesReplace[] = "<img src=\"$imgUrl$img\" alt=\"\" class=\"smiley\" />";
    }   
    $output = '';
    $textArr = preg_split("/(<.*>)/U", $widget, -1, PREG_SPLIT_DELIM_CAPTURE);
    $stop = count($textArr);
    for ($i = 0; $i < $stop; $i++) {
        $content = $textArr[$i];
        if ((strlen($content) > 0) && ('<' != $content{0})) {
            $content = str_replace($smiliesTag, $smiliesReplace, $content);
        }
        $output .= $content;
    }
    $output = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<img src=\"$1\" alt=\"" . basename("$1") . "\" />"', $output);
    echo $output;
}

在主题目录新建 inc 目录,然后新建 smiley.php 文件,内容如下:

代码太过邪恶无法正确解析,故消失于此

编辑 comments.php 文件,在评论框 <textarea> 上面加入下面语句:

<p><?php include('inc/smiley.php'); ?></p>

最后是 JS 部分:

// Smilies v1.0.4 for Typecho Comments - by willin kan - URI: http://kan.willin.org/typecho/
Smilies = {
 dom : function(id) {
   return document.getElementById(id);
 },
 
 grin : function (tag) { // 表情
   tag = ' ' + tag + ' '; myField = this.dom('comment');
   document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
 },
 
 insertTag : function (tag) { // 插入评论中
   myField = Smilies.dom('textarea');
   myField.selectionStart || myField.selectionStart == '0' ? (
     startPos = myField.selectionStart,
     endPos = myField.selectionEnd,
     cursorPos = startPos,
     myField.value = myField.value.substring(0, startPos)
                   + tag
                   + myField.value.substring(endPos, myField.value.length),
     cursorPos += tag.length,
     myField.focus(),
     myField.selectionStart = cursorPos,
     myField.selectionEnd = cursorPos
   ) : (
     myField.value += tag,
     myField.focus()
   );
 }
}

*注:convertSmilies 可以用在不同的地方上。

 

网站雪花特效">网站雪花特效

<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
  var sf = new Snowflakes({
    color: "#FFFFFF",
    count: 66,
    minOpacity: 0.3,
    maxOpacity: 1
  });
</script>

 

给网站加上滑稽">给网站加上滑稽

首先来看看一个平淡的评论框,10个网站可能9个的评论框长这样。那么如何使它变得不一样呢? 首先,你得有个召唤评论框的按钮,比如手机的开机键能让手机开关机一样。那么我们在合适的位置加上一个合适的按钮。用一个 div 包裹住一个 span 标签,再给他加上独一无二的 id ,就像这样,好极了。

<div class="OwO-logo"> 
  <span>按我出表情</span> 
</div>

现在这个评论框是不是有一点不一样了?但是实际上你怎么按它也不会出现表情框,因为它是一个没有灵魂的按钮。现在我们给他注入灵魂。我们赋予它的使命是“按他出表情”。那么我们先把要召唤出的东西写出来。就像这样,没错(尼尔叔叔脸)。

这里需要用到 OwO 的 css 文件

<link rel="stylesheet" href="OwO.min.css" />
<div id="OwO-container">
  <div class="OwO OwO-open" id="qaq"> 
    <div class="OwO-body" id="OwO-body"> 
      <ul id="OwO-pp" class="OwO-items OwO-items-emoticon OwO-items-show" style="max-height: 197px;"> 
        <li class="OwO-item"><img src="chaiquan.png" /></li> 
        <li class="OwO-item"><img src="chaiquanbugaoxin.png" /></li> 
      </ul> 
    </div>
  </div> 
</div>

那么需要展示的内容就全部放出来了,开始注入灵魂!先让按钮成为一个按钮。所谓按钮,就是让他按一下开,按一下关(认真)。由于此版本的 OwO 需要 jq 。所以我们就可以使用 jq 的 toggle() 来实现按钮的本质功能。先引入 jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

then,将上面提到的按钮的 html 加上个 onclick

<div class="OwO-logo" onclick="$('#qaq').toggleClass('OwO-open');">
  <span>按我出表情</span>
</div>

解释一下,在 OwO 的 css 中,不加 OwO-open 这个 class 的话, OwO 表情框本体是处于 display:none 的状态。这样一来,这个按钮就成为一个按钮了呢接下来,如何点击一下表情就可以跑到评论框里去呢。那么请出今天的核心 JS

Smilies = {
    dom: function(id) {
        return document.getElementById(id);
    },
    grin: function(tag) {
        tag = ' ' + tag + ' ';
        myField = this.dom("comment");
        document.selection ? (myField.focus(), sel = document.selection.createRange(), sel.text = tag, myField.focus()) : this.insertTag(tag);
    },
    insertTag: function(tag) {
        myField = Smilies.dom("comment");
        myField.selectionStart || myField.selectionStart == "0" ? (startPos = myField.selectionStart, endPos = myField.selectionEnd, cursorPos = startPos, myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length), cursorPos += tag.length, myField.focus(), myField.selectionStart = cursorPos, myField.selectionEnd = cursorPos) : (myField.value += tag, myField.focus());
    }
}

将这这段代码加到页面的底部,然后再给表情也加上 onclick

<li class="OwO-item" onclick="Smilies.grin('');"><img src="chaiquan.png" /></li> 
<li class="OwO-item" onclick="Smilies.grin('');"><img src="chaiquanbugaoxin.png" /></li> 

这样一来,就可以实现按一下表情就出现了。那么基本功能到这里就完成了哟。我这里输出的是用于解析的短代码,你也可以换成

Chrome 自带命令实现网页截图
Chrome 自带命令实现网页截图

 

一个简单的打字机的效果">一个简单的打字机的效果

利用字符串截取方法实现简单的打字机效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打字机特效</title>
</head>
<body>
    <p></p>
    <script>
        var oP = document.getElementsByTagName('p')[0];
        var str = '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
        var i = 0;
        var timer = setInterval(function() {
            var txt = str.substring(0, ++i);
            oP.innerText = txt + '_';
            if (i == str.length) {
                clearInterval(timer);
                oP.innerText = txt + '';
            }
        }, 200);
    </script>
</body>
</html>

 

关于网易云音乐无法解析 | 解决办法">关于网易云音乐无法解析 | 解决办法

前言

这几天,打开博客发现网易云音乐总是播放失败并且提示“当前音乐地址无效”错误,这是Cookie引起的问题,这里提供一下解决策略

由于网易云音乐多次封禁 Meting 所使用的 Cookie,因此 Meting 将不再做 Cookie 的更新工作。
请用户、开发者自行采集 Cookie,使用 $api->cookie('string') 函数进行替换。

正文

下面给出一点提示,自由发挥

  • 第一种
os=pc; osver=Microsoft-Windows-10-Professional-build-10586-64bit; appver=2.0.3.131777; channel=netease; __remember_me=true
  • 第二种
MUSIC_U=*****; buildver=1506310743; resolution=1920x1080; mobilename=MI5; osver=7.0.1; channel=coolapk; os=android; appver=4.2.0
  • 第三种
    osver=%E7%89%88%E6%9C%AC%2010.13.3%EF%BC%88%E7%89%88%E5%8F%B7%2017D47%EF%BC%89; os=osx; appver=1.5.9; MUSIC_U=*****; channel=netease; 

Handsome 主题默认采用的是第三种形式,改为第一种即可

打开 /usr/themes/handsome/libs/Get.php 文件,将 $netease_cookie 变量的值改为

os=pc; osver=Microsoft-Windows-10-Professional-build-10586-64bit; appver=2.0.3.131777; channel=netease; __remember_me=true

感谢心语难诉大佬提供的解决办法

 

【原版】正版彩虹授权源码分享">【原版】正版彩虹授权源码分享

版本说明:除了修复QQ扫码问题之外,其它未作任何修改

使用方法

  • 修改 config.php 里的数据库信息,导入 install.sql 到数据库
  • 在数据库的 auth_user 表内添加授权平台管理员用户
  • 源码就放到 package/ 里面的这两个文件夹分别是安装包和更新包

链接:https://pan.baidu.com/s/1DFfOvrqWcS1HVvpRbB2WaQ
密码:u8j5

 

更多奇妙等待发掘...

 

添加新评论

已有 1 条评论

这个页面似乎因为各种代码蹂躏出现了某些不可名状的错误 :aru17: 不要在意这些细节啦…