网页小知识·Typecho功能丰富 - 花坊有约-让每一次相遇都有意义

一、链接几秒种后跳转

这里需要用到window的两个对象方法，setInterval()和setTimeout()

区别

setInterval(code,millisec) 周期性（millisec单位毫秒调用或执行code函数或代码串

定义和用法
 
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。<br>
语法
setInterval(code,millisec[,"lang"])
 
参数  描述
code    必需。要调用的函数或要执行的代码串。
millisec    必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

setTimeout(code,millisec) 等待millisec（单位毫秒）时间后，仅一次执行code函数或代码串

语法
setTimeout(code,millisec)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。

js页面隔几秒后跳转

setInterval

<p id="page_div">将在3秒后自动跳转到首页</p>
 
<script language="javascript">
    var num = 3; //倒计时的秒数
    var URL = "页面链接";
    var id = window.setInterval('doUpdate()', 1000);
    function doUpdate() {
        document.getElementById('page_div').innerHTML = '将在'+num+'秒后自动跳转到首页' ;
        if(num == 0) {
            window.clearInterval(id);
            window.location = URL;
        }
        num --;
    }
</script>

setTimeout

<p id="page_div">将在3秒后自动跳转到首页</p>
 
<script language="javascript">
    var num = 3; //倒计时的秒数
    var URL = "页面链接";
    window.setTimeout("doUpdate()", 1000);
    function doUpdate(){
        if(num != 0){
            document.getElementById('page_div').innerHTML = '将在'+num+'秒后自动跳转到首页' ;
            num --;
            window.setTimeout("doUpdate()", 1000);
        }else{
            num = 4;
            window.location = URL;
        }
    }
</script>

meta跳转

<head>
<title>页面跳转</title>
<meta http-equiv="refresh" content="3;url=链接>
</head>

二、视频/图片的自适应

在使用<vedio>标签的时候使用百分比定义宽度即可，无需定义高度，就可以实现插入的视频在页面中自适应。

<video src="movie.mp4" width="100%" controls="controls">
Your browser does not support the video tag.
</video>

图片的使用方法也差不多

<img style="display: inline-block; width: 100%; max-width: 100%; height: auto;" src="#" />

三、在网页中插入网页

最近在维护网站的时候想在网页中插入地图，一开始是到百度地图的创建工具上创建发现插入的效果非常拉垮，于是就想着能不能直接将地图的页面插入到自己站点的页面上。
只要把下面的代码片段稍作修改在自己的网页上插入即可

<iframe src="网页的地址" width="100%" height="500" frameborder="0" scrolling="no"></iframe>

四、自定义右键菜单

基本步骤

在网页的适当位置引入（一般在header或footer）
1、引入js-若站点已经引用JQUERY，无需再次引用

<!-- 公共JQUERY -->
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js" type="text/javascript"></script>
<!-- 右键菜单 -->
<script type="text/javascript" charset="utf-8">(function(b,a){b.prototype.mouseRight=function(c,h){var f,d,e,g;e=this;f={menu:[{},],ele:"wrap-ms-right",ele_item:"ms-item",};d=b.extend({},f,c);b(this).each(function(){(function i(){var n=b("<div></div>");n.attr("class",d.ele);for(var m=0;m<d.menu.length;m++){var k=b("<li></li>");k.addClass(d.ele_item);var l=b("<i></i>");k.attr("data-item",m);l.addClass(d.menu[m].icon);l.attr("data-item",m);l.appendTo(k);k.appendTo(n);l.after("&nbsp; "+d.menu[m].itemName)}n.prependTo("body");var j=b("<div></div>");j.attr("class","shade");j.prependTo("body")})();a.oncontextmenu=function(){return false};b(this).mousedown(function(j){if(j.which===3){b("."+d.ele).css({"display":"block","top":j.pageY+"px","left":j.pageX+"px"})}});b("."+d.ele).click(function(l){var j=parseInt(b(l.target).attr("data-item"));for(var k=0;k<d.menu.length;k++){if(j==k){d.menu[k].callback();b("."+d.ele).css({"display":"none"})}}});b(".shade").click(function(){b("."+d.ele).css({"display":"none"})})});return this}})(jQuery,window);</script>

