标签归档:PHP

Win10下启动Nginx+php cgi 的代码笔记

I:\php\nginx-1.18.0>
start nginx 启动
nginx.exe -s stop 停止
nginx.exe -s quit 退出
nginx.exe -s reload 重新加载配置

打开windows命令窗口,执行以下命令,查看nginx的进程:
tasklist /fi “imagename eq nginx.exe”

I:\php\php-7.4.9-Win>php-cgi.exe -b 127.0.0.1:9000

ts : thread-safe
nts : no-thread-safe

I:
cd php\nginx-1.18.0
start nginx
cd ..
cd php-7.4.9-Win
php-cgi.exe -b 127.0.0.1:9000

PHP 获取ip地址的六种方法

代码一:

function getip() {

  static $ip = '';

  $ip = $_SERVER['REMOTE_ADDR'];

  if(isset($_SERVER['HTTP_CDN_SRC_IP'])) {

    $ip = $_SERVER['HTTP_CDN_SRC_IP'];

  } elseif (isset($_SERVER['HTTP_CLIENT_IP']) && preg_match('/^([0-9]{1,3}\.){3}[0-9]{1,3}$/', $_SERVER['HTTP_CLIENT_IP'])) {

    $ip = $_SERVER['HTTP_CLIENT_IP'];

  } elseif(isset($_SERVER['HTTP_X_FORWARDED_FOR']) AND preg_match_all('#\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}#s', $_SERVER['HTTP_X_FORWARDED_FOR'], $matches)) {

    foreach ($matches[0] AS $xip) {

      if (!preg_match('#^(10|172\.16|192\.168)\.#', $xip)) {
        $ip = $xip;
        break;
      }

    }

  }

  return $ip;

}

代码二:

<?php
error_reporting (E_ERROR | E_WARNING | E_PARSE);
if($HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"]){
$ip = $HTTP_SERVER_VARS["HTTP_X_FORWARDED_FOR"];
}
elseif($HTTP_SERVER_VARS["HTTP_CLIENT_IP"]){
$ip = $HTTP_SERVER_VARS["HTTP_CLIENT_IP"];
}
elseif ($HTTP_SERVER_VARS["REMOTE_ADDR"]){
$ip = $HTTP_SERVER_VARS["REMOTE_ADDR"];
}
elseif (getenv("HTTP_X_FORWARDED_FOR")){
$ip = getenv("HTTP_X_FORWARDED_FOR");
}
elseif (getenv("HTTP_CLIENT_IP")){
$ip = getenv("HTTP_CLIENT_IP");
}
elseif (getenv("REMOTE_ADDR")){
$ip = getenv("REMOTE_ADDR");
}
else{
$ip = "Unknown";
}
echo $ip;
?>

代码三:

<?php
$iipp = $_SERVER["REMOTE_ADDR"];
echo $iipp ;
?>

四:

<?php
$user_IP = ($_SERVER["HTTP_VIA"]) ? $_SERVER["HTTP_X_FORWARDED_FOR"] : $_SERVER["REMOTE_ADDR"];
$user_IP = ($user_IP) ? $user_IP : $_SERVER["REMOTE_ADDR"];
echo $user_IP
?>

五:

function get_real_ip()
{
$ip=false;
if(!empty($_SERVER["HTTP_CLIENT_IP"])){
$ip = $_SERVER["HTTP_CLIENT_IP"];
}
if (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])){
$ips = explode (", ", $_SERVER['HTTP_X_FORWARDED_FOR']);
if($ip){
array_unshift($ips, $ip); $ip = FALSE;
}
for($i = 0; $i < count($ips); $i++){ if (!eregi ("^(10|172.16|192.168).", $ips[$i])){ $ip = $ips[$i]; break; } } } return($ip ? $ip : $_SERVER['REMOTE_ADDR']); } echo get_real_ip(); ?>

六:

<?php
if(getenv('HTTP_CLIENT_IP')){
$onlineip = getenv('HTTP_CLIENT_IP');
}
elseif(getenv('HTTP_X_FORWARDED_FOR')){
$onlineip = getenv('HTTP_X_FORWARDED_FOR');
}
elseif(getenv('REMOTE_ADDR')){
$onlineip = getenv('REMOTE_ADDR');
}
else{
$onlineip = $HTTP_SERVER_VARS['REMOTE_ADDR'];
}
echo $onlineip;
?>

php取整的几种方式,四舍五入,舍去法取整,进一法取整

php取整的几种方式,四舍五入,舍去法取整,进一法取整
方式一:round 对浮点数进行四舍五入
语法:float round ( float val [, int precision] )

echo round(3.4); // 3
echo round(3.5); // 4
echo round(3.6); // 4
echo round(3.6, 0); // 4
echo round(1.95583, 2); // 1.96
echo round(1241757, -3); // 1242000
echo round(5.045, 2); // 5.05
echo round(5.055, 2); // 5.06

方式二:floor 舍去法取整 语法格式:float floor ( float value )

返回不大于value 的下一个整数,将value 的小数部分舍去取整。floor() 返回的类型仍然是float,因为float 值的范围通常比integer 要大。
echo floor(4.3); // 4
echo floor(9.999); // 9

方式三:ceil 进一法取整 语法格式: float ceil ( float value )
返回不小于value 的下一个整数,value 如果有小数部分则进一位。ceil() 返回的类型仍然是float,因为float 值的范围通常比integer 要大
echo ceil(4.3); // 5
echo ceil(9.999); // 10

总结:

echo intval(4.5);echo "<br />";//直接取整,舍弃小数保留整数
echo round(4.5);echo "<br />";//四舍五入取整
echo ceil(4.5);echo "<br />";//有小数,就在整数的基础上加一
echo floor(4.5);echo "<br />";//有小数,就取整数位

7种获取PHP文件后缀名的方法

第一种:

$file = 'x.y.z.png';
echo substr(strrchr($file, '.'), 1);

解析:strrchr($file, ‘.’)
strrchr() 函数查找字符串在另一个字符串中最后一次出现的位置,并返回从该位置到字符串结尾的所有字符

第二种:

$file = 'x.y.z.png';
echo substr($file, strrpos($file, '.')+1);

解析:strrpos($file, ‘.’)
查找 “.” 在字符串中最后一次出现的位置,返回位置 substr()从该位置开始截取

第三种:

$file = 'x.y.z.png';
$arr=explode('.', $file);
echo $arr[count($arr)-1];

第四种:

$file = 'x.y.z.png';
$arr=explode('.', $file);
echo end($arr);  //end()返回数组的最后一个元素

第五种:

$file = 'x.y.z.png';
echo strrev(explode('.', strrev($file))[0]);

第六种:

$file = 'x.y.z.png';
echo pathinfo($file)['extension'];

解析:pathinfo() 函数以数组的形式返回文件路径的信息。

包括以下的数组元素:

[dirname]
[basename]
[extension]

第七种:

$file = 'x.y.z.png';
echo pathinfo($file, PATHINFO_EXTENSION);

总结:字符串截取2种,数组分割3种,路径函数2种

