山河博客

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,走加密就可以直接访问域名不用加端口了。

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

我是山河。原创文章!

山河博客HTML

一个动画渐变的科幻形按钮

大家好我是山河,今晚我给大家带来了一个很好看的按钮,动画效果很棒,代码大家自己借鉴吧。

话不多说,直接贴代码出来。

先上效果图(点击下面文字可以查看图片)

blog.shanhe.info
效果图

直接上代码

css代码块

a {
            display: block;
            width: 220px;
            height: 70px;
            z-index: 1;
        }

        a:after {
            content: '';
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            animation: gradient 3s ease-in-out infinite, border 0.5s forwards ease-in-out reverse;
        }

        a>span {
            display: block;
            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient 3s ease-in-out infinite;
        }

        .absolute-centering,
        body:after,
        a,
        a:after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .text-formatting,
        a {
            text-transform: uppercase;
            text-decoration: none;
            text-align: center;
            letter-spacing: 2px;
            line-height: 70px;
            font-size: 28px;
        }

        @keyframes gradient {
            0% {
                background-position: 14% 0%;
            }

            50% {
                background-position: 87% 100%;
            }

            100% {
                background-position: 14% 0%;
            }
        }

        @keyframes border {
            0% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 4px 66px, 4px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            25% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 66px, 216px 66px, 216px 100%, 100% 100%, 100% 0%, 0% 0%);
            }

            50% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 216px 4px, 100% 0%, 0% 0%);
            }

            75% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 0%, 0% 0%);
            }

            100% {
                -webkit-clip-path: polygon(0% 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, 0% 100%);
            }
        }

html代码块

<a href="#"><span>按钮</span></a>

好了,本文到此结束。

我是山河

Qr Cloud 是什么?

Qr Cloud 是一个专门为QRspeed / Clousx6做的手机编辑器,简便好用,首发时间为2022.3.20日内测版,站长收到了这款软件,提前帮你们测试下。

Qr Cloud 是由iapp开发而成。

软件图

https://blog.shanhe.info/
山河博客HTML

HTML表单升级教程-web前端

大家好,我是山河

这次带来HTML表单高级教程

没记错的话菜鸟教程是没有我写的这篇教程这么全

有问题可以邮箱发信息

不多说,上代码

<input type="url" name="userurl"/>
//url属性用于说明网站网址,显示为在一个文本框中输入URL地址。在提交表单时会自动验证url的值,如果不合格,验证不通过并会弹出提示
//其实也可以使用普通属性设置url输入框,例如可以使用max属性设置其最大值、min属性设置其最小值、step属性设置合法的数字间隔、利用value属性规定其默认值

<input type="email" name="user_email"/>
//email属性用于让浏览者输入E-mail地址。在提交表单时会自动验证email域的值,如果不合格就自动弹出提示,并拦截

帖子首发日期 2020-6-14

山河于 lolichan.vip论坛首发

山河博客HTML

制作响应式网站教程

大家好我是山河,鉴于很多小伙伴需要搞响应式网站,但是又无从下手,所以山河抽时间给大家写了一篇文章,个人认为应该算是通俗易懂。

案例代码可下载(网站底部)

好了,开始教程。

1.了解什么是响应式网页设计

2.了解 viewport 和 媒体查询

3.网页布局技术

下面我们开始讲解第一点

了解什么是响应式网页设计:

响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

之后是第二点

了解 viewport 和 媒体查询

所谓 viewport(视窗) 呢,就是我们眼睛能看见的地方,而在浏览器中,就是我们能在浏览器中看见的区域。

viewport 山河就不解释这么多,直接给大家常用的移动端的布局窗口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

上面这个代码的作用是让当前 viewport 的宽度等于 设备 的宽度,且禁止用户缩放。

viewport 详细的内容和参数 可以去 MDN 或 w3c 查看,这里就不多讲了。

然后山河来讲 媒体查询

那什么是媒体查询 ( @media 查询 ) 呢?

响应式设计仅仅是因为媒介查询才新兴起来的。此话可以在 MDN 上查到

CSS2 中引入了 @media 规则,它让为不同媒体类型定义不同样式规则成为可能。

下面来一个媒体查询的简单案例

@media screen and (max-width: 480px) {
  body {
    background: blue;
  }
}

此代码解释:当浏览器宽度达到 480px 或更小时,背景颜色改变为blue(蓝色)

然后具体的内容也是可以去MDN和w3c去看看,这里时间紧迫,山河就不讲这么仔细了。

接下来山河开始讲现代网页布局方式。

  1. 弹性布局
  2. 多列布局
  3. 网格布局

山河推荐使用 弹性布局的方式,山河 个人认为 它比多列布局,网格布局简便

由于时间关系,山河就只写一个弹性布局+viewport +媒体查询的方式给大家作为例子,多列布局和网格布局可以去MDN或w3c上查看相关资料,直接上代码。