2、自定义样式

<style type="text/css">
.shade{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    
}
.wrap-ms-right{
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    padding: 5px 0;
    min-width: 80px;
    margin: 0;
    display: none;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ms-item{
    height: 30px;
    line-height: 30px;
    text-align: left;
    cursor: pointer;
}
.ms-item:hover{
    background-color: #c3c3c3;
    color: #FFFFFF;
}
}
</style>

3、自定义菜单内容

<script type="text/javascript">
    $('body').mouseRight({menu: [
        {itemName: "上一页",callback: function() {window.history.back(-1);}}, 
        {itemName: "两个人",callback: function() {window.open("网页链接");}},
    ]});
    </script>

Js常见点击跳转方式

在原有的页面跳转

window.location.href="#"

返回上一页

window.history.back(-1);

top跳转

top.location.href="#""

打开新窗口

window.open("next.html");

重定向来跳转(不留栈)

window.location.replace("next.html");

刷新页面

window.location.reload();

五、禁止鼠标点击和F12检查

在大数据时代，互联网中的数据也尤为重要，各类采集程序和到处搬站的扒手也越来越多，那么对于一个个人站点，不希望自己网页上的东西被随意复制去，那么就可以通过禁止鼠标点击和F12检查逃过一劫，当然如果你的站点属于展示型或是分享型网站请视情况设置，设置的方法也很简单：只要在网页中插入以下代码片段即可。

禁用鼠标左键

    <!--禁用鼠标左键-->
    <body oncontextmenu=onselectstart="return false">

禁用鼠标右键

    <!--禁用鼠标右键-->
    <body oncontextmenu=self.event.returnValue=false>

禁用鼠标左右键

    <!--禁用鼠标左右键-->
    <body oncontextmenu=self.event.returnValue=false onselectstart="return false">

禁止f12

    <!--禁止f12-->
        <script>document.onkeydown = function(){
    
        if(window.event && window.event.keyCode == 123) {
            alert("F12被禁用");
            event.keyCode=0;
            event.returnValue=false;
        }
        if(window.event && window.event.keyCode == 13) {
            window.event.keyCode = 505;
        }
        if(window.event && window.event.keyCode == 8) {
            alert(str+"\n请使用Del键进行字符的删除操作！");
            window.event.returnValue=false;
        }
    
    }</script>

以上还只是解决了PC端口，当我使用手机浏览网页的时候发现长按复制可以正常使用于是：

手机端禁用复制粘贴（输入框无法聚焦修复版）

    <!--手机端禁用复制粘贴-->
    <style type=text/css>
    *{
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
    -webkit-user-select:none; /*webkit浏览器*/
    -khtml-user-select:none; /*早期浏览器*/
    -moz-user-select:none;/*火狐*/
    -ms-user-select:none; /*IE10*/
    user-select:auto;/*此处设置为：none后对pc端同样有效无法选中*/
    }
    input, textarea{
         -webkit-user-select:auto; /*webkit浏览器*/
    }
    </style>