原文:https://www.php.cn/php-weizijiaocheng-392130.html

使用PHP阿里云OSS上传文件

1.安装PHP

http://windows.php.net/download/,安装5.6+的PHP环境,我使用的php-7.4.9-nts-Win32-vc15-x64,解压后把ext目录下的php_curl.dll复制到C:/Windows/System32下,在php.ini中取消掉extension=curl前面的分号注释。

我的电脑右击选择属性,然后按照高级系统设置 -> 高级 -> 环境变量,进入环境变量属性页,在系统变量中把%PHP_INSTALL_DIR%/php-7.4.9-nts-Win32-vc15-x64加入Path。

在Dos命令行中输入命令php -v,如果显示PHP的版本号,说明安装成功。

2.安装composer

下载composer。打开https://getcomposer.org/download/,从Manual Download中下载当前最新版本1.1.2。下载到本地的文件是composer.phar。

把composer.phar复制到%PHP_INSTALL_DIR%/php-7.4.9-nts-Win32-vc15-x64,并在php-7.4.9-nts-Win32-vc15-x64目录下创建文本文件composer.bat,添加如下内容:

@php %~dp0composer.phar %*

在DOS命令行中执行命令composer --version,如果显示composer的版本号,说明安装成功。

在DOS命令行窗中执行如下命令配置composer:

composer config -g disable-tls true
composer config -g secure-http false
composer config -g repositories.packagist composer http://packagist.phpcomposer.com

3.安装phar-composer

下载phar-composer。打开https://github.com/clue/phar-composer,在DOS命令行中进入代码目录phar-composer-master,执行命令composer install。然后执行命令php -d phar.readonly=off bin/phar-composer build,完成后会生成phar-composer.phar。

把phar-composer.phar复制到%PHP_INSTALL_DIR%/php-7.4.9-nts-Win32-vc15-x64,并在php-7.4.9-nts-Win32-vc15-x64目录下创建文本文件phar-composer.bat,添加如下内容:

@php %~dp0phar-composer.phar %*

在DOS命令行中执行命令phar-composer --version,如果显示phar-composer的版本号,说明安装成功。(见下图)

4.编译OSS PHP SDK

打开https://github.com/aliyun/aliyun-oss-php-sdk,下载解压到目录aliyun(可自行重命名),在DOS命令行进入代码目录aliyun,执行命令composer install下载依赖包。然后执行命令
php -d phar.readonly=off %PHP_INSTALL_DIR%/php-5.6.22-Win32-VC11-x64/phar-composer.phar build . aliyun-oss-php-sdk.phar,完成后会生成OSS PHP SDK包aliyun-oss-php-sdk.phar。

5.运行OSS PHP SDK测试程序

<?php
require_once 'aliyun-oss-php-sdk.phar';

use OSS\OssClient;
use OSS\Core\OssException;

//参考https://developer.aliyun.com/ask/2061的endpoint列表
$endpoint = "http://oss-cn-beijing.aliyuncs.com";  // http://oss-cn-hangzhou.aliyuncs.com
$accessKeyId = "在OSS控制台获取";
$accessKeySecret = "在OSS控制台获取";
$bucket = "你的bucket名字";
    
try {
    $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
    
    // list bucket
    $bucketListInfo = $ossClient->listBuckets();
    $bucketList = $bucketListInfo->getBucketList();
    print("bucketList:\n");
    foreach($bucketList as $buck) {
        print($buck->getLocation() . "\t" . $buck->getName() . "\t" . $buck->getCreatedate() . "\n");
    }
    
    // list objects
    $options = array();
    $listObjectInfo = $ossClient->listObjects($bucket, $options);
    $objectList = $listObjectInfo->getObjectList();
    if (!empty($objectList)) {
        print("objectList:\n");
        foreach ($objectList as $objectInfo) {
            print($objectInfo->getKey() . "\t" . $objectInfo->getSize() . "\t" . $objectInfo->getLastModified() . "\n");
        }
    }
    
    // put object
    $object = "php-test-key";
    $content = "Hello, OSS!";
    $ossClient->putObject($bucket, $object, $content);
    
    // get object
    $content = $ossClient->getObject($bucket, $object);
    print("key is fetched, the content is: " . $content);
    
    // delete object
    $ossClient->deleteObject($bucket, $object);
} catch (OssException $e) {
    print($e->getMessage() . "\n");
    return;
}
?>

把aliyun-oss-php-sdk.phar复制test_oss.php的同级目录。在DOS命令行进入test.php,执行命令php test.php运行测试程序,成果结果如下:

6.上传图片

<?php
require_once 'aliyun-oss-php-sdk.phar';

use OSS\OssClient;
use OSS\Core\OssException;

// 阿里云主账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维,请登录RAM控制台创建RAM账号。
$endpoint = "http://oss-cn-beijing.aliyuncs.com";  // http://oss-cn-hangzhou.aliyuncs.com
$accessKeyId = "OSS控制台获取";
$accessKeySecret = "OSS控制台获取";
$bucket = "你的bucket名";
// 设置文件名称。
$object = "head/pic1.png"; //包括文件夹的目的路径
// <yourLocalFile>由本地文件路径加文件名包括后缀组成,例如/users/local/myfile.txt。
$filePath = "I:\www\sanguo\aliyun\coffe.png"; //源文件本地路径

try{
    $ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);

    $ossClient->uploadFile($bucket, $object, $filePath);
} catch(OssException $e) {
    printf(__FUNCTION__ . ": FAILED\n");
    printf($e->getMessage() . "\n");
    return;
}
print(__FUNCTION__ . ": OK" . "\n");

在DOS命令行进入upfile.php,执行命令php upfile.php运行测试程序,成功结果如下:

可以在OSS控制台看到图片上传成功。

参考:Windows下编译使用Aliyun OSS PHP SDK
安装 OSS PHP SDK
OSS PHP简单上传
OSS开通Region和Endpoint对照表

php做图片上传功能

今天来做一个图片上传功能的插件,首先做一个html文件:text.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
<h1>文件上传</h1>
<div id="divPreview">
        <img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"
            alt="" />
</div>
<!--enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码,"multipart/form-data"在使用包含文件上传控件的表单时,必须使用该值。-->
<form action="upload.php" method="post" enctype="multipart/form-data">
<!--file定义输入字段和 "浏览"按钮,供文件上传。-->
    <input type="file" name="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" />
    <input  type="submit" value="上传"/>
</form>

<!--不用表单上传-->
<!--<input id="picInput" type="file" name="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" />
<button type='button'  onclick="upPic()" >确定上传</button>-->