<!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, maximum-scale=1, user-scalable=no">
    <title>山河-响应式网页案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        header {
            background: #FFA500;
        }
        header h1 {
            padding: 30px;
            text-align: center;
        }
        .container {
            max-width: 1135px;
            margin: 10px auto;
            padding: 10px;
            background: #ecf0f1;
        }
        .container ul {
            list-style: none;
            /* 开启弹性盒子 */
            display: flex;  
            /* 位置不够就换行,第一行在上方 */
            flex-wrap: wrap;
            /* 两端对齐,项目之间的间隔都相等 */
            justify-content: space-between;
        }
        .container ul li {
            background: #fff;
            margin: 10px 5px;
            display: flex;
            justify-content: space-between;
            width: 30%;
            height: 30%;
        }
        .container ul li img {
            width: 50%;
            height: 100%;
        }
        footer {
            background: #2E2E2E;
            color: #fff;
            padding: 20px 0;
        }
        footer p {
            text-align: center;
        }
        /* 媒体查询 */
        /* 适配平板端 */
        @media screen and (max-width:770px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 48%;
                margin: 10px 0b;
            }
        }
        /* 适配手机端 */
        @media screen and (max-width:480px){
            .container ul {
                width: 90%;
                margin: 0 auto;
            }
            .container ul li {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>山河-响应式网页案例</h1>
    </header>
    <div class="container">
        <ul>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
            <li>
                <img src="https://images.unsplash.com/photo-1646822109488-cb6c017c6dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
                <p>响应式网页</p>
            </li>
        </ul>
    </div>
    <footer>
        <p>Copyright © 2021-2022 山河技术分享-山河博客 blog.shanhe.info All Rights Reserved.</p>
    </footer>
</body>
</html>

效果预览图

blog.shanhe.info-wap
适应手机端

blog.shanhe.info-phablet
适应平板端
blog.shanhe.info-pc
PC端

好了,本文到此结束,希望能帮助到大家

文章 © 山河

有问题即可去网站底部找到站长信息联系山河

下载地址三个都是直接下载,下载方式上面的文字可无视。

山河博客

PHP策略模式详解-PHP设计模式

山河博客
山河博客

大家好我是山河,今天跟大家来谈谈PHP设计模式中的PHP策略模式

策略模式特点:传递不同的参数调用不同的策略(方法)

话不多说了,直接上代码加深印象

<?php
class Walk {
	public function way() {
		echo '走着去<br>';
	}
}
class Bus {
	public function way() {
		echo '坐车去<br>';
	}
}
//策略模式
class Student {
	public function play($obj) {
		$obj->way();
	}
}
//测试
$stu=new Student;
$stu->play(new Walk());	//走着去
$stu->play(new Bus());	//坐车去

大家看完这段代码应该都明白了吧。

好了,文章结束,我是山河

山河博客

PHP工厂模式详解-PHP设计模式

山河博客
山河博客

大家好我是山河,今天我给大家谈一谈关于PHP的设计模式之工厂模式哈

工厂模式特点:传递不同的参数获取不同的对象

上代码加深理解

<?php
class ProductsA {
}
class ProductsB {	
}
//工厂模式
class ProductsFactory {
	public function create($num) {
		switch($num) {
			case 1:
				return new ProductsA;
			case 2:
				return new ProductsB;
			default:
				return null;
		}
	}
}
//测试
$factory=new ProductsFactory();
$obj1=$factory->create(1);
$obj2=$factory->create(2);
var_dump($obj1,$obj2); //object(ProductsA)#2 (0) { } object(ProductsB)#3 (0) { } 

通过上方代码可以看出来,将ProductsFactory对象实例化了之后,调用create方法,传递1就实例化ProductsA对象,传递2就实例化ProductsB对象。

这个就是PHP工厂模式。

好了,本文结束,我是山河。

山河博客

PHP单例模式详解-PHP设计模式

山河博客
山河博客

大家好我是山河,今天我给大家谈谈关于这个PHP的单例模式啊,

什么是单例模式?

单例模式要求:一个类只能有一个对象

应用场景:多次请求数据库只需要一个连接对象。

实现:三私一公

1、私有的静态属性用来保存对象的单例
2、私有的构造方法用来阻止在类的外部实例化
3、私有的__clone阻止在类的外部clone对象
4、公有的静态方法用来获取对象的单例

代码详解

<?php
//三私一公
class DB {
	//静态的属性用来保存对象的单例
	private static $instance;
	//私有的构造方法阻止在类的外部实例化
	private function __construct() {
		
	}
	//私有的__clone()阻止在类的外部clone对象
	private function __clone() {
		
	}
	public static function getInstance() {
		//保存的值不属于DB类的类型就实例化
		if(!self::$instance instanceof self)
			self::$instance=new self();
		return self::$instance;
	}
}
//测试
$db1=DB::getInstance();
$db2=DB::getInstance();
var_dump($db1,$db2);	//object(DB)#1 (0) { } object(DB)#1 (0) { } 

各位小伙伴,看完这篇教程,我相信大家是不是有所感悟呢?

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

山河博客Code

小案例解释Javascript栈内存

大家好我是山河,今天我将写一个小案例解释Javascript栈内存,例子很简单,而且容易理解,话不多说,直接上代码解释。

<script>
	var a = 1, b = a;
	a++;
	console.log(a);
	console.log(b);
</script>

输出结果

这个例子详解

我们声明了变量 a 定义值为1,

变量b = a

然后 a 进行递增

保存运行,查看控制台

a因为递增+1,控制台输出了2

而b还是原来的1

这是为什么?

山河告诉你们答案:

JS的变量都是保存在栈内存中,值与值都是独立存在,修改一个变量不会影响其他的变量

看懂了没?是不是很简单呢,下次山河给大家再把堆内存的例子做出来给大家。

下期再见,我是山河。