Register

  • 点击获取
  •   

已有账号直接登录    

公告:

热门文章 浏览器/iframe 全屏、退出全屏

时间:2018-9-21 作者:RainFly   分类: Web程序设计   热度: 8917°  评论:13  
时间:2018-9-21   分类: Web程序设计    热度:8917   评论:13

外面的 html 文件 index.html:

    

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>fullScreen</title> <style> body { margin: 0; } </style> </head> <body> <iframe allowfullscreen src="iframe.html" frameborder="0" style="width: 500px;height: 500px;background:#aaa"></iframe> </body> </html>

里面嵌套的 iframe.html 文件:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body> <h1>iframe</h1> <button id="button">全屏</button> <script> // 判断是否允许全屏 var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled; // 全屏 function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); } } // 退出全屏 function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } var btn = document.querySelector('#button'); if (fullscreenEnabled) { btn.addEventListener('click', function () { var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; if (fullscreenElement) { exitFullscreen(); btn.innerHTML = '全屏'; } else { launchFullscreen(document.documentElement); btn.innerHTML = '退出全屏'; } }, false); } // 监听全屏事件 document.addEventListener('webkitfullscreenchange', function fullscreenChange() { if (document.fullscreenEnabled || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) { console.log('enter fullscreen'); } else { console.log('exit fullscreen'); } }, false); </script> </body> </html>

热门文章 单checkBox选中,和检查是否勾选事件

热门文章 如何简单的搭建PHP开发调试运行环境

时间:2018-1-25 作者:RainFly   分类: Web程序设计   热度: 10291°  评论:2  
时间:2018-1-25   分类: Web程序设计    热度:10291   评论:2

第一步:下载相应的资源

        PhpStorm2017.3.3 下载地址:http://www.oyksoft.com/soft/40722.html

        PhpStudy 下载地址: http://www.phpstudy.net

        XdebugHleper 是Google浏览器的插件,可以直接去谷歌商店里面下载

安装PhpStudy,该软件一键安装使用很方便 自动安装Windows环境下的Apache +PHP +MySQL (包括Mysql-Front、PhpMyAdmin等软件)

安装XdebugHelper插件

点击Debug会又灰色变成绿色

启动PhpStudy,点击切换版本 php-5.6.27-nts+Apache

二、配置xdebug 1.在phpstudy上打开xdebug选项

2.打开php.ini,并完成配置

简单解释一下:直接在phpstudy上勾选xdebug,会自动配置好上图中的2007-2009三行,这是xdebug的基本配置,需要我们自己配置的就是图中红框里的内容。

xdebug.remote_enable=1 # 开启远程调试 xdebug.idekey='PHPSTORM' # sessionkey xdebug.remote_port=9001 # 远程调试通信端口

idekey不要填写别的,xdebug helper给phpstorm的就这个,没得选。端口默认的是9000,这个和fastcgi端口冲突,所以就改了。xdebug其他的配置项都是默认的就行。

重启nginx,打开phpinfo确认一下配置是否正确。

三、设置phpstorm 1.打开设置对话框FIle->Settings(默认快捷键Ctrl+Alt+S)

2.配置Debug :Languages & Frameworks -> PHP -> Debug,只需要把DebugPort端口改为9001,和xdebug的配置保持一致

3.配置Server(就在Debug下面一个) :Languages & Frameworks -> PHP -> Servers,新建一台本地服务器(绿色加号),填写服务器名字以及host,确认debugger是xdebug

第四步:新建调试项目

添加本地PHP版本和之前选的PhpStudy的php版本一样

选择对应的版本 php.exe文件

目录建立在 PHPStudy目录文件夹下的 WWW中 这样方便直接进行调试!

注意将调试按钮打开!

访问homepage就会自动跳转到调试接口!

热门文章 内网映射调试详细构建过程

时间:2018-1-4 作者:RainFly   分类: Web程序设计   热度: 4960°  评论:0  
时间:2018-1-4   分类: Web程序设计    热度:4960   评论:0

首先需要用内网穿透工具 :  花生壳 .NAT123. ngrok

我使用的是ngrok   :https://www.ngrok.cc/

将Tomcat 端口配置为80 (修改server.xml 配置文件) 可以百度Google方法