</body>
<script type="text/javascript">
//不用表单提交
function upPic(){
 var formData = new FormData();
var name = $("#picInput").val();
formData.append('file', $("#picInput")[0].files[0]);
 //坑点: 无论怎么传数据,console.log(formData)都会显示为空,但其实值是存在的,f12查看Net tab可以看到数据被上传了
 $.ajax({
  url:'upload.php',
  type: 'POST',
  data: formData,
  //这两个设置项必填
  contentType: false,
  processData: false,
  success:function(data){
  console.log(data)
  var srcPath = data;
  console.log();
     //注意这里的路径要根据自己的储存文件的路径设置
  }
 });
}
 

        //js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
        function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
            var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
            var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
            var browserVersion = window.navigator.userAgent.toUpperCase();
            if (allowExtention.indexOf(extention) > -1) {
                if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等
                    if (window.FileReader) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                        }
                        reader.readAsDataURL(fileObj.files[0]);
                    } else if (browserVersion.indexOf("SAFARI") > -1) {
                        alert("不支持Safari6.0以下浏览器的图片预览!");
                    }
                } else if (browserVersion.indexOf("MSIE") > -1) {
                    if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
                    } else {//ie[7-9]
                        fileObj.select();
                        if (browserVersion.indexOf("MSIE 9") > -1)
                            fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
                        var newPreview = document.getElementById(divPreviewId + "New");
                        if (newPreview == null) {
                            newPreview = document.createElement("div");
                            newPreview.setAttribute("id", divPreviewId + "New");
                            newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
                            newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
                            newPreview.style.border = "solid 1px #d2e2e2";
                        }
                        newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                        var tempDivPreview = document.getElementById(divPreviewId);
                        tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
                        tempDivPreview.style.display = "none";
                    }
                } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
                    var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                    if (firefoxVersion < 7) {//firefox7以下版本
                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
                    } else {//firefox7.0+                    
                        document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
                    }
                } else {
                    document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
                }
            } else {
                alert("仅支持" + allowExtention + "为后缀名的文件!");
                fileObj.value = ""; //清空选中文件
                if (browserVersion.indexOf("MSIE") > -1) {
                    fileObj.select();
                    document.selection.clear();
                }
                fileObj.outerHTML = fileObj.outerHTML;
            }
            return fileObj.value;    //返回路径
        }
    </script>
</html>

做完后的效果:

这样可以点击浏览选择图片,然后上传,现在我们再做怎样把选择的图片传到我们新建的img文件里来,在做一个php处理页面:upload.php

<?php
//var_dump($_FILES["file"]);
//array(5) { ["name"]=> string(17) "56e79ea2e1418.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(43) "C:\Users\asus\AppData\Local\Temp\phpD07.tmp" ["error"]=> int(0) ["size"]=> int(454445) } 
//1.限制文件的类型,防止注入php或其他文件,提升安全
//2.限制文件的大小,减少内存压力
//3.防止文件名重复,提升用户体验
    //方法一:  修改文件名    一般为:时间戳+随机数+用户名
    // 方法二:建文件夹
    
//4.保存文件
 
//判断上传的文件是否出错,是的话,返回错误
if($_FILES["file"]["error"])
{
    echo $_FILES["file"]["error"];    
}
else
{
    //没有出错
    //加限制条件
    //判断上传文件类型为png或jpg且大小不超过1024000B
    if(($_FILES["file"]["type"]=="image/png"||$_FILES["file"]["type"]=="image/jpeg")&&$_FILES["file"]["size"]<1024000)
    {
            //防止文件名重复
            $filename ="./img/".time().$_FILES["file"]["name"];
            //转码,把utf-8转成gb2312,返回转换后的字符串, 或者在失败时返回 FALSE。
            $filename =iconv("UTF-8","gb2312",$filename);
             //检查文件或目录是否存在
            if(file_exists($filename))
            {
                echo"该文件已存在";
            }
            else
            {  
                //保存文件,   move_uploaded_file 将上传的文件移动到新位置  
                move_uploaded_file($_FILES["file"]["tmp_name"],$filename);//将临时地址移动到指定地址    
            }        
    }
    else
    {
        echo"文件类型不对";
    }
}

参考:php做图片上传功能

PHP SESSION不能跨页面传递的问题解决

PHP中,session不能传递到下一个页面去,一般有两种情况:

我们先写个php文件:<?=phpinfo()?>, 传到服务器去看看服务器的参数配置。

转到session部分,看到session.use_trans_sid参数被设为了零。

这 个参数指定了是否启用透明SID支持,即session是否随着URL传递。我个人的理解是,一旦这个参数被设为0,那么每个URL都会启一个 session。这样后面页面就无法追踪得到前面一个页面的session,也就是我们所说的无法传递。两个页面在服务器端生成了两个session文 件,且无关联。(不知道这样理解对不对?请高手指教。)

所以一个办法是在配置文件php.ini里把session.use_trans_sid的值改成1。

当然我们知道,不是谁都有权限去改php的配置的,那么还有什么间接的解决办法呢?

下面就用两个实例来说明吧:

文件1 test1.php

<?php
//表明是使用用户ID为标识的session
session_id(SID);
//启动session
session_start();
//将session的name赋值为Havi
SESSION[′name′]=”Havi”;//输出session,并设置超链接到第二页test2.phpecho“<ahref=\”test2.php\”>”.SESSION[′name′]=”Havi”;//输出session,并设置超链接到第二页test2.phpecho“<ahref=\”test2.php\”>”._SESSION['name'].”</a>”;
?>

文件2: test2.php

<?php
表明是使用用户ID为标识的session
session_id(SID);
//启动session
session_start();
//输出test1.php中传递的session。
echo “This is “.$_SESSION['name'];
?>

每个页面都要写开启session哦。。不然还是不能正常工作

所以,重点是在session_start();前加上session_id(SID);,这样页面转换时,服务器使用的是用户保存在服务器session文件夹里的session,解决了传递的问题。

不过有同鞋会反映说,这样一来,多个用户的session写在一个SID里了,那Session的价值就发挥不出来了。所以还有一招来解决此问题,不用加session_id(SID);前提是你对服务器的php.ini有配置的权限:

output_buffering改成ON,道理就不表了。

第二个可能的原因是对服务器保存session的文件夹没有读取的权限,还是回到phpinfo.php中,查看session保存的地址:

session.save_path: var/tmp

所以就是检查下var/tmp文件夹是否可写。

写一个文件:test3.php来测试一下:

<?
echo var_dump(is_writeable(ini_get(“session.save_path”)));
?>

我添加了 echo var_dump(ini_get(“session.save_path”));
发现存储目录并非/tmp,在服务器上查看,发现用户组是apache,使用命令
chown :nginx 目录名,session就可以传递了

如果返回bool(false),证明文件夹写权限被限制了,那就换个文件夹咯,在你编写的网页里加入:

//设置当前目录下session子文件夹为session保存路径。
$sessSavePath = dirname(__FILE__).’/session/’;

//如果新路径可读可写(可通过FTP上变更文件夹属性为777实现),则让该路径生效。
if(is_writeable(sessSavePath) && is_readable(sessSavePath) && is_readable(sessSavePath))
{session_save_path($sessSavePath);}

原文:https://www.cnblogs.com/dmhp/p/5089378.html

PHP+Javascript实现拖动滑块完成拼图验证码

下载源码 or 查看演示

github地址:https://github.com/binwind8/tncode

重要的文件:

1、tncode.js

