山河博客

PHP实现ping api

大家好我是山河,今天给大家分享点技术,很多小伙伴问我怎么写php的ping api,我跟他们说用exec或者systerm函数来实现,但是他们说主机商不允许使用这两个函数,让我想想办法。

既然不能直接使用dos命令来搞ping,那我们只能模拟ping了。

话不多说,上效果图

嘿嘿,这样效果也差不多。

我们运用php的fsockopen函数来模拟 HTTP连接 实现ping的效果,但实际与ping差距是很大的,因为ping是ICMP协议,而我们是使用tcp或者udp协议。

话不多说,上代码,本代码的模拟ping是使用tcp协议 (HTTP/1.1 和 HTTP/2 都是基于 TCP 传输协议),

HTTP/3 是基于 UDP 传输协议

<?php
/*
    此模拟ping仅仅只是 使用 HTTP协议 模拟ping。不是真正的ping,与真正的 ping 误差很大。
*/
    // ping次数
    $num = 5;
    // 执行时间
    function times(){
        list($usec,$sec) = explode(" ",microtime());
        return ((float)$usec + (float)$sec); 
    }
    function demo($host,$port=80,$i) {
        if($i == 0) {
            echo 'Ping 域名 '.$host.'IP: ['.gethostbyname($host).'] 端口:'.$port.'<br />';
        } 
            echo ping($host,$port);
    }
    function ping($host,$port=80) {
        $starttime= times();
        $ip = gethostbyname($host);
        $fp = @fsockopen($host,$port);
        if(!$fp) {
            return 'ping超时!';
        } else {
            $get = "GET / HTTP/1.1\r\nHost:".$host."\r\nConnect:".$port."Close\r\n";
            fputs($fp,$get);
            fclose($fp);
            $nowtime = times();
            $time = $nowtime - $starttime;
            $time = ceil($time * 1000);
            return 'Ping from '.$ip.':'.$port.' time = '.$time.'ms<br />';
        }
    }
    for($i = 0;$i < $num;$i++){
        echo demo('blog.shanhe.info',80,$i);
        //每次运行中间间隔1S
        sleep(1);
        //刷新输出缓存
        ob_flush();
        flush();
    }

好了,我是山河,本文到此结束

域名绕过备案

域名绕过备案

大家好我是山河,今天给大家分享一个域名绕备案方法,很实用。

大家都知道,备案是很麻烦的一件事,山河最近购买了几个天翼云服务器,但是我在腾讯云备案的域名不能在天翼云上直接用,还需要提交给管局审核一遍才能使用,备案时间又要花半个多月时间,那么这服务器不是白白浪费了十几天。

所以山河想了一个办法来绕过备案,先用着,等备案时间过了再换成正常的。

话不多说,上教程。

环境要求:

1. 一台服务器(宝塔面板/其他面板也差不多)

2. 一个域名(备案不备案都可以)

先打开服务器的宝塔面板

本次演示服务器是天翼云服务器

首先先进到天翼云服务器管理,把防火墙安全组开了

先点击

域名绕过备案

再点击更改安全组

(点击查看图片)

域名绕过备案

点击新建安全组

域名绕过备案

添加规则

域名绕过备案

放通81端口

然后解析域名

域名绕过备案

这里域名不用加端口!

然后打开服务器的宝塔面板

添加域名,注意,这里需要加上域名:81

域名绕过备案

这样就ok了,然后我们试着访问一下。

域名绕过备案

嘿嘿,成功了!

如果想要隐藏端口呢,可以使用ssl,走加密就可以直接访问域名不用加端口了。

如果觉得实用的话呢可以推荐给其他待备案中的小伙伴。

我是山河。原创文章!

山河博客

暗黑紫冒泡幽灵404错误页

大家好我是山河,之前我不是在折腾网站的404错误页嘛,当时网友分享了很多个404错误页给我,我挑了几个好看的也分享给大家,不多说,先上图再上资源。

这个404错误页是纯代码实现,没用上图片!真纯代码,可以借鉴动画效果。

山河直接给大家上图上代码上资源

404错误页展示图
404错误页展示

幽灵气泡是动图,但是我懒得弄Gif动图了。

再上代码