自用全部代码片段（增加了部分功能）

    <!--手机端禁用复制粘贴-->
    <style type=text/css>
    *{
    -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
    -webkit-user-select:none; /*webkit浏览器*/
    -khtml-user-select:none; /*早期浏览器*/
    -moz-user-select:none;/*火狐*/
    -ms-user-select:none; /*IE10*/
    user-select:auto;
    }
    input, textarea{
         -webkit-user-select:auto; /*webkit浏览器*/
    }
    </style>
    <!--禁用鼠标左键-->
    <body onselectstart="return false">
    <!--禁用鼠标右键-->
    <body oncontextmenu=self.event.returnValue=false>
    <!--禁止f12-->
    <script>
    //按键触发
    document.onkeydown = function(){
    //禁止ctrl+u
    if (event.ctrlKey && window.event.keyCode==85){
    return false;
    }
    //禁止 F12
    if (window.event && window.event.keyCode == 123) {
    event.keyCode = 0;
    event.returnValue = false;
    }
    //禁止ctrl+s
    if (event.ctrlKey && window.event.keyCode==83){
    return false;
    }
    //禁止 F5 
    if (window.event && window.event.keyCode == 116) {
    event.keyCode = 0;
    event.returnValue = false;
    }
    }
    //网站禁止右键
    document.body.oncontextmenu = function() {
    self.event.returnValue=false
    };
    //网站禁止选择文字
    document.body.onselectstart = function() {
    self.event.returnValue=false
    };
    </script>

以上是利用JavaScript实现禁用的方法简单来说就是当用户使用键盘执行某一命令是返回的一种状态，而这种状态对应的则是keyCode(键码值)，键盘上的每一个按键都会有一个对应的keyCode，为了让大家能更清楚的了解keyCode(键码值)，，大家可以根据自己的需求对照keyCode(键码值)对照表设置不同的禁止命令。

六、修改PHP上传文件大小限制的方法

一般的文件上传,除非文件很小.就像一个5M的文件,很可能要超过一分钟才能上传完.但在php中,默认的该页最久执行时间为 30 秒.就是说超过30秒,该脚本就停止执行.这就导致出现无法打开网页的情况.这时我们可以修改 max_execution_time在php.ini里max_execution_time默认是30秒.改为 max_execution_time = 0 0表示没有限制

修改 post_max_size 设定 POST 数据所允许的最大大小。此设定也影响到文件上传。php默认的 post_max_size 为2M.如果 POST 数据尺寸大于 post_max_size $_POST 和 $_FILES superglobals 便会为空.查找post_max_size .改为 post_max_size = 3G

很多人都会改了第二步.但上传文件时最大仍然为 8M.为什么呢.我们还要改一个参数upload_max_filesize 表示所上传的文件的最大大小。查找upload_max_filesize,默认为8M改为 upload_max_filesize = 2G

另外要说明的是,post_max_size 大upload_max_filesize 为佳.

PHP上传超大文件解决方案

一提到大文件上传，首先想到的是啥？？？

没错，就是修改php.ini文件里的上传限制，那就是upload_max_filesize。修改成合适参数我们就可以进行愉快的上传文件了。当然啦，这是一般情况下的操作，咱们可以考虑下50M的话，这样修改还好使么？？？

结果不言而喻，如果不信邪的看官可以动手试下。那么这时候我们就要考虑了，为什么会失败呢？通过错误提示或者正常思维来思考的话，我们首先想到的是，这个文件到底有没有被上传到服务器上呢？

嘿嘿，到这里我们就应该知道，限制在哪里了。没错就是表单上传的大小受到了限制。这时候我们就要修改php.ini里的post_max_size参数了。

到这里呢，在网络正常的情况下，基本上不会出现什么问题了。但是，你懂得，我们作为一名programer，怎么可能对非正常情况没有准备。

这时候我们就要修改php运行最大时间max_execution_time还有php接收数据所需的最大时间max_input_time再来就是最大内存memory_limit这三个参数了。修改为适合自己的程序的数值，就可以畅快的运行了。

还有万一中的情况，你的大文件上传程序没有成功运行的话，各位不妨考虑下服务器的限制。

Nginx 上传大文件超大超时解决办法

问题：用nginx作代理服务器，上传大文件时（本人上传8M左右的文件），提示上传超时或文件过大。

浏览器调试报413 （Request Entity Too Large）错误

原因是nginx对上传文件大小有限制，而且默认是1M。另外，若上传文件很大，还要适当调整上传超时时间。

解决方法：在nginx的配置文件下（找到你的nginx文件/conf/nginx.conf），加上以下配置：