/*! tncode 1.2 author:weiyingbin email:277612909@qq.com
//@ object webiste: http://www.39gs.com/archive/259.html
//@ https://github.com/binwind8/tncode
*/
if(!document.getElementByClassName){
    function hasClass(elem, cls) {
      cls = cls || '';
      if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
      var ret = new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
      return ret;
    }
    document.getElementByClassName = function(className,index){
        var nodes=document.getElementsByTagName("*");//获取页面里所有元素,因为他会匹配全页面元素,所以性能上有缺陷,但是可以约束他的搜索范围;
        var arr=[];//用来保存符合的className;
        for(var i=0;i<nodes.length;i++){
            if(hasClass(nodes[i],className)) arr.push(nodes[i]);
        }
        if(!index)index=0;
        return index==-1?arr:arr[index];
    };
    function addClass( elements,cName ){
       if( !hasClass( elements,cName ) ){
          elements.className += " " + cName;
       };
    }
    function removeClass( elements,cName ){
       if( hasClass( elements,cName ) ){
          elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换
       };
    }
}

function appendHTML(o,html) {
    var divTemp = document.createElement("div"), nodes = null
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    o.appendChild(fragment);
    nodes = null;
    fragment = null;
};



var _ajax = function() {};
_ajax.prototype = {
    request: function(method, url, callback, postVars) {
        var xhr = this.createXhrObject()();
        xhr.onreadystatechange = function() {
            if (xhr.readyState !== 4) return;
            (xhr.status === 200) ?
                callback.success(xhr.responseText, xhr.responseXML) :
                callback.failure(xhr,status);
        };
        if (method !== "POST"&&postVars) {
            url += "?" + this.JSONStringify(postVars);
            postVars = null;
        }
        xhr.open(method, url, true);
        xhr.send(postVars);
    },
    createXhrObject: function() {
        var methods = [
            function() { return new XMLHttpRequest(); },
            function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
            function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
        ],
        i = 0,
        len = methods.length,obj;
        for (; i < len; i++) {
            try {
                methods[i];
            } catch(e) {
                continue;
            }
            this.createXhrObject = methods[i];
            return methods[i];
        }
        throw new Error("ajax created failure");
    },
    JSONStringify: function(obj) {
        return JSON.stringify(obj).replace(/"|{|}/g, "")
                    .replace(/b:b/g, "=")
                    .replace(/b,b/g, "&");
    }
};


var tncode = {
    _obj:null,
    _tncode:null,
    _img:null,
    _img_loaded:false,
    _is_draw_bg:false,
    _is_moving:false,
    _block_start_x:0,
    _block_start_y:0,
    _doing:false,
    _mark_w:50,
    _mark_h:50,
    _mark_offset:0,
    _img_w:240,
    _img_h:150,
    _result:false,
    _err_c:0,
    _onsuccess:null,
    _bind:function(elm,evType,fn){
        //event.preventDefault();
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn);//DOM2.0
            return true;
        }else if (elm.attachEvent) {
            var r = elm.attachEvent(evType, fn);//IE5+
            return r;
        }
    },
    _block_start_move:function(e){
        if(tncode._doing||!tncode._img_loaded){
            return;
        }
        e.preventDefault();
        var theEvent = window.event || e;
        if(theEvent.touches){
            theEvent = theEvent.touches[0];
        }

        console.log("_block_start_move");

        var obj = document.getElementByClassName('slide_block_text');
        obj.style.display="none";
        tncode._draw_bg();
        tncode._block_start_x = theEvent.clientX;
        tncode._block_start_y = theEvent.clientY;
        tncode._doing = true;
        tncode._is_moving = true;
    },
    _block_on_move:function(e){
        if(!tncode._doing)return true;
        if(!tncode._is_moving)return true;
        e.preventDefault();
        var theEvent = window.event || e;
        if(theEvent.touches){
            theEvent = theEvent.touches[0];
        }
        tncode._is_moving = true;
        console.log("_block_on_move");
                //document.getElementById('msg').innerHTML = "move:"+theEvent.clientX+";"+theEvent.clientY;
        var offset = theEvent.clientX - tncode._block_start_x;
        if(offset<0){
            offset = 0;
        }
        var max_off = tncode._img_w - tncode._mark_w;
        if(offset>max_off){
            offset = max_off;
        }
        var obj = document.getElementByClassName('slide_block');

        obj.style.cssText = "transform: translate("+offset+"px, 0px)";
        tncode._mark_offset = offset/max_off*(tncode._img_w-tncode._mark_w);
        tncode._draw_bg();
        tncode._draw_mark();
    },
    _block_on_end:function(e){
        if(!tncode._doing)return true;
        e.preventDefault();
        var theEvent = window.event || e;
        if(theEvent.touches){
            theEvent = theEvent.touches[0];
        }
        console.log("_block_on_end");
        tncode._is_moving = false;
        tncode._send_result();
    },
    _send_result:function(){
        var haddle = {success:tncode._send_result_success,failure:tncode._send_result_failure};
        tncode._result = false;
        var re = new _ajax();
        re.request('get',tncode._currentUrl().replace('houtai/assets/js', 'config/libs')+'tn_check.php?tn_r='+tncode._mark_offset,haddle);
    },
    _send_result_success:function(responseText,responseXML){
        tncode._doing = false;
        if(responseText=='ok'){
            tncode._showmsg('验证成功',1);
            tncode._result = true;
            document.getElementByClassName('hgroup').style.display="block";
            //setTimeout(tncode.hide,2500);
            setTimeout(function(){
                tncode.hide();
                tncode._tncode.style.backgroundColor = "#52d192";
                tncode._tncode.style.border = "1px solid #52d192";
                tncode._tncode.innerHTML = '验证成功';
            },2500);
            if(tncode._onsuccess){
                tncode._onsuccess();
            }
        }else{
            var obj = document.getElementById('tncode_div');
            addClass( obj,'dd');
            setTimeout(function(){
                removeClass( obj,'dd');
            },200);
            tncode._result = false;
            tncode._showmsg('验证失败');
            tncode._err_c++;
            if(tncode._err_c>5){
                tncode.refresh();
            }
        }
    },
    _send_result_failure:function(xhr,status){

    },
    _draw_fullbg:function(){
        var canvas_bg = document.getElementByClassName('tncode_canvas_bg');
        var ctx_bg = canvas_bg.getContext('2d');
        ctx_bg.drawImage(tncode._img, 0, tncode._img_h*2, tncode._img_w, tncode._img_h, 0, 0, tncode._img_w, tncode._img_h);
    },
    _draw_bg:function(){
        if(tncode._is_draw_bg){
            return;
        }
        tncode._is_draw_bg = true;
        var canvas_bg = document.getElementByClassName('tncode_canvas_bg');
        var ctx_bg = canvas_bg.getContext('2d');
        ctx_bg.drawImage(tncode._img, 0, 0, tncode._img_w, tncode._img_h, 0, 0, tncode._img_w, tncode._img_h);
    },
    _draw_mark:function(){
        var canvas_mark = document.getElementByClassName('tncode_canvas_mark');
        var ctx_mark = canvas_mark.getContext('2d');
        //清理画布
        ctx_mark.clearRect(0,0,canvas_mark.width,canvas_mark.height);
        ctx_mark.drawImage(tncode._img, 0, tncode._img_h, tncode._mark_w,tncode._img_h,tncode._mark_offset,0,tncode._mark_w, tncode._img_h);
        var imageData = ctx_mark.getImageData(0, 0, tncode._img_w, tncode._img_h);
          // 获取画布的像素信息
          // 是一个一维数组,包含以 RGBA 顺序的数据,数据使用  0 至 255(包含)的整数表示
          // 如:图片由两个像素构成,一个像素是白色,一个像素是黑色,那么 data 为
          // [255,255,255,255,0,0,0,255]
          // 这个一维数组可以看成是两个像素中RBGA通道的数组的集合即:
          // [R,G,B,A].concat([R,G,B,A])
        var data = imageData.data;
        //alert(data.length/4);
        var x = tncode._img_h,y=tncode._img_w;
        for(var j = 0; j < x; j++) {
            var ii = 1,k1=-1;
            for(var k=0;k<y&&k>=0&&k>k1;){
              // 得到 RGBA 通道的值
                var i = (j*y+k)*4;
                k+=ii;
                var r = data[i]
                  , g = data[i+1]
                  , b = data[i+2];
                // 我们从最下面那张颜色生成器中可以看到在图片的右上角区域,有一小块在
                // 肉眼的观察下基本都是白色的,所以我在这里把 RGB 值都在 245 以上的
                // 的定义为白色
                // 大家也可以自己定义的更精确,或者更宽泛一些
                if(r+g+b<200) data[i+3] = 0;
                else{
                    var arr_pix = [1,-5];
                    var arr_op = [250,0];
                    for (var i =1; i<arr_pix[0]-arr_pix[1]; i++) {
                        var iiii = arr_pix[0]-1*i;
                        var op = parseInt(arr_op[0]-(arr_op[0]-arr_op[1])/(arr_pix[0]-arr_pix[1])*i);
                        var iii = (j*y+k+iiii*ii)*4;
                        data[iii+3] = op;
                    }
                    if(ii==-1){
                        break;
                    }
                    k1 = k;
                    k = y-1;
                    ii = -1;
                };
            }
        }
        ctx_mark.putImageData(imageData, 0, 0);
    },
    _reset:function(){
        tncode._mark_offset = 0;
        tncode._draw_bg();
        tncode._draw_mark();
        var obj = document.getElementByClassName('slide_block');
        obj.style.cssText = "transform: translate(0px, 0px)";
    },
    show:function(){
        var obj = document.getElementByClassName('hgroup');
        if(obj){
            obj.style.display="none";
        }
        tncode.refresh();
        tncode._tncode = this;
        document.getElementById('tncode_div_bg').style.display="block";
        document.getElementById('tncode_div').style.display="block";
    },
    hide:function(){
        document.getElementById('tncode_div_bg').style.display="none";
        document.getElementById('tncode_div').style.display="none";
    },
    _showmsg:function(msg,status){
        if(!status){
            status = 0;
            var obj = document.getElementByClassName('tncode_msg_error');
        }else{
            var obj = document.getElementByClassName('tncode_msg_ok');
        }
        obj.innerHTML = msg;
        var setOpacity = function (ele, opacity) {
            if (ele.style.opacity != undefined) {
                ///兼容FF和GG和新版本IE
                ele.style.opacity = opacity / 100;

            } else {
                ///兼容老版本ie
                ele.style.filter = "alpha(opacity=" + opacity + ")";
            }
        };
        function fadeout(ele, opacity, speed) {
            if (ele) {
                var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100;
                v < 1 && (v = v * 100);
                var count = speed / 1000;
                var avg = (100 - opacity) / count;
                var timer = null;
                timer = setInterval(function() {
                    if (v - avg > opacity) {
                        v -= avg;
                        setOpacity(ele, v);
                    } else {
                        setOpacity(ele, 0);
                        if(status==0){
                            tncode._reset();
                        }
                        clearInterval(timer);
                    }
                }, 100);
            }
        }
        function fadein(ele, opacity, speed) {
            if (ele) {
                var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity;
                v < 1 && (v = v * 100);
                var count = speed / 1000;
                var avg = count < 2 ? (opacity / count) : (opacity / count - 1);
                var timer = null;
                timer = setInterval(function() {
                    if (v < opacity) {
                        v += avg;
                        setOpacity(ele, v);
                    } else {
                        clearInterval(timer);
                        setTimeout(function() {fadeout(obj, 0, 6000);},1000);
                    }
                }, 100);
            }
        }

        fadein(obj, 80, 4000);
    },
    _html:function(){
        var d = document.getElementById('tncode_div_bg');
        if(d)return;
        var html = '<div class="tncode_div_bg" id="tncode_div_bg"></div><div class="tncode_div" id="tncode_div"><div class="loading">加载中</div><canvas class="tncode_canvas_bg"></canvas><canvas class="tncode_canvas_mark"></canvas><div class="hgroup"></div><div class="tncode_msg_error"></div><div class="tncode_msg_ok"></div><div class="slide"><div class="slide_block"></div><div class="slide_block_text">拖动左边滑块完成上方拼图</div></div><div class="tools"><div class="tncode_close"></div><div class="tncode_refresh"></div><div class="tncode_tips"></div></div></div>';
        var bo = document.getElementsByTagName('body');
        appendHTML(bo[0],html);
    },
    _currentUrl:function(){
        var list = document.getElementsByTagName('script');
        for (var i in list) {
            var  d=list[i];
            if(d.src.indexOf('tn_code')!==-1){//js文件名一定要带这个字符
                var arr = d.src.split('tn_code');
                return arr[0];
            }
        }
    },
    refresh:function(){
        var isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
        var _this = this;
        tncode._err_c = 0;
        tncode._is_draw_bg = false;
        tncode._result = false;
        tncode._img_loaded = false;
        var obj = document.getElementByClassName('tncode_canvas_bg');
        obj.style.display="none";
        obj = document.getElementByClassName('tncode_canvas_mark');
        obj.style.display="none";
        tncode._img = new Image();
        var img_url = tncode._currentUrl().replace('houtai/assets/js', 'config/libs')+"tncode.php?t="+Math.random();
        if(!isSupportWebp){//浏览器不支持webp
            img_url+="&nowebp=1";
        }
        tncode._img.src = img_url;
        tncode._img.onload = function(){
            tncode._draw_fullbg();
            var canvas_mark = document.getElementByClassName('tncode_canvas_mark');
            var ctx_mark = canvas_mark.getContext('2d');
            //清理画布
            ctx_mark.clearRect(0,0,canvas_mark.width,canvas_mark.height);
            tncode._img_loaded = true;
            obj = document.getElementByClassName('tncode_canvas_bg');
            obj.style.display="";
            obj = document.getElementByClassName('tncode_canvas_mark');
            obj.style.display="";
        };
        //alert("Hong Kong ForHarvest Technology and Culture Development Co. Limited".length);
        obj = document.getElementByClassName('slide_block');
        obj.style.cssText = "transform: translate(0px, 0px)";
        obj = document.getElementByClassName('slide_block_text');
        obj.style.display="block";
    },
    init:function(){
        var _this = this;
        if(!tncode._img){
            tncode._html();
            var obj = document.getElementByClassName('slide_block');

            tncode._bind(obj,'mousedown',_this._block_start_move);
            tncode._bind(document,'mousemove',_this._block_on_move);
            tncode._bind(document,'mouseup',_this._block_on_end);

            tncode._bind(obj,'touchstart',_this._block_start_move);
            tncode._bind(document,'touchmove',_this._block_on_move);
            tncode._bind(document,'touchend',_this._block_on_end);

            var obj = document.getElementByClassName('tncode_close');
            tncode._bind(obj,'touchstart',_this.hide);
            tncode._bind(obj,'click',_this.hide);
            var obj = document.getElementByClassName('tncode_refresh');

            tncode._bind(obj,'touchstart',_this.refresh);
            tncode._bind(obj,'click',_this.refresh);


            var objs = document.getElementByClassName('tncode',-1);
            for (var i in objs) {
                var o = objs[i];
                o.innerHTML = '点击按钮进行验证';
                tncode._bind(o,'touchstart',_this.show);
                tncode._bind(o,'click',_this.show);
            }
        }
    },
    result:function(){
        return tncode._result;
    },
    onsuccess:function(fn){
        tncode._onsuccess = fn;
    }
};
var $TN = tncode;
var _old_onload = window.onload;
window.onload = function(){
    if(typeof _old_onload == 'function'){
        _old_onload();
    }
    tncode.init();
};