<!-- /* 山河博客此代码源于网友分享:原作者信息未改,仅修复了代码 博客:blog.shanhe.info */ -->
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
  <title>山河博客-404页面</title>
  <style>
    <!-- 由于网站CSS代码在HTML代码里没高亮展示,我把CSS移到另外一个单独的CSS代码块,复制单独的CSS代码块过来这里即可,或者引入也可以 -->
  </style>
</head>
<body>
  <div class="box">
    <div class="box__ghost">
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="symbol"></div>
      <div class="box__ghost-container">
        <div class="box__ghost-eyes">
          <div class="box__eye-left"></div>
          <div class="box__eye-right"></div>
        </div>
        <div class="box__ghost-bottom">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="box__ghost-shadow"></div>
    </div>
    <div class="box__description">
      <div class="box__description-container">
        <div class="box__description-title">404错误!</div>
        <div class="box__description-text">看来我们找不到你要找的那一页</div>
      </div>
      <a href="https://blog.shanhe.info" class="box__button">返回首页</a>
    </div>
  </div>
</body>
</html> 
html,
    body {
      background: #28254C;
      font-family: 'Ubuntu';
    }
    * {
      box-sizing: border-box;
    }
    .box {
      width: 350px;
      height: 100%;
      max-height: 600px;
      min-height: 450px;
      background: #332F63;
      border-radius: 20px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 30px 50px;
    }
    .box .box__ghost {
      padding: 15px 25px 25px;
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -30%);
    }
    .box .box__ghost .symbol:nth-child(1) {
      opacity: .2;
      animation: shine 4s ease-in-out 3s infinite;
    }
    .box .box__ghost .symbol:nth-child(1):before,
    .box .box__ghost .symbol:nth-child(1):after {
      content: '';
      width: 12px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      bottom: 65px;
      left: 0;
    }
    .box .box__ghost .symbol:nth-child(1):before {
      transform: rotate(45deg);
    }
    .box .box__ghost .symbol:nth-child(1):after {
      transform: rotate(-45deg);
    }
    .box .box__ghost .symbol:nth-child(2) {
      position: absolute;
      left: -5px;
      top: 30px;
      height: 18px;
      width: 18px;
      border: 4px solid;
      border-radius: 50%;
      border-color: #fff;
      opacity: .2;
      animation: shine 4s ease-in-out 1.3s infinite;
    }
    .box .box__ghost .symbol:nth-child(3) {
      opacity: .2;
      animation: shine 3s ease-in-out .5s infinite;
    }
    .box .box__ghost .symbol:nth-child(3):before,
    .box .box__ghost .symbol:nth-child(3):after {
      content: '';
      width: 12px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      top: 5px;
      left: 40px;
    }
    .box .box__ghost .symbol:nth-child(3):before {
      transform: rotate(90deg);
    }
    .box .box__ghost .symbol:nth-child(3):after {
      transform: rotate(180deg);
    }
    .box .box__ghost .symbol:nth-child(4) {
      opacity: .2;
      animation: shine 6s ease-in-out 1.6s infinite;
    }
    .box .box__ghost .symbol:nth-child(4):before,
    .box .box__ghost .symbol:nth-child(4):after {
      content: '';
      width: 15px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      top: 10px;
      right: 30px;
    }
    .box .box__ghost .symbol:nth-child(4):before {
      transform: rotate(45deg);
    }
    .box .box__ghost .symbol:nth-child(4):after {
      transform: rotate(-45deg);
    }
    .box .box__ghost .symbol:nth-child(5) {
      position: absolute;
      right: 5px;
      top: 40px;
      height: 12px;
      width: 12px;
      border: 3px solid;
      border-radius: 50%;
      border-color: #fff;
      opacity: .2;
      animation: shine 1.7s ease-in-out 7s infinite;
    }
    .box .box__ghost .symbol:nth-child(6) {
      opacity: .2;
      animation: shine 2s ease-in-out 6s infinite;
    }
    .box .box__ghost .symbol:nth-child(6):before,
    .box .box__ghost .symbol:nth-child(6):after {
      content: '';
      width: 15px;
      height: 4px;
      background: #fff;
      position: absolute;
      border-radius: 5px;
      bottom: 65px;
      right: -5px;
    }
    .box .box__ghost .symbol:nth-child(6):before {
      transform: rotate(90deg);
    }
    .box .box__ghost .symbol:nth-child(6):after {
      transform: rotate(180deg);
    }
    .box .box__ghost .box__ghost-container {
      background: #fff;
      width: 100px;
      height: 100px;
      border-radius: 100px 100px 0 0;
      position: relative;
      margin: 0 auto;
      animation: upndown 3s ease-in-out infinite;
    }
    .box .box__ghost .box__ghost-container .box__ghost-eyes {
      position: absolute;
      left: 50%;
      top: 45%;
      height: 12px;
      width: 70px;
    }
    .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left {
      width: 12px;
      height: 12px;
      background: #332F63;
      border-radius: 50%;
      margin: 0 10px;
      position: absolute;
      left: 0;
    }
    .box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right {
      width: 12px;
      height: 12px;
      background: #332F63;
      border-radius: 50%;
      margin: 0 10px;
      position: absolute;
      right: 0;
    }
    .box .box__ghost .box__ghost-container .box__ghost-bottom {
      display: flex;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
    }
    .box .box__ghost .box__ghost-container .box__ghost-bottom div {
      flex-grow: 1;
      position: relative;
      top: -10px;
      height: 20px;
      border-radius: 100%;
      background-color: #fff;
    }
    .box .box__ghost .box__ghost-container .box__ghost-bottom div:nth-child(2n) {
      top: -12px;
      margin: 0 -0px;
      border-top: 15px solid #332F63;
      background: transparent;
    }
    .box .box__ghost .box__ghost-shadow {
      height: 20px;
      box-shadow: 0 50px 15px 5px #3B3769;
      border-radius: 50%;
      margin: 0 auto;
      animation: smallnbig 3s ease-in-out infinite;
    }
    .box .box__description {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
    }
    .box .box__description .box__description-container {
      color: #fff;
      text-align: center;
      width: 200px;
      font-size: 16px;
      margin: 0 auto;
    }
    .box .box__description .box__description-container .box__description-title {
      font-size: 24px;
      letter-spacing: .5px;
    }
    .box .box__description .box__description-container .box__description-text {
      color: #8C8AA7;
      line-height: 20px;
      margin-top: 20px;
    }
    .box .box__description .box__button {
      display: block;
      position: relative;
      background: #FF5E65;
      border: 1px solid transparent;
      border-radius: 50px;
      height: 50px;
      text-align: center;
      text-decoration: none;
      color: #fff;
      line-height: 50px;
      font-size: 18px;
      padding: 0 70px;
      white-space: nowrap;
      margin-top: 25px;
      transition: background .5s ease;
      overflow: hidden;
    }
    .box .box__description .box__button:before {
      content: '';
      position: absolute;
      width: 20px;
      height: 100px;
      background: #fff;
      bottom: -25px;
      left: 0;
      border: 2px solid #fff;
      transform: translateX(-50px) rotate(45deg);
      transition: transform .5s ease;
    }
    .box .box__description .box__button:hover {
      background: transparent;
      border-color: #fff;
    }
    .box .box__description .box__button:hover:before {
      transform: translateX(250px) rotate(45deg);
    }
    @keyframes upndown {
      0% {
        transform: translateY(5px);
      }
      50% {
        transform: translateY(15px);
      }
      100% {
        transform: translateY(5px);
      }
    }
    @keyframes smallnbig {
      0% {
        width: 90px;
      }
      50% {
        width: 100px;
      }
      100% {
        width: 90px;
      }
    }
    @keyframes shine {
      0% {
        opacity: .2;
      }
      25% {
        opacity: .1;
      }
      50% {
        opacity: .2;
      }
      100% {
        opacity: .2;
      }
    }