client_max_body_size     50m; //文件大小限制，默认1m
client_header_timeout    1m;
client_body_timeout      1m;
proxy_connect_timeout     60s;
proxy_read_timeout      1m;
proxy_send_timeout      1m;

每个参数的意思：

client_max_body_size

限制请求体的大小，若超过所设定的大小，返回413错误。

client_header_timeout

读取请求头的超时时间，若超过所设定的大小，返回408错误。

client_body_timeout

读取请求实体的超时时间，若超过所设定的大小，返回413错误。

proxy_connect_timeout

http请求无法立即被容器(tomcat, netty等)处理，被放在nginx的待处理池中等待被处理。此参数为等待的最长时间，默认为60秒，官方推荐最长不要超过75秒。

proxy_read_timeout

http请求被容器(tomcat, netty等)处理后，nginx会等待处理结果，也就是容器返回的response。此参数即为服务器响应时间，默认60秒。

proxy_send_timeout

http请求被服务器处理完后，把数据传返回给Nginx的用时，默认60秒。

注意：以上参数必须要放在server下的server_name下，而不是放在localhost /web的大括号里，然后别忘了重启nginx

七、一天只弹出1次的公告代码-Popup

<script>
var alertmessage="公告内容自行修改"
var once_per_session=1
function get_cookie(Name) {
  var search = Name + "="
  var returnvalue = "";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // if cookie exists
      offset += search.length
      end = document.cookie.indexOf(";", offset);
      if (end == -1)
         end = document.cookie.length;
      returnvalue=unescape(document.cookie.substring(offset, end))
      }
   }
  return returnvalue;
}

function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}

function loadalert(){
alert(alertmessage)
}

if (once_per_session==0)
loadalert()
else
alertornot()
</script>

八、网站总访客数统计加在线人数

代码

首先在Typecho后台外观选择编辑当前外观 functions.php中，添加以下统计代码。

//总访问量
    function theAllViews()
        {
            $db = Typecho_Db::get();
            $row = $db->fetchAll('SELECT SUM(VIEWS) FROM `typecho_contents`');
                echo number_format($row[0]['SUM(VIEWS)']);
        }

typecho_contents为默认表名，安装时更改默认表前缀的请自行修正"

插入代码

添加后点击保存即可；然后在你需要显示的位置（如：footer.php sidebar.php 等）插入以下调用代码。

访客总人数：<?php echo theAllViews();?>

然后就好了

在线人数代码

<?php
    //首先你要有读写文件的权限，首次访问肯不显示，正常情况刷新即可
    $online_log = "slzxrs.dat"; //保存人数的文件到根目录,
    $timeout = 30;//30秒内没动作者,认为掉线
    $entries = file($online_log);
    $temp = array();
    for ($i=0;$i<count($entries);$i++){
        $entry = explode(",",trim($entries[$i]));
        if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
            array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
        }
    }
    array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
    $slzxrs = count($temp); //计算在线人数
    $entries = implode("",$temp);
    //写入文件
    $fp = fopen($online_log,"w");
    flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
    fputs($fp,$entries);
    flock($fp,LOCK_UN);
    fclose($fp);
    $tj= "在线人数：".$slzxrs."人";
?>

将以上代码放到要显示文件的最顶部，之后再要显示此统计的地方加上此输出。然后在文件栏建一个slzxrs.dat的文件用来记录。

插入代码

<?php echo $tj?>

九、限制站点目录防止跨站的三种方案（使用open_basedir）

关于open_basedir

open_basedir是php.ini中的一个配置选项
它可将用户访问文件的活动范围限制在指定的区域，
假设open_basedir=/home/wwwroot/home/web1/:/tmp/，那么通过web1访问服务器的用户就无法获取服务器上除了/home/wwwroot/home/web1/和/tmp/这两个目录以外的文件。
注意用open_basedir指定的限制实际上是前缀,而不是目录名。
举例来说: 若"open_basedir = /dir/user", 那么目录 "/dir/user" 和 "/dir/user1"都是可以访问的。所以如果要将访问限制在仅为指定的目录，请用斜线结束路径名。