2、TnCode.class.php

<?php
/*! tncode 1.2 author:weiyingbin email:277612909@qq.com
//@ object webiste: http://www.39gs.com/archive/259.html
//@ https://github.com/binwind8/tncode
*/
class TnCode
{
    var $im = null;
    var $im_fullbg = null;
    var $im_bg = null;
    var $im_slide = null;
    var $bg_width = 240;
    var $bg_height = 150;
    var $mark_width = 50;
    var $mark_height = 50;
    var $bg_num = 6;
    var $_x = 0;
    var $_y = 0;
    //容错象素 越大体验越好,越小破解难道越高
    var $_fault = 3;
    function __construct(){
        //ini_set('display_errors','On');
        //
        error_reporting(0);
        if(!isset($_SESSION)){
            session_start();
        }
    }
    function make(){
        $this->_init();
        $this->_createSlide();
        $this->_createBg();
        $this->_merge();
        $this->_imgout();
        $this->_destroy();
    }

    function check($offset=''){
        if(!$_SESSION['tncode_r']){
            return false;
        }
        if(!$offset){
            $offset = $_REQUEST['tn_r'];
        }
        $ret = abs($_SESSION['tncode_r']-$offset)<=$this->_fault;
        if($ret){
            unset($_SESSION['tncode_r']);
        }else{
            $_SESSION['tncode_err']++;
            if($_SESSION['tncode_err']>10){//错误10次必须刷新
                unset($_SESSION['tncode_r']);
            }
        }
        return $ret;
    }