最后再上资源

源码代码均为网友分享,山河只做了修复效果或者bug。

山河博客

小书童404错误页

大家好我是山河,之前我不是在折腾网站的404错误页嘛,当时网友分享了很多个404错误页给我,我挑了几个好看的也分享给大家,不多说,先上图再上资源。

小书童404错误页照片
山河博客-小书童404错误页

这个404错误页还是不错的,话不多说,上资源

山河博客

阿帕奇Apache的一些操作指令

大家好我是山河,我今天给大家总结一下关于阿帕奇 Apache的一些cmd操作指令哈

查看Apache服务的帮助:[ httpd -help ] 
重启Apache服务:[ httpd -k restart ]
查看Apache服务版本号:[ httpd -v ]
停止Apache服务:[ httpd -k stop ]
启动Apache服务:[ httpd -k start ]
查看使用的模块:[ httpd -M ]
启动httpd.exe [ httpd.exe ]
验证配置文件是否有效:[ httpd -t ] 

阿帕奇 Apache的基础指令就是这些,希望能帮助到大家。

阿帕奇下载地址 阿帕奇豪斯下载 (apachehaus.com)

山河博客-404错误页图片

分享一个自定义好看的二次元风格的404错误页HTML5单页

大家好我是山河,今天我给大家分享一个二次元风格的404错误页。