关于符号链接

符号链接又叫软链接,是一类特殊的文件，这个文件包含了另一个文件的路径名(绝对路径或者相对路径)。
路径可以是任意文件或目录，可以链接不同文件系统的文件。在对符号文件进行读或写操作的时候，系统会自动把该操作转换为对源文件的操作，但删除链接文件时，系统仅仅删除链接文件，而不删除源文件本身。

nginx结合php的时候，可以使用open_basedir限制站点目录防止跨站
具体实现方法有以下三种：
注意：
以下三种设置方法均需要PHP版本为5.3或者以上。

方法一、在Nginx配置文件中加入

fastcgi_param PHP_VALUE "open_basedir=$document_root:/tmp/:/proc/";

通常nginx的站点配置文件里用了include fastcgi.conf;，这样的，把这行加在fastcgi.conf里就OK了。
如果某个站点需要单独设置额外的目录，把上面的代码写在include fastcgi.conf;这行下面就OK了，会把fastcgi.conf中的设置覆盖掉。
这种方式的设置需要重启nginx后生效。

方法二、在php.ini中加入：

[HOST=www.123.com]
open_basedir=/home/www/www.123.com:/tmp/:/proc/
[PATH=/home/www/www.123.com]
open_basedir=/home/www/www.123.com:/tmp/:/proc/

这种方式的设置需要重启php-fpm后生效。

方法三、在网站根目录下创建.user.ini并写入：

open_basedir=/home/www/www.123.com:/tmp/:/proc/

这种方式不需要重启nginx或php-fpm服务。安全起见应当取消掉.user.ini文件的写权限。
关于.user.ini文件的详细说明：

http://php.net/manual/zh/configuration.file.per-user.php

TIPS:设置open_basedir的同时最好禁止下执行命令的函数.
比如：

shell_exec('ls /etc')仍然查看到/etc目录的文件列表
shell_exec('cat /etc/passwd')仍可查看到/etc/passwd文件的内容

建议禁止的函数如下：
disable_functions = pcntl_alarm, pcntl_fork, pcntl_waitpid, pcntl_wait, pcntl_wifexited, pcntl_wifstopped, pcntl_wifsignaled, pcntl_wexitstatus, pcntl_wtermsig, pcntl_wstopsig, pcntl_signal, pcntl_signal_dispatch, pcntl_get_last_error, pcntl_strerror, pcntl_sigprocmask, pcntl_sigwaitinfo, pcntl_sigtimedwait, pcntl_exec, pcntl_getpriority, pcntl_setpriority, eval, popen, passthru, exec, system, shell_exec, proc_open, proc_get_status, chroot, chgrp, chown, ini_alter, ini_restore, dl, pfsockopen, openlog, syslog, readlink, symlink, popepassthru, stream_socket_server, fsocket, chdir

十、同一个域名同一个站点(单域名)配置多版本PHP

宝塔面板的站点配置文件中，PHP应用配置一般从第33行开始，把站点配置文件中的 include enable-php-56.conf; 替换成下面的代码：

location ~ [^/]\.php(/|$) {
if ($request_uri ~* "二级目录"){
fastcgi_pass unix:/tmp/php-cgi-71.sock;
}
fastcgi_pass unix:/tmp/php-cgi-56.sock;
fastcgi_index index.php;
include fastcgi.conf;
include pathinfo.conf;
}

替换完成后，再按照下面的说明稍作调整三处调整：

1、然后把下面代码中的二级目录换成你要调整PHP版本的站点目录名称；

2、把 php-cgi-71.sock; 中的71替换为您需要的版本，假设您需要PHP7.4，就把 71 换为 74 即可；

3、把 php-cgi-56.sock; 中的56替换为站点的PHP版本，假设您原来站点使用的是PHP7.0，就把 56换为 70 即可；