    private function _init(){
        $bg = mt_rand(1,$this->bg_num);
        $file_bg = dirname(__FILE__).'/tn_img/bg/'.$bg.'.png';
        $this->im_fullbg = imagecreatefrompng($file_bg);
        $this->im_bg = imagecreatetruecolor($this->bg_width, $this->bg_height);
        imagecopy($this->im_bg,$this->im_fullbg,0,0,0,0,$this->bg_width, $this->bg_height);
        $this->im_slide = imagecreatetruecolor($this->mark_width, $this->bg_height);
        $_SESSION['tncode_r'] = $this->_x = mt_rand(50,$this->bg_width-$this->mark_width-1);
        $_SESSION['tncode_err'] = 0;
        $this->_y = mt_rand(0,$this->bg_height-$this->mark_height-1);
    }

    private function _destroy(){
        imagedestroy($this->im);
        imagedestroy($this->im_fullbg);
        imagedestroy($this->im_bg);
        imagedestroy($this->im_slide);
    }
    private function _imgout(){
        if(!$_GET['nowebp']&&function_exists('imagewebp')){//优先webp格式,超高压缩率
            $type = 'webp';
            $quality = 40;//图片质量 0-100
        }else{
            $type = 'png';
            $quality = 7;//图片质量 0-9
        }
        header('Content-Type: image/'.$type);
        $func = "image".$type;
        $func($this->im,null,$quality);
    }
    private function _merge(){
        $this->im = imagecreatetruecolor($this->bg_width, $this->bg_height*3);
        imagecopy($this->im, $this->im_bg,0, 0 , 0, 0, $this->bg_width, $this->bg_height);
        imagecopy($this->im, $this->im_slide,0, $this->bg_height , 0, 0, $this->mark_width, $this->bg_height);
        imagecopy($this->im, $this->im_fullbg,0, $this->bg_height*2 , 0, 0, $this->bg_width, $this->bg_height);
        imagecolortransparent($this->im,0);//16777215
    }

    private function _createBg(){
        $file_mark = dirname(__FILE__).'/tn_img/tn_mark.png';
        $im = imagecreatefrompng($file_mark);
        header('Content-Type: image/png');
        //imagealphablending( $im, true);
        imagecolortransparent($im,0);//16777215
        //imagepng($im);exit;
        imagecopy($this->im_bg, $im, $this->_x, $this->_y  , 0  , 0 , $this->mark_width, $this->mark_height);
        imagedestroy($im);
    }

    private function _createSlide(){
        $file_mark = dirname(__FILE__).'/tn_img/tn_mark2.png';
        $img_mark = imagecreatefrompng($file_mark);
        imagecopy($this->im_slide, $this->im_fullbg,0, $this->_y , $this->_x, $this->_y, $this->mark_width, $this->mark_height);
        imagecopy($this->im_slide, $img_mark,0, $this->_y , 0, 0, $this->mark_width, $this->mark_height);
        imagecolortransparent($this->im_slide,0);//16777215
        //header('Content-Type: image/png');
        //imagepng($this->im_slide);exit;
        imagedestroy($img_mark);
    }

}
?>

3、tn_style.css

/*按钮*/
.clear{clear: both;}
.tncode{
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 4px;
    width: 100%;
    height: 44px;
    cursor: pointer;
    opacity: 1;
    line-height: 44px;
}
/*浮层*/
.tncode_div_bg{
    width: 100%;height: 100%;position: absolute;
    top:0;
    left:0;
    z-index:1000;
    background-color: rgba(0,0,0,0.5);
    opacity:0.3;
    filter: alpha(opacity=30); background-color:#000;
    *zoom:1;
    display: none;
}
.tncode_div{
    display: none;
    background-color: white;
    z-index: 1000000;
    width: 260px;height: 260px;
    position: absolute;
    left: 50%;top:50%;
    margin-top: -130px;
    margin-left: -130px;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    overflow: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696',Direction=135, Strength=5);/*for ie6,7,8*/
    /*background-color: #ccc;*/
    -moz-box-shadow:2px 2px 5px #969696;/*firefox*/
    -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
    box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}