山河好不容易修复了那位网友发给我的404错误页,结果刚把文章发出去没半天,又给我找事情做了,这次发了一个二次元风格的404错误页,山河修复了一些没用的代码,还剩下一小段CSS代码没修复,那段是动画的,我试了一下,能正常运行,我也就不管了,但是山河的代码编辑器居然显示警告⚠,浏览器里打开f12一看,没毛病报错,那就不管了。

不说了,先上个效果图片给大家看看长啥样

对了,这款404错误页是有音乐的,但是山河没法录制给大家听。

山河博客-二次元404错误页
山河博客-二次元404错误页

页面是有动态效果的,头像触碰会旋转,文字会跳动,就像这样

山河博客-二次元404错误页
山河博客-二次元404错误页

好了,介绍就到这里,文章结束

PS:本页面为网友分享给山河,山河仅做了修复,页面如有联系信息则为原作者,另外,如有侵犯您的权益,请联系山河删除。

SEO优化

站长疑问?如何优化SEO

今天山河来谈一个关于网站的一个对搜索引擎的优化的问题,很多朋友对如何优化SEO啊有非常多的疑问。咱们今天给大家解决这个问题

先给大家理解什么叫SEO,所谓SEO呢,即为(Search Engine Optimization): 翻译过来就是搜索引擎优化的意思。

SEO图片
SEO

而优化SEO呢就是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式,通俗一点就是提升网站搜索关键词的排名,优化SEO的方式包括站外 SEO 和站内 SEO 两方面。

我就给大家讲解几个必备的:

1.域名必须备案,备案增加域名的可信度,百度对这个比较看重

2.各大搜索引擎平台进行提交,百度,搜狗,360,神马,头条,国外的就不用了,必应和谷歌这两个是最频繁的,其他国外搜索引擎平台大多被墙了,用户不多。

3.站内优化,页面的关键词,描述,标题要做好,标题和关键词要一针见血,必须要贴近你这个页面的内容,另外网站标题不能超过两个关键词,另外图片,超链接要加上title属性,超链接设置属性为要跳到新窗口。

4.站外优化,站外优化,友情链接肯定是必备的,大量的优质友情链接,能促进蜘蛛循环,形成蜘蛛池,蜘蛛越多自然就有好处,要注意,交换友情链接的时候记得要看对方是不是给你的超链接标签加上了rel=”nofollow” 属性,这个属性会告诉蜘蛛不要追踪特定的网页链接。

5.初期成立的网站呢,前几个星期要形成规律的发帖子方式,这个是一个大佬当年跟我说的,不知道现在还有不有用。

6.404错误页优化,减少用户流失

之外还要注意保证网站的稳定。

本篇文章就讲到这里了,我是山河,感谢大家看此文章。

文章为山河手动码出来的原创文章

本站采用创作共用版权 CC BY-NC-SA 3.0 CN 许可协议,转载或复制请注明出处

分享一个自定义好看的404错误页HTML5单页

分享一个自定义好看的404错误页HTML5单页

大家好我是山河,今天山河啊来分享一个好看的404错误页。

大家在开发网站的时候,是不是为了404错误页而烦恼呢?有许多网友叫山河折腾几个好看的404错误页出来,山河最近有时间折腾了,就在抓紧时间做页面,正写着呢,就有朋友发了一个404错误页给我,让我修复,山河修复好了,分享给大家,先给大家上效果图。

404错误页-山河博客
404错误页-山河博客

页面不是禁止的噢,页面有动画效果,只是山河没空做gif图

好了,这次就讲到这里,下班!