nginx配置文件中$request_uri到底是指的url里哪部分?

$request_uri就是完整url中刨去最前面$host剩下的部分
比如http://www.baidu.com/pan/beta/test1?fid=3这个url，去掉www.baidu.com剩下的就是了，日志里会看到打印出来的$request_uri其实是/pan/beta/test1?fid=3
if ($request_uri ~* "^/$") 表示url中只有域名，后面不跟任何东西，比如www.baidu.com。
if ($request_uri ~* "test") 表示域名后面那串儿只要包含test这个关键词，就可匹配成功。比如www.baidu.com/pan/beta/test3

十一、多个Typecho站点共享同一用户数据库（尚未测试）

近期想配置多个Typecho站点，但要实现共享同一用户数据库，然后我就一波冲浪发现是可以实现的。

思路

直接修改typecho用户表路径（table.users）。

而为了不出错，我们原则上对Typecho进行最小改动。

此外我们要知道，

Typecho支持多种数据库adaptor：

Mysql
Mysqli
Mysql PDO
PgSql
SQLLite

教程

第一步

在这里首先需要找到对应Adaptor的对应路径：

[Typecho根目录]/var/Typecho/Db/

如果博客用的是Mysql就看mysql.php， PDO就看pdo.php，我们这里使用的是PDO Adaptor为例。

第二步

在145行处（如果没有这个文件或没有这行可跳过）

public function parseSelect(array $sql)
    {
        if (!empty($sql['join'])) {
            foreach ($sql['join'] as $val) {
                list($table, $condition, $op) = $val;
                $sql['table'] = "{$sql['table']} {$op} JOIN {$table} ON {$condition}";
            }
        }

        $sql['limit'] = (0 == strlen($sql['limit'])) ? NULL : ' LIMIT ' . $sql['limit'];
        $sql['offset'] = (0 == strlen($sql['offset'])) ? NULL : ' OFFSET ' . $sql['offset'];

        return 'SELECT ' . $sql['fields'] . ' FROM ' . $sql['table'] .
        $sql['where'] . $sql['group'] . $sql['having'] . $sql['order'] . $sql['limit'] . $sql['offset'];
    }

第三步

这一段为Typecho合成sql语句的函数，将其修改为：

public function parseSelect(array $sql)
    {
        //添加这一行
        //主数据表就是需要使用的数据表， 从数据表就是本来默认自行创建的用户数据表。
        //这里需要带前缀， 具体数据表名字要到数据库里去看。
        if($sql['table'] == '###从数据表###') {
            $sql['table'] = '###主数据表###';
        }
        
        if (!empty($sql['join'])) {
            foreach ($sql['join'] as $val) {
                list($table, $condition, $op) = $val;
                $sql['table'] = "{$sql['table']} {$op} JOIN {$table} ON {$condition}";
            }
        }

        $sql['limit'] = (0 == strlen($sql['limit'])) ? NULL : ' LIMIT ' . $sql['limit'];
        $sql['offset'] = (0 == strlen($sql['offset'])) ? NULL : ' OFFSET ' . $sql['offset'];

        return 'SELECT ' . $sql['fields'] . ' FROM ' . $sql['table'] .
        $sql['where'] . $sql['group'] . $sql['having'] . $sql['order'] . $sql['limit'] . $sql['offset'];
    }

第四步

对[Typecho根目录]/var/Typecho/Db/Pdo/Mysql.php进行第三步同样的操作。

第五步

到这一步位置，用户表已经替换掉了，但是还是无法登录，因为用户表里的authCode不属于这个站点，会造成问题。 因此我们找到：

[Typecho根目录]/var/Widget/User.php

这一文件，打开并修改： 第146行：

$user['authCode'] = $authCode;

替换为（也可以注释掉在下方添加）：

$authCode = $user['authCode'];

结束

终结按照这个步骤是可以实现滴，这个步骤改一下也可以实现多样化玩法自己研究吧！