.tncode_div .tncode_canvas_bg{
    z-index: 0;
}
.tncode_div .tncode_canvas_mark{
    z-index: 10000;
}
.tncode_div canvas{
    position: absolute;
    left: 10px;
    top: 10px;
}
.tncode_div .loading{
    padding-top: 60px;
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: #ccc;
    width: 240px;
    height: 150px;
    text-align: center;
    box-sizing:border-box;
}
.dd{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: ddf 0.1s ease-in 0s infinite;
    -o-animation: ddf 0.1s ease-in 0s infinite;
    animation: ddf 0.1s ease-in 0s infinite;
}
@-webkit-keyframes ddf {
    0% {-webkit-transform: translate(-8px, 3px);}
    20% {-webkit-transform: translate(-3px, 1.5px);}
    50% {-webkit-transform: translate(0px, 0px) ;}
    70% {-webkit-transform: translate(5px, -1.5px) ;}
    100% {-webkit-transform: translate(0px, 0px);}
}
@-o-keyframes ddf {
    0% {-o-transform: translate(-8px, 3px);}
    20% {-o-transform: translate(-3px, 1.5px);}
    50% {-o-transform: translate(0px, 0px) ;}
    70% {-o-transform: translate(5px, -1.5px) ;}
    100% {-o-transform: translate(0px, 0px);}
}
@-moz-keyframes ddf {
    0% {-moz-transform: translate(-8px, 3px);}
    20% {-moz-transform: translate(-3px, 1.5px);}
    50% {-moz-transform: translate(0px, 0px) ;}
    70% {-moz-transform: translate(5px, -1.5px) ;}
    100% {-moz-transform: translate(0px, 0px);}
}
@keyframes ddf {
    0% {transform: translate(-8px, 3px);}
    20% {transform: translate(-3px, 1.5px);}
    50% {transform: translate(0px, 0px) ;}
    70% {transform: translate(5px, -1.5px) ;}
    100% {transform: translate(0px, 0px);}
}
.hgroup{
    z-index: 20000;
    content: "";
    position: absolute;
    left: -800px;
    top: 70px;
    width: 250px;
    height: 15px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 3s ease-in 0s infinite;
    -o-animation: searchLights 3s ease-in 0s infinite;
    animation: searchLights 3s ease-in 0s infinite;
}


@-webkit-keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}

@-o-keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}

@-moz-keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}

@keyframes searchLights {
    0% {
        left: -800px;
        top: 70px;
    }

    to {
        left: 350px;
        top: 70px
    }
}




/*拉条*/
.slide,.slide_block,.tools .tncode_close,.tools .tncode_refresh{
    background-repeat: no-repeat;
    background-image: url('../img/tn_icon.png');
}
.tncode_msg_ok{
    background-color: #24C628;
}
.tncode_msg_error{
    background-color: #DE5145;
}
.tncode_msg_ok,.tncode_msg_error{
    position: absolute;
    top:136px;
    left: 10px;
    width: 240px;  /* 同tncode_canvas_bg */
    height: 24px;
    color: #fff;
    margin: 0;
    padding: 2px 10px;
    overflow: visible;
    background-position: 0px 0px;
    font-size: 14px;
    opacity:0;
    filter: alpha(opacity=0.5);
    z-index: 10000;
    text-align: center;
}
.slide{
    position: absolute;
    top:160px;
    width: 93.52%;
    height: 0px;
    background-color: white;
    background-size: 100%;
    margin: 5.39% 3.24%;
    padding: 0px 0px 13.67%;
    overflow: visible;
    background-position: 0px 0px;
}

.tools{
    position: absolute;
    top:210px;
    width: 93.52%;
    height: 0px;
    background-color: white;
    background-size: 100%;
    margin: 5.39% 3.24%;
    padding: 5px 0px 13.67%;
    overflow: visible;
    background-position: 0px 0px;
    border-top: 1px solid #EEEEEE;
}

.slide_block{
background-position: 0px 12.9794%;
width: 65px;
height: 65px;
    position: absolute;
    left: 0px;
    top: 0px;
margin: -4.62% 0 0 -2.31%;
cursor: pointer;
}
.slide_block_text{
background-position: 0px 12.9794%;
height: 65px;
    position: absolute;
    left: 65px;
    top: 20px;
margin: -4.62% 0 0 -2.31%;
cursor: pointer;
font-size: 14px;
    color: rgb(136, 148, 157);
}

.tncode_canvas_bg,.tncode_canvas_mark{
   /* width: 240px;*/
}

.tools .tncode_close{
    background-position: 0 50%;
    height: 30px;
    width: 30px;
    float: left;
    margin-right: 10px;
    cursor: pointer;
}
.tools .tncode_refresh{
    background-position: 0 94%;
    height: 30px;
    width: 30px;
    float: left;
    cursor: pointer;
}
.tools .tncode_tips{
    float: right;
}
.tools .tncode_tips a{
    text-decoration: none;
    font-size: 10px;
    color: rgb(136, 148, 157);
}

原文:https://www.helloweba.net/php/551.html

CentOS 7 配置 nginx php-fpm 详细教程

CentOS 7 配置 Nginx 的步骤如下:

首先更新 yum,没有安装 yum 的自行安装

yum update

1. 安装 Nginx

yum install nginx 

开启 Nginx 并设置开机启动

systemctl start nginx
systemctl enable nginx

完成后,输入 localhost 会显示如下页面,表示安装成功,该页面会由两个信息,一个是配置文件的路径,一个是 www 目录的路径

2. 安装最新版本的 PHP、PHP-FPM

注意 PHP 与 PHP-FPM 版本必须保持一致

yum install php php-fpm php-mysql php-devel php-gd php-pecl-memcache php-pspell php-snmp php-xmlrpc php-xml php-pdo
php-pgsql php-pecl-redis php-soap

安装成功后,运行如下命令查看 php 版本

php -v

默认的 php-fpm 安装成功后,/var/run/php-fpm 下会有一个文件 php-fpm.pid

3. 配置 nginx 解析 php

1)修改 nginx 配置文件

vim /etc/nginx/nginx.conf

在 server 中插入如下代码:

location ~ \.php$ {
try_files $uri =404;
fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;

###Save user landing page to cookie: srcid for PHP files
##add_header Set-Cookie $srcid;
}

使用如下站点配置指令就可以支持 URL 美化:

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

2) 修改 php-fpm 配置文件

vim /etc/php-fpm.d/www.conf

找到以下三行代码并修改如下

user = nginx 
group = nginx
listen = /var/run/php-fpm/php-fpm.sock
listen.owner = nignx
listen.group = nginx
listen.mode = 0660

如果没有配置这一步,浏览器打开 php 文件会报错