重启Tomcat 后发现端口改变   127.0.0.1:80   

注册登录ngrok后,添加隧道,在本地运行ngrok 启动脚本设置好 隧道ID,然后访问隧道的域名出现正常的页面

则构建成功 可以配合Eclipse实现联合调试!

热门文章 PHP多进程编程

时间:2017-12-21 作者:RainFly   分类: Web程序设计   热度: 4643°  评论:1  
时间:2017-12-21   分类: Web程序设计    热度:4643   评论:1

首先需要安装pcntl_ 拓展 

PHP -M  查看是否存在这两个文件

测试文件 test.php

<?php header('content-type:text/html;charset=utf-8' ); // 必须加载扩展 if (!function_exists("pcntl_fork")) { die("pcntl extention is must !"); } $ppid = posix_getpid(); $pid = pcntl_fork(); printf("\n"); if ($pid == -1) { throw new Exception('fork子进程失败!'); } elseif ($pid > 0) { cli_set_process_title("我是父进程,我的进程id是{$ppid}."); //父进程名称 while (true) { echo "我是父进程 ID =".$ppid; printf("\n"); sleep(3); } } else { $cpid = posix_getpid(); cli_set_process_title("我是{$ppid}的子进程,我的进程id是{$cpid}.");//子进程名称 while (true) { echo "我是子进程 ID=".$cpid; printf("\n"); sleep(3); } } ?>

运行PHP index.php就可以看到脚本线程的效果了

热门文章 GatewayWorker(一) 数据库理解使用

时间:2017-12-15 作者:RainFly   分类: Web程序设计   热度: 9180°  评论:2  
时间:2017-12-15   分类: Web程序设计    热度:9180   评论:2

近期项目需要,研究一下GatewayWorker一款开源PHP。

使用数据库进行记录。

配置好开发环境。 http://doc2.workerman.net/326102

操作数据库 需要创建 /Config/Db.PHP 进行配置端口  

配置文件如下:

<?php namespace Config; class Db { public static $db = array( 'host' => '127.0.0.1', 'port' => 3306, 'user' => 'root', 'password' => 'root', 'dbname' => 'db', 'charset' => 'utf8', ); }

之所以在  /Config/Db.PHP 的namespace下面操作 是由于 /Lib/Db.PHP  文件中函数

