MENU

JavaScript 常用代码记录

正则替换网页中的文字等<!--more-->

    <script>
    var s= document.body.innerHTML;
    s=s.replace('待替换内容(支持正则)','目标内容');
    document.body.innerHTML=s;
    </script>

为目标标签添加 class

    $('#目标id').each(function(){
      $(this).addClass('目标class')
    })

对设置和移除所有<p>元素的 "main" 类进行切换:

    $("button").click(function(){
      $("p").toggleClass("main");
    });

为目标添加 style

    document.getElementById('test').style.display = 'none';
    document.getElementsByClassName('test').style.display = 'none';
    document.getElementByTagName('p').style.display = 'none';

修改目标标签的某个属性添加参数,如下面两个

      $('#目标id').prop('class', '目标class');
    $("#目标id").attr("target","_blank");

为目标标签点击触发事件

    $("#目标id").click(function(){
    事件
    }

建站时间计时

    function show_date_time(){window.setTimeout("show_date_time()",1e3);var BirthDay=new Date("6/6/2015 18:18:00"),today=new Date,timeold=today.getTime()-BirthDay.getTime(),msPerDay=864e5,e_daysold=timeold/msPerDay,daysold=Math.floor(e_daysold),e_hrsold=24*(e_daysold-daysold),hrsold=Math.floor(e_hrsold),e_minsold=60*(e_hrsold-hrsold),minsold=Math.floor(60*(e_hrsold-hrsold)),seconds=Math.floor(60*(e_minsold-minsold));span_dt_dt.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"}
    show_date_time();

替换目标标签的内容,需要加载 jq

    $(document).ready(function(){ 
                $('.tags span').replaceWith('目标内容'); 
            }); 

当浏览器的窗口大小被改变时触发的事件 window.onresize 事件指定代码:

    window.onresize = function(){
    事件
    }

Read More

够用的ngx_pagespeed安装教程

ngx_pagespeed 是 Nginx 的一个扩展模块,主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说<!--more-->,可以省去优化css、js以及图片的过程。ngx_pagespeed对nginx自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。

ngx_pagespeed模块的主要功能如下:

图像优化:剥离元数据、动态调整,重新压缩
CSS和JavaScript压缩、合并、级联、内联
小资源内联
推迟图像和JavaScript加载
对HTML重写、压缩空格、去除注释等
提升缓存周期
这次安装教程是在Web环境基于 Oneinstack 的,系统是 CentOS7.2 64位 的。

新的系统或者是低版本的系统需要安装或升级ngx_pagespeed所需的依赖:

RedHat, CentOS, or Fedora

sudo yum install gcc-c++ pcre-devel zlib-devel make unzip

Ubuntu or Debian

sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip

如果已经安装了则需要更新依赖(要求 gcc ≥ 4.8 or clang ≥ 3.3)

官方依赖相关的说明与教材:here

因为我想求稳,所以接下来的配置所需的软件都是11月12日前的最新的稳定版。

下载各种软件
下载ngx_pagespeed

    cd /usr/local/src
    wget https://github.com/pagespeed/ngx_pagespeed/archive/latest-stable.tar.gz
    tar -xvzf latest-stable.tar.gz
    mv ngx_pagespeed-latest-stable ngx_pagespeed
    cd ngx_pagespeed
    wget https://dl.google.com/dl/page-speed/psol/1.11.33.4.tar.gz
    tar -xzvf 1.11.33.4.tar.gz && rm -rf 1.11.33.4.tar.gz
    ./scripts/pagespeed_libraries_generator.sh > /usr/local/nginx/conf/pagespeed_libraries.conf

下载nginx

    cd /usr/local/src
    wget http://nginx.org/download/nginx-1.10.2.tar.gz
    tar -xvzf nginx-1.10.2.tar.gz && rm -rf nginx-1.10.2.tar.gz

下载OpenSSL

    cd /usr/local/src
    wget https://www.openssl.org/source/openssl-1.0.2-latest.tar.gz
    tar -xzvf openssl-1.0.2-latest.tar.gz && rm -rf openssl-1.0.2-latest.tar.gz

查看latest版本号

    ls
    openssl-1.0.2j

下载PCRE

    wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.39.tar.gz
    tar -xzvf pcre-8.39.tar.gz && rm -rf pcre-8.39.tar.gz

安装ngx_pagespeed
获取configure arguments

    nginx -V
    --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=../openssl-1.0.2j --with-pcre=../pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc

重新整理所需的软件

openssl的目录位置:/usr/local/src/openssl-1.0.2j

pcre的目录位置:/usr/local/src/pcre-8.39

ngx_pagespeed的位置目录:/usr/local/src/ngx_pagespeed

整理新的configure arguments

根据获取到的configure arguments和上面软件的位置,重新整理configure arguments

然后再加上--add-module=/usr/local/src/ngx_pagespeed

整理后的结果为:

    --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2j --with-pcre=/usr/local/src/pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed

开始安装

    cd /usr/local/src/nginx-1.10.2
    ./configure --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2j --with-pcre=/usr/local/src/pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed
    make && make install

检查是否安装正常

    nginx -V
    nginx version: nginx/1.10.2
    built by gcc 4.8.5 20150623 (Red Hat 4.8.5-4) (GCC)
    built with OpenSSL 1.0.2j  26 Sep 2016
    TLS SNI support enabled
    configure arguments: --prefix=/usr/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-ipv6 --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=/usr/local/src/openssl-1.0.2j --with-pcre=/usr/local/src/pcre-8.39 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=/usr/local/src/ngx_pagespeed

        nginx -t
    nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
    nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful








Read More

不够用的ngx_pagespeed的配置教程

论如何配置使用ngx_pagespeed来加速你站点的前端资源。其中一些配置需要根据自己的站点情况进行筛选使用<!--more-->,例如你的站点的css会保持一直更新的情况下,就不要配置使用CSS的压缩、合并、级联、内联。

创建ngx_pagespeed缓存文件夹

mkdir /tmp/cache/ngx_pagespeed_cache
chown www.www /tmp/cache/ngx_pagespeed_cache

打开你站点的conf配置文件
假设我的配置文件是在 /usr/local/nginx/conf/vhost 的目录

vim /usr/local/nginx/conf/vhost/www.fangyili.pw.conf

在server {}内添加下面配置代码

# 启用ngx_pagespeed    
pagespeed on;    
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;    
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;    
# 启用JavaScript库卸载    
pagespeed EnableFilters canonicalize_javascript_libraries; #谷歌被墙,并不确定这个设置有没有副作用 
# 把多个CSS文件合并成一个CSS文件    
pagespeed EnableFilters combine_css;    
# 把多个JavaScript文件合并成一个JavaScript文件    
pagespeed EnableFilters combine_javascript;    
# 删除带默认属性的标签    
pagespeed EnableFilters elide_attributes;    
# 改善资源的可缓存性    
pagespeed EnableFilters extend_cache;    
# 更换被导入文件的@import,精简CSS文件    
pagespeed EnableFilters flatten_css_imports;    
pagespeed CssFlattenMaxBytes 5120;    
# 延时加载客户端看不见的图片    
pagespeed EnableFilters lazyload_images;    
# 启用JavaScript缩小机制    
pagespeed EnableFilters rewrite_javascript;    
# 启用图片优化机制    
pagespeed EnableFilters rewrite_images;    
# 预解析DNS查询    
pagespeed EnableFilters insert_dns_prefetch;    
# 重写CSS,首先加载渲染页面的CSS规则    
pagespeed EnableFilters prioritize_critical_css; 
# 禁止pagespeed 处理WordPress的/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
# 禁止pagespeed 处理typecho的/admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/admin/*";

location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }

优化ngx_pagespeed的配置

在pagespeed on;下添加memcached的配置(得先有memcached)

pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "localhost:11211";

重启nginx

配置完后请记得重启Nginx!

CentOS 6.x:

service nginx restart

CentOS 7.x:

systemctl restart nginx

最后结语:因为工作需要给公司其他站点用上ngx_pagespeed,所以才有了这个教程,但我拖了很久才写,可能会有错漏,欢迎补充完善。


Read More

用PPT制作的仿苹果WWDC2013广告-Designed by Apple

20140829141435843.png
这是一个苹果在WWDC2013上放的广告:领悟至繁归于至简的真理,通过流畅的线条变换<!--more-->,体现出苹果广告的老一套Designed by Apple in California。总体来说,这广告做的很不错,背景音乐也不赖。最近在网上看到有牛人用PPT就仿出了几乎以假乱真的广告,不敢相信这是用PPT做的。求来了源文件,给大家分享一下。
首先是效果视频(放不出来就刷新一下):

然后是源文件下载(百度云最近老抽,如果又抽了,留言告诉我): http://pan.baidu.com/s/1mg3G0nY 密码: 677f



Read More

PHP下载文件,包括图片、HTML等可预览文件

有时需要在网页中加一个下载按钮,但如果所下载的文件为图片、SWF、HTML等格式<!--more-->,浏览器会默认打开,而不是下载。使用下面一段代码可以为这些类型的文件创建下载。

$file = fopen("no.png","r"); 
Header("Content-type: application/octet-stream");
Header("Accept-Ranges: bytes");
Header("Accept-Length: ".filesize("no.png"));
Header("Content-Disposition: attachment; filename=" . "no.png"); 
echo fread($file,filesize("no.png"));
fclose($file); 
exit();

这个脚本执行后将会让浏览器下载根目录下“no.png”文件。
运用这段代码,为百度恶搞生成增加了一个“下载图片”的按钮。


Read More