PS:本页面为网友分享给山河,山河仅做了修复,页面如有联系信息则为原作者,另外,如有侵犯您的权益,请联系山河删除。

blog.shanhe.info_mouse_code

Javascript | Js实现网站中隐藏鼠标改为自定义图片

大家好我是山河,今天给大家带来Javascript | Js实现网站中隐藏鼠标改为自定义图片,

有很多网友想把网页上的浏览鼠标换成自己喜欢的图片显示,今天山河就来给大家实现这个功能。

代码由 Javascript + html + css 实现 山河把代码注释都标齐全,轻轻松松学会

我换成了这个

shanhe鼠标效果图
鼠标图片

效果图,我录屏拍摄的帧率不高,

shanhe鼠标效果图
shanhe鼠标效果图

是不是鼠标没了换成了这个更好看了呢,最重要的是自定义了,想变啥变啥

话不多说,直接上代码

注释也给大家写好了,一看就明白

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山河教程blog.shanhe.info-网站中隐藏鼠标改为自定义图片</title>
    <style>
        /* 默认外边距内边距为0 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 将图片默认设置为隐藏 */
        .shanhe-website-mouse {
            display: none;
            position: absolute;
            width: 30px;
        }
    </style>
</head>
<body>
    <!-- 页面要有元素撑开 -->
    <div style="height: 100vh;width: 100%;">
        <!-- 替换鼠标的自定义图片 -->
        <img class="shanhe-website-mouse" id="img" src="./MC.png" alt="MC鼠标">
    </div>
    <!-- 山河教程网站原创文章-blog.shanhe.info -->
    <script>
        // 页面加载完成执行函数
        window.addEventListener('load', function(){
            // 获取body
            var body = document.body;
            // 窗口绑定鼠标移动事件
            window.onmousemove = function(m) {
                // 隐藏鼠标
                body.style.cursor = 'none';
                // 鼠标坐标
                var m = m || window.event;
                console.log(m);
                // 获取鼠标横坐标与纵坐标
                var x = m.pageX;
                var y = m.pageY;
                // 设置自定义图片位置(由于本案例是替换鼠标,所以不更改)
                // 获取自定义图片并设置显示再设置位置
                document.getElementById('img').style.display = 'block';
                document.getElementById('img').style.left = x - 29 + 'px';
                document.getElementById('img').style.top = y + 'p
            }
        });
    </script>
</body>
</html>
代码图片

好了,教程结束

本文是山河博客原创文章,转载请注明

下载地址在最下方

域名不备案使用国内服务器方法

大家好我是山河,最近腾讯服务器打折力度很大啊,不少人都淘了好几台屯着,当然山河也没闲着,也搞了两台,但是有个问题,主域名用上了,给其他服务器用不合适,可是现在备案也要花10-20天的,中间这段时间服务器岂不是闲着了,怎么解决呢?

当然就是绕备案了,绕备案目前有两种方法,且听山河细细道来。

第一种:

(新版图片教程请点击此链接):域名绕过备案 – 山河技术分享 (shanhe.info)

裸81/82端口,什么叫裸81/82端口呢?我们网站啊是走80端口的,为HTTP(HyperText Transport Protocol)协议开发的,即为万维网(World Wide Web)协议,我们HTTP地址,就是所谓的网址,一般访问是xx.com:80的,但是我们只输入网址就行了,因为那些浏览器啊会自动给我们网址加上80端口,而国内服务器80端口是需要备案域名才能访问的,如果我们没备案就会被拦截,访问不了,所以我们可以裸81或者82端口。

81 82端口呢,是重定向端口,我们只需要服务器绑定域名的时候绑定 域名:81 或者 域名:82 就可以了。

域名解析IP的时候不需要加上端口,服务器绑定域名的时候则需要。

然后我们访问网站的时候需要 域名:81 / 域名:82 才行,这样就能实现绕端口了

当然,如果你们不想输入 81 82端口才能访问,我们也可以隐藏。

这就需要第二种方法了

第二种方法:

借助ssl来隐藏端口

我们搞完第一种了呢之后,申请一个ssl证书,(ssl证书有很多地方可以申请免费的,腾讯,宝塔等都可以)

然后呢,然后我就懒得讲了?

第二种方法请百度,打字太累。