“The page you are looking for is temporarily unavailable. Please try again later”

3)修改 php.ini

vim /etc/php.ini

找到 cgi.fix_pathinfo 并修改为 0

cgi.fix_pathinfo=0

以上配置完成后,重启 nginx、php-fpm 

systemctl restart php-fpm nginx

测试配置是否成功

vim /usr/share/nginx/html/test.php
<?php
  // test script for CentOS/RHEL 7+PHP 7.2+Nginx 
  phpinfo();
?>

在浏览器打开 lcoalhost/test.php

资料参考:

https://serverfault.com/questions/607370/getting-the-page-you-are-looking-for-is-temporarily-unavailable-please-try-aga

原文链接:https://www.cnblogs.com/ryanzheng/p/11263261.html

PHP网站后台模板(推荐)大全

PHP网站后台模板还是有很多的,网上随便搜索也能查找出来很多,我只是想说的是:PHP网站后台模板分为两种:一种是纯静态的PHP网站后台模板;另一种就是可以用前端框架来做后台模板;

做网站的都明白:大部分的 Web 应用和动态网站都需要一个后台管理系统用于管理前台界面的信息展示以及用户信息。管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,这样使用后台管理系统的人员才能够方便的进行操作和管理。

一、PHP网站HTML后台模板(纯静态)

1、简洁扁平化CMS网站后台管理系统网站模板全套

百度网盘下载链接: https://pan.baidu.com/s/1slbNKpJ 密码: j5tf

在线预览:

2、大气通用购物商城后台管理系统网站模板全套

百度网盘下载链接: https://pan.baidu.com/s/1cEmhpO 密码: zqgq

在线预览:

3、大气响应式CMS手机电脑后台管理系统网站模板

百度网盘下载链接: https://pan.baidu.com/s/1hr8tZzm 密码: gn6y

在线预览:

4、简单实用网站后台管理系统网站模板

百度网盘下载链接: https://pan.baidu.com/s/1dE0Y9vN 密码: xe1y

在线预览:

5、大气黑色常用后台管理网站模板

百度网盘下载链接: https://pan.baidu.com/s/1boDnOEb 密码: qpgj

在线预览:

6、简洁实用的后台管理静态网页模板

百度网盘下载链接: https://pan.baidu.com/s/1qYDJBpq 密码: 9pye

在线预览:

7、简洁大气扁平化通用网站后台管理系统全套

百度网盘下载链接: https://pan.baidu.com/s/1i4LjjV3 密码: 6ucc

在线预览:

8、绿色清爽的HTML5通用后台管理系统模板

百度网盘下载链接: https://pan.baidu.com/s/1jIwuQMi 密码: f3u7

在线预览:

9、蓝色的企业后台cms管理系统模板

百度网盘下载链接: https://pan.baidu.com/s/1gf5U1UV 密码: pdka

在线预览:

10、实用的cms企业后台管理模板html

百度网盘下载链接: https://pan.baidu.com/s/1eS6CwaY 密码: tdww

在线预览:

综上百度网盘链接: https://pan.baidu.com/s/1lJ26rrPLgJcZKq3JeJLchA 提取码: fjpv

二、前端框架制作PHP网站后台模板

1、Amaze ~ 妹子 UI

Amaze UI 中国首个开源 HTML5 跨屏前端框架;

官方网址是:http://amazeui.org/

2、bootstrap

bootstrap是一个简洁、直观、强悍的前端开发框架,让web开发更迅速、更简单。

官方网址是:http://getbootstrap.com/

3、H-ui

H-ui前端框架是在bootstrap的思想基础上基于 HTML、CSS、JAVASCRIPT开发的轻量级web前端框架,开源免费,简单灵活,兼容性好,满足大多数中国网站,H-ui——专注前端解决方案。

官方网址是:http://www.h-ui.net/

4、LayUI

官方网址是:http://www.layui.com

Demo:   https://www.layui.com/admin/pro/

后台模板下载: https://fly.layui.com/download/layuiAdmin/

文档:  https://www.layui.com/doc/

5、DWZ富客户端框架

官方网址是: http://jui.org/   (已经基本不更新了)

6、B-JUI 前端管理框架

官方网址是:http://www.b-jui.com (已经有几年没更新了)

旧官网地址b-jui.cn已失效

新版1.3的Demo:  http://demo.b-jui.com/

旧版1.2的Demo:  http://demo.b-jui.com/1.2/

旧版1.2下载: http://www.b-jui.com/download.html

7、Top-JUI

官网地址: https://www.topjui.com/

DEMO:  http://demo.topjui.com/

https://gitee.com/xvpindex/ewsdCMS

8、MDUI

官网地址: https://www.mdui.org/

9、阿里开源项目之Ant Design Pro

官网地址:https://pro.ant.design/index-cn
GitHub源码:https://github.com/ant-design/ant-design-pro
核心使用了UmiJs框架: https://umijs.org

后台模板源码:


1、bootstrap各种后台管理模板
Git源码:https://gitee.com/theseason5/theme

2、hAdmin

Git源码: https://gitee.com/mirrors/hadmin

很多人用bootstrap框架中的hAdmin来做网站后台;

hAdmin是一个免费的后台管理模版,该模版基于bootstrap与jQuery制作,集成了众多常用插件,基本满足日常后台需要,修改时可根据自身需求,来定制后台模版。

3、光年(Light Year Admin)后台管理系统模板
Git源码: https://gitee.com/yinqi/Light-Year-Admin-Template
演示地址: http://lyear.itshubao.com

4、X-admin
基于Layui后台模板
Git源码: https://gitee.com/daniuit/X-admin
演示地址 http://x.xuebingsi.com/x-admin/v2.2/

5、WeAdmin
基于Layui的后台管理系统前端模板
Git源码: https://gitee.com/lovetime/WeAdmin
演示地址:http://lovetime.gitee.io/weadmin/

6、layui-mini
Git源码: https://gitee.com/zhongshaofa/layuimini

7、nepadmin
基于 layui 的后台单页面模板
Git源码: https://gitee.com/june000/nep-admin
演示地址:https://june000.gitee.io/nep-admin/

8. QAdmin

基于layui框架与Vue.js构建

官网:http://www.qadmin.net/

Git源码: https://gitee.com/flash127/qadmin

演示地址:http://demo.qadmin.net/

bootstrap收费模板(含免费)

https://startbootstrap.com/

上面介绍完后台静态模板,也顺便介绍几个几款比较强大的cms

1. iCms (基于iPHP框架的cms系统,强大的云插件市场)

2. 齐博CMS之X1  (基于thinkphp5开发的内容管理系统) (齐博CMS: 从PHP168分离出来的一个分支,独立发展出来的CMS)

3. xunruicms (finecms进化改名而来)

poscms(跟finecms一样)

finecms (核心基于CI框架的cms)


像phpcms,帝国CMS大家应该耳熟能详,这些我就不推荐了

其他参考资料:

https://www.fujieace.com/php/background-template.html

https://www.cnblogs.com/yonge/articles/2662334.html