public static function instance($config_name) { if (!isset(DbConfig::$$config_name)) { echo "\\Config\\Db::$config_name not set\n"; throw new Exception("\\Config\\Db::$config_name not set\n"); } if (empty(self::$instance[$config_name])) { // $config_name 实际传递过来的字符串 组成了 $db 一个变量进行赋值 $config= DbConfig::$$config_name; self::$instance[$config_name] = new DbConnection($config['host'], $config['port'], $config['user'], $config['password'], $config['dbname']); } return self::$instance[$config_name]; }

继而在Event.PHP 文件中可以访问数据库进行操作

public static function onConnect($client_id) { //通过config 连接数据库成功 $db = Db::instance('db'); //数据库插入语句 $db->query("INSERT INTO Persons VALUES ( 'admin', 'pass', 'w', 15)"); Gateway::sendToAll("$client_id login\n"); }

其中Event.PHP 需要包含 

use \GatewayWorker\Lib\Db;

热门文章 centos 6 编译nodejs环境并部署nodejs应用

时间:2017-1-3 作者:RainFly   分类: Web程序设计   热度: 10944°  评论:8  
时间:2017-1-3   分类: Web程序设计    热度:10944   评论:8

该环境安装非常简单,这里简单记录下linux(centos环境下)的源码安装,做个记录。

平台:centos 6 环境:python 2.6 环境安装包地址:http://nodejs.cn/download/  可以这里下载源码编译。

安装步骤:

1,安装编译代码的开发工具

yum -y groupinstall "Development Tools"

2,下载安装包。 到node官网下载,这里下载源码编译最新安装包:https://nodejs.org/dist/v6.2.0/node-v6.2.0.tar.gz 进入/usr/local/src

wget https://nodejs.org/dist/v6.2.0/node-v6.2.0.tar.gz tar zxvf node-v6.2.0.tar.gz cd node-v6.2.0 ./configure make make install

3,安装模块express和forever。

现在已经安装了Node.js, 准备部署应用程序, 首先要使用Node.js的模块管理器npm安装Express middleware 和forever:

npm -g install express forever

4,建立超级链接。

ln -s /usr/local/bin/node /usr/bin/node ln -s /usr/local/lib/node /usr/lib/node ln -s /usr/local/bin/npm /usr/bin/npm ln -s /usr/local/bin/node-waf /usr/bin/node-waf ln -s /usr/local/bin/forever /usr/bin/forever

运行node -v可以看到版本说明没问题。

5,部署应用程序。 比如:

forever start app.js &

这样扔到后台运行,端口默认1337. 查看运行当中的应用:

forever list

退出应用:

forever stop 0

热门文章 利用Wireshark分析TCP/IP协议三次握手

时间:2016-8-25 作者:RainFly   分类: Web程序设计   热度: 11379°  评论:3  
时间:2016-8-25   分类: Web程序设计    热度:11379   评论:3

        关于wireshark做APP或者网站开发应该不会不熟悉,关于这类查看网络数据封包的工具有很多 Charles ,sniffer ,network monitor, Fiddler等等,当然有的需要收费,这款软件是免费使用的基于WinPcap的网络嗅探工具,当你看到真正的计算机网络协议包,会发现对此了解会网络协议层更加深刻理解。

我所使用的是经过汉化的wireshak喜欢的朋友可以在下方下载,其中包含了使用手册。

开始抓包

wireshark是捕获机器上的某一块网卡的网络包,当你的机器上有多块网卡的时候,你需要选择一个网卡。 点击Caputre->Interfaces.. 出现下面对话框,选择正确的网卡。然后点击"Start"按钮, 开始抓包

WireShark 主要分为这几个界面

1. Display Filter(显示过滤器),  用于过滤

2. Packet List Pane(封包列表), 显示捕获到的封包, 有源地址和目标地址,端口号。 颜色不同,代表

3. Packet Details Pane(封包详细信息), 显示封包中的字段

4. Dissector Pane(16进制数据)

5. Miscellanous(地址栏,杂项)

 

使用过滤是非常重要的, 初学者使用wireshark时,将会得到大量的冗余信息,在几千甚至几万条记录中,以至于很难找到自己需要的部分。搞得晕头转向。 过滤器会帮助我们在大量的数据中迅速找到我们需要的信息。 过滤器有两种, 一种是显示过滤器,就是主界面上那个,用来在捕获的记录中找到所需要的记录 一种是捕获过滤器,用来过滤捕获的封包,以免捕获太多的记录。 在Capture -> Capture Filters 中设置

在Filter栏上,填好Filter的表达式后,点击Save按钮, 取个名字。比如"Filter 102",

 

Filter栏上就多了个"Filter 102" 的按钮。 

表达式规则  1. 协议过滤 比如TCP,只显示TCP协议。 2. IP 过滤 比如 ip.src ==192.168.1.102 显示源地址为192.168.1.102, ip.dst==192.168.1.102, 目标地址为192.168.1.102 3. 端口过滤 tcp.port ==80,  端口为80的 tcp.srcport == 80,  只显示TCP协议的愿端口为80的。 4. Http模式过滤 http.request.method=="GET",   只显示HTTP GET方法的。 5. 逻辑运算符为 AND/ OR 常用的过滤表达式 过滤表达式 用途 http 只查看HTTP协议的记录 ip.src ==192.168.1.102 or ip.dst==192.168.1.102 源地址或者目标地址是192.168.1.102    

封包列表(Packet List Pane) 封包列表的面板中显示,编号,时间戳,源地址,目标地址,协议,长度,以及封包信息。 你可以看到不同的协议用了不同的颜色显示。 你也可以修改这些显示颜色的规则,  View ->Coloring Rules.

封包详细信息 (Packet Details Pane) 这个面板是我们最重要的,用来查看协议中的每一个字段。 各行信息分别为 Frame:   物理层的数据帧概况 Ethernet II: 数据链路层以太网帧头部信息 Internet Protocol Version 4: 互联网层IP包头部信息 Transmission Control Protocol:  传输层T的数据段头部信息,此处是TCP Hypertext Transfer Protocol:  应用层的信息,此处是HTTP协议

wireshark与对应的OSI七层模型

TCP包的具体内容  从下图可以看到wireshark捕获到的TCP包中的每个字段。

实例分析TCP三次握手过程 看到这, 基本上对wireshak有了初步了解, 现在我们看一个TCP三次握手的实例    三次握手过程为

这图我都看过很多遍了, 这次我们用wireshark实际分析下三次握手的过程。 打开wireshark, 打开浏览器输入 http://www.cnblogs.com/tankxiao 在wireshark中输入http过滤, 然后选中GET /tankxiao HTTP/1.1的那条记录,右键然后点击"Follow TCP Stream", 这样做的目的是为了得到与浏览器打开网站相关的数据包,将得到如下图

图中可以看到wireshark截获到了三次握手的三个数据包。第四个包才是HTTP的, 这说明HTTP的确是使用TCP建立连接的。   第一次握手数据包 客户端发送一个TCP,标志位为SYN,序列号为0, 代表客户端请求建立连接。 如下图

第二次握手的数据包 服务器发回确认包, 标志位为 SYN,ACK. 将确认序号(Acknowledgement Number)设置为客户的I S N加1以.即0+1=1, 如下图  

第三次握手的数据包 客户端再次发送确认包(ACK) SYN标志位为0,ACK标志位为1.并且把服务器发来ACK的序号字段+1,放在确定字段中发送给对方.并且在数据段放写ISN的+1, 如下图:

 就这样通过了TCP三次握手,建立了连接

本文转自:http://www.cnblogs.com/TankXiao/archive/2012/10/10/2711777.html

Wireshark安装包+使用教程来源:百度云网盘  | 大小:22MB  | 提取密码:um1w | 解压密码:www.rainfly.cn 已经过安全软件检测无毒,请您放心下载。          若链接失效可联系管理员!

热门文章 ECS云主机Ubuntu14.04搭建Apache2+PHP5+MySQL环境

时间:2016-8-19 作者:RainFly   分类: Web程序设计   热度: 6874°  评论:1  
时间:2016-8-19   分类: Web程序设计    热度:6874   评论:1

摘要:所谓好记性不如烂笔头,笔者记忆力太差,虽然对linux也很熟悉,接触了三年多了,但是总是会丢三落四,以前买过的云主机都是用Windows2008,IIS配置PHP MySQL极为方便,也尝试安装了SSL证书,折腾了HTTPS ,但即便是图形界面,步骤却忘记了,所以此次配置全程记录,留已备用。

安装步骤

1.更新软件源

apt-get  update

2.安装Apache2 服务器

apt-get  install apache2    

    校验Apache2 是否正常安装

    使用apache -v 查看是否正常安装

root@iZ286x0azp7Z:~# apache2 -v Server version: Apache/2.4.7 (Ubuntu) Server built: Jul 28 2016 20:50:32

查看端口是否正常开启

root@iZ286x0azp7Z: netstat -aunpt | grep LISTEN tcp 0 0 0.0.0.0:80 0.0.0.0:* LISTEN 2952/apache2 tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN 733/sshd

如果没用选择好配置文件    apt-get 安装 httpd.conf 默认是空没有的

root@iZ286x0azp7Z:/etc/apache2# vi /etc/apache2/apache2.conf 

加上ServerName localhost:80

然后重新启动

/etc/init.d/apache2  start

   在公网输入IP地址查看Apache是否显示下画面

( 由于是apt-get的简易安装 所以web root 直接给你定在了/var/www/html/ 下面这是index.html)

3.安装PHP5

apt-get install php5

用 php5 -v 查看输出结果如下

root@iZ286x0azp7Z:~# php5 -v PHP 5.5.9-1ubuntu4.19 (cli) (built: Jul 28 2016 19:26:04) Copyright (c) 1997-2014 The PHP Group Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies with Zend OPcache v7.0.3, Copyright (c) 1999-2014, by Zend Technologies

sudo apt-get install php5-curl    如果函数curl_init(); 不存在

4.查看Apache是否已经加载libphp5.so模块,该模块是Apache用来指挥PHP解析器来执行PHP代码的模块 cat /etc/apache2/mods-enabled/php5.load

root@iZ286x0azp7Z:~# cat /etc/apache2/mods-enabled/php5.load LoadModule php5_module /usr/lib/apache2/modules/libphp5.so

表示该模块已经加载了

5.安装MySQL数据库

由于我用的secureCRT中间会出现乱码,其实是设置问题,选项->会话选项->外观->字符编码 后面修改为UTF-8 即可

中间会弹提示输入密码,这是账号root的MySQL数据库管理员密码,输入两次即可。

apt-get install mysql-server          

6.检查是否加载了mysql.so的扩展,PHP通过该扩展链接mysql执行CURD操作,

root@iZ286x0azp7Z:~# cat /etc/php5/mods-available/mysql.ini cat: /etc/php5/mods-available/mysql.ini: No such file or directory

输入以上命令查看发现 No such file or directory 表示PHP默认没有安装该操作数据库的扩展,需要自行安装

7.安装操作数据库拓展(如果第六步成功可以跳过了)

apt-get install php5-mysql

root@iZ286x0azp7Z:~# apt-get install php5-mysql Reading package lists... Done Building dependency tree Reading state information... Done E: Unable to locate package php5-mysql

如何出现以上问题,表明需要重新更新一下源 apt-get update    在重新 apt-get install php5-mysql   

root@iZ286x0azp7Z:~# cat /etc/php5/mods-available/mysql.ini ; configuration for php MySQL module ; priority=20

  表示mysql.so扩展已经安装成功。

8.重启mysql和Apache

root@iZ286x0azp7Z:~#  /etc/init.d/mysql restart root@iZ286x0azp7Z:~#   /etc/init.d/apache2 restart 

 中间问题   

 当中断输入  mysql -u   root -p  命令提示错误解决办法

ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

#1.停止mysql数据库 /etc/init.d/mysql stop  #2.执行如下命令 mysqld_safe --user=mysql --skip-grant-tables --skip-networking &  #3.使用root登录mysql数据库 mysql -u root mysql  #4.更新root密码 mysql> UPDATE user SET Password=PASSWORD('newpassword') where USER='root'; #5.刷新权限  mysql> FLUSH PRIVILEGES;  #6.退出mysql mysql> quit  #7.重启mysql /etc/init.d/mysql restart  #8.使用root用户重新登录mysql mysql -u   root -p  Enter password: <输入新设的密码newpassword>

MySQL数据库操作命令http://www.rainfly.cn/?post=161

9.给php安装常用扩展

apt-get install php5-gd curl libcurl3 libcurl3-dev php5-curl

10.安装完成之后,重启Apache

/etc/init.d/apache2 restart

配置多虚拟主机(这里是将www/目录下放置多个web站点,占未测试 )

1.创建虚拟目录

现在需要安装虚拟主机,我添加一台虚拟主机命名为rainfly

首先,让我们为rainfly这个站点创建一个目录:    mkdir -p /var/www/rainfly/public_html

2.设置所有者和权限 上面目录现在只有root拥有权限。我们需要修改这2个目录的拥有权给普通用户,而不仅仅是root用户。 chown -R $USER:$USER /var/www/rainfly/public_html/

“$USER”变量指向了当前的登录用户。  设置读写权限给apache网页根目录(/var/www)及其子目录,这样每个人都可以从目录中读取文件。 chmod -R 755 /var/www/ 这样,我们就创建好了一些文件夹来保存网络相关数据并分配必要的权限和所属用户。

3.为虚拟主机创建示例页面

现在,我们给网站增加示例页。第一步,让我们给虚拟主机rainfly创建一个示例页。 给rainfly虚拟主机创建一个示例页, vi /var/www/rainfly/public_html/index.html 添加以下内容: <html><head><title>www.rainfly</title></head><body><h1>Welcome To rainfly website</h1></body></html> 保存并关闭文件。

4.创建虚拟主机配置文件

默认情况下,apache有一个默认的虚拟主机文件叫000-default.conf。我们将会复制000-default.conf文件内容到我们新的虚拟主机配置文件中。

cp /etc/apache2/sites-available/000-default.conf  /etc/apache2/sites-available/rainfly.conf   

确保虚拟主机配置文件末尾包含.conf扩展名。

现在,修改rainfly.conf   文件以符合需求。

vi /etc/apache2/sites-available/rainfly.conf

使相关的变化直接呈现在rainfly站点中(译注:以“#”开头的注释行可以忽略。)。

<VirtualHost *:80># The ServerName directive sets the request scheme, hostname and port that# the server uses to identify itself. This is used when creating# redirection URLs. In the context of virtual hosts, the ServerName# specifies what hostname must appear in the request's Host: header to# match this virtual host. For the default virtual host (this file) this# value is not decisive as it is used as a last resort host regardless.# However, you must set it for any further virtual host explicitly.#ServerName www.example.comServerAdmin webmaster@rainflyServerName rainflyServerAlias www.rainflyDocumentRoot /var/www/rainfly/public_html# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,# error, crit, alert, emerg.# It is also possible to configure the loglevel for particular# modules, e.g.#LogLevel info ssl:warnErrorLog ${APACHE_LOG_DIR}/error.logCustomLog ${APACHE_LOG_DIR}/access.log combined# For most configuration files from conf-available/, which are# enabled or disabled at a global level, it is possible to# include a line for only one particular virtual host. For example the# following line enables the CGI configuration for this host only# after it has been globally disabled with "a2disconf".#Include conf-available/serve-cgi-bin.conf</VirtualHost>

修改虚拟主机文件后,禁用默认的虚拟主机配置(000.default.conf),然后启用新的虚拟主机配置,如下所示。

sudo a2dissite 000-default.conf

sudo a2ensite rainfly.conf

sudo a2ensite unixmen2.local.conf  (已经使root用户不用sudo)

最后,重启apache服务器。  /etc/init.d/apache2 restart 就是这样。现在,我们成功地配置了apach虚拟主机在我们的Ubuntu服务器上

参考文献:http://httpd.apache.org/docs/2.4/

热门文章 通过PHP、JavaScript、判断是否为手机浏览器

时间:2016-8-16 作者:RainFly   分类: Web程序设计   热度: 9690°  评论:2  
时间:2016-8-16   分类: Web程序设计    热度:9690   评论:2

   总结一下,做个笔记。判断访问浏览器是电脑还是手机的判断方法。 一个是服务器执行语言,一个是浏览器运行语言

   PHP

     方法一

/** * * 根据php的$_SERVER['HTTP_USER_AGENT'] 中各种浏览器访问时所包含各个浏览器特定的字符串来判断是属于PC还是移动端 * @author discuz3x * @lastmodify 2014-04-09 * @return BOOL */ function checkmobile() { global $_G; $mobile = array(); //各个触控浏览器中$_SERVER['HTTP_USER_AGENT']所包含的字符串数组 static $touchbrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini', 'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung', 'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser', 'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource', 'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone', 'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop', 'benq', 'haier', '^lct', '320x320', '240x320', '176x220'); //window手机浏览器数组【猜的】 static $mobilebrowser_list =array('windows phone'); //wap浏览器中$_SERVER['HTTP_USER_AGENT']所包含的字符串数组 static $wmlbrowser_list = array('cect', 'compal', 'ctl', 'lg', 'nec', 'tcl', 'alcatel', 'ericsson', 'bird', 'daxian', 'dbtel', 'eastcom', 'pantech', 'dopod', 'philips', 'haier', 'konka', 'kejian', 'lenovo', 'benq', 'mot', 'soutec', 'nokia', 'sagem', 'sgh', 'sed', 'capitel', 'panasonic', 'sonyericsson', 'sharp', 'amoi', 'panda', 'zte'); $pad_list = array('pad', 'gt-p1000'); $useragent = strtolower($_SERVER['HTTP_USER_AGENT']); if(dstrpos($useragent, $pad_list)) { return false; } if(($v = dstrpos($useragent, $mobilebrowser_list, true))){ $_G['mobile'] = $v; return '1'; } if(($v = dstrpos($useragent, $touchbrowser_list, true))){ $_G['mobile'] = $v; return '2'; } if(($v = dstrpos($useragent, $wmlbrowser_list))) { $_G['mobile'] = $v; return '3'; //wml版 } $brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop'); if(dstrpos($useragent, $brower)) return false; $_G['mobile'] = 'unknown'; //对于未知类型的浏览器,通过$_GET['mobile']参数来决定是否是手机浏览器 if(isset($_G['mobiletpl'][$_GET['mobile']])) { return true; } else { return false; } } /** * 判断$arr中元素字符串是否有出现在$string中 * @param $string $_SERVER['HTTP_USER_AGENT'] * @param $arr 各中浏览器$_SERVER['HTTP_USER_AGENT']中必定会包含的字符串 * @param $returnvalue 返回浏览器名称还是返回布尔值,true为返回浏览器名称,false为返回布尔值【默认】 * @author discuz3x * @lastmodify 2014-04-09 */ function dstrpos($string, $arr, $returnvalue = false) { if(empty($string)) return false; foreach((array)$arr as $v) { if(strpos($string, $v) !== false) { $return = $returnvalue ? $v : true; return $return; } } return false; } 方法二

     <?php function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) { return true; } // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息 if (isset ($_SERVER['HTTP_VIA'])) { // 找不到为flase,否则为true return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false; } // 脑残法,判断手机发送的客户端标志,兼容性有待提高 if (isset ($_SERVER['HTTP_USER_AGENT'])) { $clientkeywords = array ('nokia', 'sony', 'ericsson', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-', 'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile' ); // 从HTTP_USER_AGENT中查找手机浏览器的关键字 if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))) { return true; } } // 协议法,因为有可能不准确,放到最后判断 if (isset ($_SERVER['HTTP_ACCEPT'])) { // 如果只支持wml并且不支持html那一定是移动设备 // 如果支持wml和html但是wml在html之前则是移动设备 if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) { return true; } } return false; } ?> JavaScript

    if (navigator['userAgent']['match'](/(iPhone|iPod|Android|ios|Nokia|Black Berry|MIDP|Phone)/i)) { //是手机浏览器 } else{ //是电脑浏览器 }

热门文章 分享CSS常用图标库

时间:2016-8-12 作者:RainFly   分类: Web程序设计   热度: 14175°  评论:4  
时间:2016-8-12   分类: Web程序设计    热度:14175   评论:4

    图标在web前端设计和app开发中作为可视化一个重要元素,部分网站为了使图片性质标志很难自适应,而且重复项目重复量多,现在提供两个常用的纯CSS图标库,只需要引用一样样式文本,就可以在任意轻松使用

1.Font Awesome一个支持可缩放的矢量图标

  官网详情:http://fontawesome.dashgame.com/

  该字库含有585个图标基本上都能满足需要。

  head 部位加上应用css样式路径,

<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

   Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用 <i> ,因为它更简洁。 但实际上使用 <span>

所以在需要插入的图标的地方加上 

<i class="fa fa-camera-retro"></i> fa-camera-retro

  使用i标签很简洁明了。由于是文本类型的图标,所以修改了容器文字样式图标也会随之变化的。所以修改图标样式你可以直接用容器来修改,也可以使用官网提供的一些class来,调整大小颜色阴影。需要可以去看看。

2.icono

官网详情:http://saeedalipoor.github.io/icono/ 

同上面的图标使用方法一样,仅仅只需要一个标签就可以实现纯css3的图标

使用方法:

 head嵌入

    

<link rel="stylesheet" href="icono.min.css">

需要使用的地方直接插入标签即可

<i class="icono-mail"></i> <div class="icono-mail"></div> <span class="icono-mail"></span> <whatever class="icono-mail"></whatever>

返回顶部    首页    捐赠支持    手气不错    友情链接    关于我们    站长工具    站长介绍    手机版本    后台登陆   
版权所有:雨夜轩    站长:RainFly    特别鸣谢   文章归档   皖ICP备15003600号-1   百度统计
Copyright©2015雨夜轩 Powered by emlog强力驱动 七牛CDN全球加速 360站长联盟安全认证 中国博客联盟荣誉成员 可信赖网站 谷歌地图   百度地图   
页面加载耗时:0.084秒 数据库查询次数:59次
背景设置
$