我想网 » Source-code

get URL Params －JavaScript实现获取URL参数

seasun — Tue, 14 Dec 2010 05:33:58 +0000

var Url = location.href;
Url = Url.replace(/.*\?(.*?)/,”$1″);
Variables = Url.split (“&”);
for (i = 0; i < Variables.length; i++) {
Separ = Variables[i].split(“=”);
eval (‘var ‘+Separ[0]+’=”‘+Separ[1]+’”‘);
}
function getURLParam(strParamName){
var strReturn = “”;
var strHref = window.location.href;
if ( strHref.indexOf(“?”) > -1 ){
var strQueryString = strHref.substr(strHref.indexOf(“?”)).toLowerCase();
var aQueryString = strQueryString.split(“&”);
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].indexOf(strParamName + “=”) > -1 ){
var aParam = aQueryString[iParam].split(“=”);
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}

Feed enhanced by Better Feed from Ozh

使用PHP自动生成密码的源代码

seasun — Thu, 09 Dec 2010 14:45:33 +0000

使用PHP自动生成密码

In this tutorial I will show you how to generate random passwords that are highly secure and extremely difficult to crack. However you can choose between various complexity/strength and you can set password length as well.

Step 1.

Let’s go through what we need to generate passwords. First we need a list of words and/or characters what we can use for password generation. I don’t offer using word lists as it is easier to guess and password recovery tools are using such lists as well. So I will focus only on character lists.

The idea is to create a string from the characters and than in a loop we select an item from this string (character list) one by one until we reach the requested length. To realize this we will implement a function with 2 parameters. The first is the length of the requested password and the second is the strength/complexity of the password.

Step 2.

The function use case looks like this:

Initializing the PHP random generator using the actual time value.
Define 3 various strings for the various password complexity.
Reset the password and length counter variables
Create a loop until the requested length and append a random character one by one to the password string.
In the loop I made one more check to make all character different in the generated password.
Return with the ready password.

It is quite simple and you can generate really strong passwords with it.

The complete code looks like this:

function generatePassword($length=6,$level=2){

list($usec, $sec) = explode(‘ ’, microtime());
srand((float) $sec + ((float) $usec * 100000));

$validchars[1] = ”0123456789abcdfghjkmnpqrstvwxyz”;
$validchars[2] = ”0123456789abcdfghjkmnpqrstvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ”;
$validchars[3] = ”0123456789_!@#$%&*()-=+/abcdfghjkmnpqrstvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_!@#$%&*()-=+/”;

$password = ”";
$counter = 0;

while ($counter < $length) {
$actChar = substr($validchars[$level], rand(0, strlen($validchars[$level])-1), 1);

// All character must be different
if (!strstr($password, $actChar)) {
$password .= $actChar;
$counter++;
}
}

return $password;

}
?>

Step 3.

To make the script more usable let’s create an html page where the visitor can set the requested length and strength of the password. To do this we will create a simple form with 2 drop down box where the visitor can select the password properties. In this example I set the length list from 5 to 10 and the strength to Easy, Normal, and Hard. When the visitor submits the form it will call itself and in this phase not only shows the form again but processes the submitted values and generates the requested password and shows it for the user.

The HTML code is quite simple:

” method=”post”>

Password length:	5 6 7 8 9 10
Password strength:	Easy Normal Hard

if (isset($_POST['submitBtn'])){
echo ’

Generated password:

’;
echo generatePassword($length,$strength);
echo ’

’;
}
?>

Step 4.

Final words:
As you can see generating a random password is not so complex task. You can integrate this script into your registration process to generate a password for the user.

The complete script is the following:

function generatePassword($length=6,$level=2){

list($usec, $sec) = explode(‘ ’, microtime());
srand((float) $sec + ((float) $usec * 100000));

$password = ”";
$counter = 0;

while ($counter < $length) {
$actChar = substr($validchars[$level], rand(0, strlen($validchars[$level])-1), 1);

// All character must be different
if (!strstr($password, $actChar)) {
$password .= $actChar;
$counter++;
}
}

return $password;

}

” method=”post”>

Password length:	5 6 7 8 9 10
Password strength:	Easy Normal Hard

if (isset($_POST['submitBtn'])){
echo ’

Generated password:

’;
echo generatePassword($length,$strength);
echo ’

’;
}
?>

Feed enhanced by Better Feed from Ozh

javascript简单实现checkbox的全选与反选

seasun — Wed, 24 Nov 2010 15:06:52 +0000

作者：断桥残雪

今天上网遇到有个网友在论坛问input的checkbox全选和反选的问题，顺手总结了一下，然后写了个简单的jQuery checkbox全选反选插件，希望对大家有用。
如果是简单的实现checkbox的全选与反选可以使用下面的函数：

 function checkall(obj,cName)
 {
     var checkboxs = document.getElementsByName(cName);
     for(var i=checkboxs.length;i--;){
             checkboxs[i].checked = obj.checked;
     }
 }
//使用方法:给全选的按钮加onclick事件：onclick="checkall(this,'all[]');"

下面的jQuery checkbox插件是在网上找的：

$.fn.checkbox = function(){
    var t = this;
    /*
     * 切换全选/反选
     * @example $("#checkAll").checkbox().toggle($("input[name='selectAll']"));
     */
    this.toggle = function(el){
        $(el).click(function(){
            $(t).attr('checked', false);
        });
        $(this).click(function(){
            $(el).attr('checked', $(this).attr('checked') == true ? true : false);
        });
    };
    /*
     * 全选
     */
    this.check = function(el){
        $(el).attr('checked', true);
    };
    /*
     * 反选
     */
    this.uncheck = function(el){
        $(el).attr('checked', false);
    };
    return t;
};

Feed enhanced by Better Feed from Ozh

WordPress：timestamp 函数的时差(timezone)问题

seasun — Sun, 21 Nov 2010 14:44:06 +0000

最早发现这个时差问题是在我们首页添加24小时内热文(显示浏览最多十篇文章)后发现的，平时每天更新20-30篇，即使扣除8小时影响也不大，但在某个周末的最近24小时文章刚好够10篇时，它只显示几篇给我，当时就诧异了。当时没想过根源是 timestamp 函数，只是想简单 hack 一下就好，将 wp-postviews 插件里 get_timespan_most_viewed 函数中的

$limit_date = current_time(’timestamp’) – ($days*86400);

改为

$limit_date = current_time(’timestamp’) – ($days*86400) – 28800;

// 8小时就是 8×60×60=28800秒

所以今天在把我们首页第一篇文章的时间显示方式改为 xxx mins ago 时，8小时时差又出现了，于是毫不犹豫的暴力 hack 了，同样是把

php echo human_time_diff(get_the_time(’U’), current_time(’timestamp’)) . ‘ ago’; ?>

改成

当然我这样指标不治本，有兴趣折腾的同学可以直接到 wp-includes/formatting.php 里修改 human_time_diff。就解决 human_time_diff 函数的 timezone 问题而言，我这个方法简单有效(网上N多老外哭求这个时差问题都没有答案，哈哈哈)，但究其根源还是要解决 timestamp 函数的时差问题。

参考这里，有三种解决方案，其中比较简洁的一个是，在 wp-includes/functions.php 第66行

case ‘timestamp’:
return ( $gmt ) ? time() : time() + ( get_option( ‘gmt_offset’ ) * 3600 );
break;

下面添加

case ‘timestampgmt’:
return ( $gmt ) ? strtotime(gmdate(”Y-m-d H:i:s”)) : strtotime(gmdate(”Y-m-d H:i:s”)) + ( get_option( ‘gmt_offset’ ) * 3600 );
break;

然后再要用 timestamp 改用 timestampgmt 就好了。

# 注：请自行以上代码中的将全角引号改为半角

Feed enhanced by Better Feed from Ozh

根据url提取网站域名的方法小结

seasun — Sun, 17 Oct 2010 12:32:03 +0000

前言：最近使用到了他人总结的一个基础类库。查看了下源码，发现String帮助类的一个辅助方法不是很严谨，重构之。

1、原来程序的写法

      public static string GetDomainName(string url)
        {
            Regex reg = new Regex(@"http(s)?://([\w-]+\.)+[\w-]+/?");
            string result = reg.Match(url, 0).Value;
            if (result.IndexOf("http://") > -1)
            {
                result = result.Replace("http://", string.Empty);
            }
            else if (result.IndexOf("https://") > -1)
            {
                result = result.Replace("https://", string.Empty);
            }
            return result.Replace("/", string.Empty);
        }

2、改进方案

上面的写法，我认为不严谨的地方有两处：a、没有区分部分字符串的大小写（虽然通常传入的url都是小写http(s)开头的，使用起来问题不大）；b、参数没有考虑为null的情况。下面给出我的几种解决方法，个人认为相对而言比较简洁严谨一些。

（1）正则改进

按照原来代码的写法，正则表达式是先提取出形如 http://www.iwanna.cn/ 的形式的字符串，然后再处理字符串。字符串替换和hard coding看起来会比较多，而且，毫无疑问，上面代码中的正则提取的字符串稍显冗余。我的改进如下：

   public static string GetDomainName(string url)
        {
            if (url == null)
            {
                throw new Exception("输入的url为空");
            }
            Regex reg = new Regex(@"(?<=[://])([\w-]+\.)+[\w-]+/?", RegexOptions.IgnoreCase);
            return reg.Match(url, 0).Value.Replace("/", string.Empty);
        }

应该说这是比较忠实于源代码的一种实现。
【UPDATE】：根据文章后面布袋和尚说不得大师的指点，再改进一下正则表达式，这样对于正常的 url路径或其他类型的路径都可以进行验证匹配了。代码如下：

   public static string GetDomainName(string url)
        {
            if (url == null)
            {
                throw new Exception("输入的url为空");
            }
            Regex reg = new Regex(@"(?<=://)([\w-]+\.)+[\w-]+(?<=/?)");
            return reg.Match(url, 0).Value.Replace("/", string.Empty);
        }

（2）直接拼接字符串

拼接字符串在实际开发中可以做很多事情，简单的域名提取自然不在话下。我们分析一下输入的url，发现很显著也很重要的一个特征就是通过斜线（/）来分割字符串，每一个分隔后的字符串分别表示不同的属性，如对应的协议名称，域名，站点名，页面名称等等。具体分割拼接提取的方法如下：

     public static string GetDomainName(string url)
        {
             if (url == null)
            {
                throw new Exception("输入的url为空");
            }
            string result = string.Empty;
            string[] strArr = url.Split(new char[] { '/' }, StringSplitOptions.RemoveEmptyEntries);
            foreach (string item in strArr)
            {
                if (string.Compare("http:", item.ToLower()) == 0)
                {
                    continue;
                }
                else if (string.Compare("https:", item.ToLower()) == 0)
                {
                    continue;
                }
                result = item;
                break;
            }
            return result;
        }

严格来说，这个是比较“笨”的方法，但是通俗易懂。

（3）通过一个HttpRequest对象获取它的Url的Host

平时我们都是通过HttpRequest对象获取它的Url的Host来获取网站域名，现在只有一个字符串参数url，很显然，我们会想到构造一个HttpRequest对象，然后按步就班即可。具体方法如下：

        public static string GetDomainName(string url)
        {
            string result = null;
            try
            {
                HttpRequest request = new HttpRequest(string.Empty, url, string.Empty);
                result = request.Url.Host;
            }
            catch (Exception ex)
            {
                throw new Exception(string.Format("当前输入的URL:{0},发生异常：{1}", url, ex.Message));
            }
            return result;
        }

这个应该算是另辟蹊径的一种解决方案，可是必需要引用System.Web dll，作为基础类库，应该越少引用越好。

结语：到这里，根据url提取host的常规方法基本重构完成，没有过分考虑效率和性能，不知哪种会更快一点。期待您更好的方法和意见。

Feed enhanced by Better Feed from Ozh

JavaScript 全角转半角技术

seasun — Sun, 17 Oct 2010 12:27:10 +0000

Feed enhanced by Better Feed from Ozh

jQuery教程之鼠标事件篇

seasun — Sun, 03 Oct 2010 13:22:41 +0000

jQuery除了选择器之外，还封装了很多事件的处理，比如鼠标事件，所谓的鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键而触发的事件，jQuery中封装了几乎所有的鼠标事件，包括点击，双击，移出，移入等鼠标事件，下面断桥残雪简单的介绍下jQuery的鼠标事件

jQuery的click事件

经典鼠标click的实例：

$("sel").click(function(){
    alert('哈哈 !');
});

jQuery的dbclick事件

一般dbclick事件的同时也会触发两次click事件。。以前我写过一篇博客简单的介绍了下jQuery的鼠标双击事件

$('p').dbclick(function(){
alert('鼠标双击!');
});
$('p').click(function(){
alert('点击了一下!');
});//大家看看结果是怎么样的？

jQuery的mousedown事件

mousedown就是在按下鼠标时触发的事件
$(’p’).mousedown(function(){
alert(’按下了鼠标 !’);
});

jQuery的mouseup事件

同上就是松开鼠标时候触发的事件,如果在于按下鼠标的相同元素上松开,那么也会触发click事件,mousedown和mouseup事件一般有在div拖拽等效果中

$('p').mouseup(function(){
alert('鼠标起来了 !');
}).click(function(){
alert('点击了下鼠标!');
});

jQuery的mouseover事件

mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性

jQuery的mouseout事件

mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。

jQuery的mouseenter事件

和mouseover事件类似,但两者有区别

jQuery的mouserleaver事件

同上和mouseout事件类似.

hover事件

其实hover事件内部就是使用了mouseenter和mouseleaver事件,我们可以使用jQuery的hover这个函数来代替上面的两个函数

$('p').hover(function(){
alert('这个function里放mouseenter 的事件!');
},function(){
alert('这里是mouseleaver function!');
});

这里我们没有鼠标右键事件?其实使用jQuery的mousedown事件然后再函数里判断就OK了

Feed enhanced by Better Feed from Ozh

JavaScript–Apple设备检测代码

seasun — Sun, 26 Sep 2010 16:47:56 +0000

这里提供一些javascript检测代码，用于检测iPhone、iPod、iPad设备。

// Apple detection object

var Apple = {};

Apple.UA = navigator.userAgent;

Apple.Device = false;

Apple.Types = ["iPhone", "iPod", "iPad"];

for (var d = 0; d < Apple.Types.length; d++) {

var t = Apple.Types[d];

Apple[t] = !!Apple.UA.match(new RegExp(t, “i”));

Apple.Device = Apple.Device || Apple[t];

}

// is this an Apple device?

alert(

“Apple device? ” + Apple.Device +

“\niPhone? ” + Apple.iPhone +

“\niPod? ” + Apple.iPod +

“\niPad? ” + Apple.iPad

);

也可以使用类似的PHP代码在服务器端检测，具体方法可以查看How to Identify an Apple iPhone, iPod or iPad Visitor to Your Website。

Feed enhanced by Better Feed from Ozh

利用PHP为大图片生成缩略图代码实现

seasun — Sun, 12 Sep 2010 14:52:08 +0000

php /** * 生成缩略图 * * @param string $imagePath 图片路径 * @param string $thumb 生成缩略图名称 * @param integer $width 生成缩略图最大宽度 * @param integer $height 生成缩略图最大高度 * * @author Silver * @link http://www.zdyi.com */ function resizeImage($imagePath, $thumb, $width = 200, $height = 200) { list($imageWidth, $imageHeight) = getimagesize($imagePath); $imagePath = imagecreatefromjpeg($imagePath); if ($width && ($imageWidth < $imageHeight)) { $width = ($height / $imageHeight) * $imageWidth; } else { $height = ($width / $imageWidth) * $imageHeight; } $image = imagecreatetruecolor($width, $height); imagecopyresampled($image, $imagePath, 0, 0, 0, 0, $width, $height, $imageWidth, $imageHeight); imagepng($image, $thumb); imagedestroy($image); } resizeImage('test.jpg', 'test_thumb.jpg'); ?>

Feed enhanced by Better Feed from Ozh

解决IE6不支持max-height的bug

seasun — Sun, 12 Sep 2010 14:46:22 +0000

罪恶的IE6不支持max-height属性，不过我们可以通过jQuery来解决IE6不支持max- height，jQuery的代码如下：

$(".entry").each(function(){
    if($(this)[0].scrollHeight>500)
     $(this).css({"height":"500px"});
});

原理: 在IE6中可以通过设定height来达到max-height的效果. 循环所有要加max-height属性的DOM元素,判断他的scrollHeight大于你要设置的最大高度如果超过了就通过设置height为最大高度，我这里使用的是[0]，获取的是的DOM对象，而不是jQuery对象，详细说明见：《jQuery选择器使用详解》

上面的代码还没有加入IE6的判断,完整代码如下:

if($.browser.msie&&($.browser.version === "6.0")){
$(".entry").each(function(){
if($(this)[0].scrollHeight>500)
$(this).css({"height":"500px","overflow":"hidden"});
});}

当然你也可以通过css表达式来实现IE6支持max-height属性

.entry{
//我烧验证woshao_985140e4b71711df9e5e000c295b2b8d
height: expression( this.scrollHeight > 500 ? "500px" : "auto" ); /* sets max-height for IE */
}

Feed enhanced by Better Feed from Ozh

使用PHP把excel(xls)文件导入mysql数据库

seasun — Sun, 12 Sep 2010 14:43:49 +0000

昨晚一个客户联系我做网站，提出的要求是需要把客户提供的excel文件里面的数据导入到mysql数据库，最常用的方法就是先把xls文件导出为csv格式的文件，然后在解析csv格式的文件导入到mysql数据库。方法比较冗余，而且分好几步进行，很不方便，断桥残雪今天介绍一种方法是直接跳过csv的中间环节，直接把excel文件导入mysql数据库。

首先我们需要下载PHP-ExcelReader这是一个开源的项目，主要是来解析excel的文件，下载地址：http://sourceforge.net/projects/phpexcelreader，下载之后解压，主要用到excel文件夹里面的两个文件reader.php和oleread.php（这个文件默认的是oleread.inc，不清楚为啥，一堆e文，没看，直接改名即可）。

在reader.php文件中找到以下类似代码（第一行既是），改成正确的oleread.php路径即可：require_once 'oleread.php';

然后新建一个php文件引入reader.php，代码如下：

setOutputEncoding('gbk');//此处设置编码，一般都是gbk模式

$data->read('Book1.xls');//文件路径

error_reporting(E_ALL ^ E_NOTICE);
//这里我就只循环输出excel文件的内容了，要入库，只要把输出的地方，写一段mysql语句即可~
for ($i = 1; $i <= $data->sheets[0]['numRows']; $i++) {
	for ($j = 1; $j <= $data->sheets[0]['numCols']; $j++) {
		echo "\"".$data->sheets[0]['cells'][$i][$j]."\",";
	}
	echo "\n";
}
?>

注意：请不要使用PHP-ExcelReader压缩包里面的xls进行测试，断桥残雪发现，那个文件既是使用excel也打不开，所以是错误的。

断桥残雪使用上面的方法解析了一个1.4M的数据，都显示正常，所以大家可以放心使用

Feed enhanced by Better Feed from Ozh

提高Firefox的innerHTML()的性能

seasun — Sun, 12 Sep 2010 14:36:42 +0000

function replaceHtml(el, html) {
var oldEl = typeof el === "string" ? document.getElementById(el) : el;
/*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* 一旦我们从 DOM 上移除老的元素，则返回新的元素引用。*/
return newEl;
};

可以直接用el=replaceHtml(el, newHtml)代替el.innerHTML=newHtml。

速度到底有多大提升，还得测试说话。作者提供了一个测试页面：http://stevenlevithan.com/demo /replaceHtml.html

此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。

对于 Opera 也依然有性能提高，只是提高幅度没有上面两种浏览器惊人而已，

唯在 IE 中，则原始的 innerHTML 的方法更效率点。

扩展阅读：

《When innerHTML isn’t Fast Enough》| 《innerHTML and DOM Methods》| 原文链接

Feed enhanced by Better Feed from Ozh

CSS实现图片按固定大小等比例缩放

seasun — Sun, 12 Sep 2010 13:58:41 +0000

例如：设置图片最大高度和宽度分别为120px，75px，即当图片宽大于120或者高大于75时则等比例缩放。

.imglist_3 img{margin-right:10px;max-width:120px;max-height:75px;font:bold 12px/28px normal;}
* html .imglist_3 img{width: expression(this.width > 120 && this.width > this.height ? “120px” :auto); height:expression(this.height >75 ? “75px”:auto);}/* for IE6 */

Feed enhanced by Better Feed from Ozh

几大大型站点提供的IP地址API调用及腾讯API的使用介绍

seasun — Tue, 07 Sep 2010 04:46:23 +0000

腾讯的IP地址API接口地址：http://fw.qq.com/ipaddress

返回的是数据格式为：var IPData = new Array(“114.218.183.139″,””,”江苏省”,”苏州市”);

使用JS代码进行调取：

使用PHP解析的方法：

php
function getIpPlace(){
 $ip=file_get_contents("http://fw.qq.com/ipaddress");
 $ip=str_replace('"',' ',$ip);
 $ip2=explode("(",$ip);
 $a=substr($ip2[1],0,-2);
 $b=explode(",",$a);
 return $b;
}
$ip=getIpPlace();
print_r($ip);
?>

处理后输出的是一个数组。

另：

新浪的IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js

新浪多地域测试方法：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=218.192.3.42

搜狐IP地址查询接口（默认GBK）：http://pv.sohu.com/cityjson

搜狐IP地址查询接口（可设置编码）：http://pv.sohu.com/cityjson?ie=utf-8

搜狐另外的IP地址查询接口：http://txt.go.sohu.com/ip/soip

Feed enhanced by Better Feed from Ozh

关于jQuery ready()方法一些用法解释

seasun — Tue, 31 Aug 2010 14:37:47 +0000

jQuery的ready方法的是开发中经常用到的，作用相当于我们的body onload，是当页面DOM准备就绪的时候才运行的代码，最常用的就是在DOM渲染加载之前，先给document绑定ready事件，然后当页面 DOM都准备好之后才运行这个事件。
关于jQuery的ready有以下几种用法

最常用也是最标准的ready方法

$(document).ready(){ });

简写的jQuery ready()

$(function(){ });

这是因为jQuery的选择器第一个参数假如为空，那么默认的是document

不建议使用的ready()方法

$().ready(handler);

在jQuery1.4 发布公告中提到了：在jQuery1.4中仍然保留这种方法，但是不推荐使用，并且 jQuery1.3的ready会返回一个jQuery的对象，而1.4中则不会又返回

解决jQuery（$）库冲突的ready方法

这一种方式一般用在处理jQuery的$和别的库冲突的时候用的,可以通过jQuery.noConflict()这个方法,我们就可以直接在代码中通过jQuery来代替$来使用,但又习惯了使用$怎么办?看下面的代码:

jQuery.noConflict(); jQuery(function($){ alert($("#ready1").html()); //这样我们就可以使用$了 });

后记

一般在开发中断桥残雪是不会推荐使用jQuery的ready方法的，因为绑定 ready事件之后，jQuery需要添加DOMContentLoaded监听事件，对于页面加载渲染是有一定影响的，所以建议我们在逼不得已的情况下才使用jQuery的ready。

在实际开发中我推荐把ready中要执行的函数放在DOM的HTML代码之后，也就是当DOM渲染过去之后再执行handler，或者把代码直接放在页面的末尾

Feed enhanced by Better Feed from Ozh

通过PHP批量下载图片文件

seasun — Sun, 22 Aug 2010 14:06:36 +0000

最近一直很忙，遇到一个手工活，需要下载一些远程的图片，一共一百多张，如果通过手工一张一张的保存，也太耗费时间了，于是上网google了一把，找到PHP批量下载图片文件的方法，原文是出自平凡世界博客的一片关于如何使用PHP批量下载CSS文件中的图片的文章。经过研究改写了一下就可以使用了，方便快捷多了。

PHP批量下载图片文件代码：

set_time_limit(0);//设置PHP超时时间
$imagesURLArray = array_unique($imagesURLArray );

foreach($imagesURLArray as $imagesURL) {
    echo $imagesURL;
    echo "
";
    file_put_contents(basename($imagesURL), file_get_contents($imagesURL));
}

原理很简单，通过一个含有图片地址的数组循环，然后使用PHP的file_get_contents函数取得图片，在使用file_put_contents函数把图片保存下来。
P.S：一定要加上设置PHP超时时间哦~！

附上原文中通过php下载css中图片的代码：

< ?php
/*
More & Original PHP Framwork
Copyright (c) 2007 - 2008 IsMole Inc.
Author: kimi
Documentation: 下载样式文件中的图片，水水专用扒皮工具
*/

//note 设置PHP超时时间
set_time_limit(0);

//note 取得样式文件内容
$styleFileContent = file_get_contents('images/style.css');

//note 匹配出需要下载的URL地址
preg_match_all("/url\((.*)\)/", $styleFileContent, $imagesURLArray);

//note 循环需要下载的地址，逐个下载
$imagesURLArray = array_unique($imagesURLArray[1]);
    foreach($imagesURLArray as $imagesURL) {
    file_put_contents(basename($imagesURL), file_get_contents($imagesURL));
}

Feed enhanced by Better Feed from Ozh

实用的css代码片段集合

seasun — Mon, 09 Aug 2010 15:37:50 +0000

以下css代码片段都非常实用，是不可多得的css技巧。

利用text-indent隐藏文本

text-indent的主要作用在于文本缩进，但text-indent还有个妙用，先看代码：

h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url(“images/logo.jpg”) no-repeat scroll;
}

text-indent:-9999px;即文本负缩进-9999像素（溢出容器），那么你在屏幕上就无法看到文本了，达到隐藏文本的作用。
那么其意义在哪呢？
主要是考虑SEO。举个典型例子，你的站点的logo部分是个图片，为了SEO，一般加title属性，但效果显然没有直接加文本来的好，而利用 text-indent，你既加上了文本，同时不影响logo效果。

删除IE下文本域的滚动条

textarea{
overflow:auto;
}

全兼容浏览器的透明度设置

.transparent{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}

非常实用，通用大部分浏览器。-moz-opacity的作用是为了支持一些老版本的Mozilla浏览器，-khtml-opacity的作用是支持一些老版本的Safari浏览器。

Eric Meyer写的经典重置样式

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym,address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

基础的css使用图片的按钮样式

a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}

谷歌的字体服务API

Inconsolata:italic|Droid+Sans”>

body {
font-family: ‘Tangerine’, ‘Inconsolata’, ‘Droid Sans’, serif; font-size: 48px;
}

目前好像还没有中文的字体。

浏览器的特殊hacks

/* IE 6 */
* html .yourclass { }
/* IE 7 */
*+html .yourclass{ }
/* IE 7 and modern browsers */
html>body .yourclass { }
/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }
/* Opera 9.27 and below */
html:first-child .yourclass { }
/* Safari */
html[xmlns*=""] body:last-child .yourclass { }
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }
/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass { }
/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.yourclass { }
}

非常经典，明河严重推荐收藏。

固定定位，通用于IE6

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+’px’);
}

IE 6是不支持position:fixed;的，这里使用绝对定位来模拟。代码中的expression是啥含义？请点此。

翻转图片

img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: “FlipH”;
}

清理浮动

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

极度经典，明河严重推荐收藏。

圆角（不支持IE）

.round{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

@font-face字体设置

@font-face {
font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot’);
src: local(‘☺’),
url(‘GraublauWeb.woff’) format(‘woff’), url(‘GraublauWeb.ttf’) format(‘truetype’);
}

居中页面

.wrapper {
width:960px;
margin:0 auto;
}

IE中的最小高度

.box {
min-height:500px;
height:auto !important;
height:500px;
}

正在读取图片的效果

img {
background: url(loader.gif) no−repeat 50% 50%;
}

垂直居中

.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}

Feed enhanced by Better Feed from Ozh

CSS Border使用小分享

seasun — Thu, 05 Aug 2010 16:11:27 +0000

之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在这里.

原理

css盒模型

一个盒子包括: margin+border+padding+content: – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.; – 调整宽度大小可以调节三角形形状.

示例1

一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图

#test1 {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

示例2

在上面基础上, 我们把宽高度都设为0时, 会呈现上述的边界斜线.

#test2 {
    height:0;
    width:0;
    overflow: hidden; /* 这里设置overflow, font-size, line-height */
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

这时, 其实我们已经看到有上下左右四个三角形了..如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么

示例3

只保留上面的红色, 看看

#test3 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
}

可是, IE6下不支持透明啊~~~, 会出现下图的样子

找到一个在IE6下边框透明的文章中找到解决办法, 如下例

示例4

IE6下, 设置余下三条边的border-style为dashed,,,即可达到透明的效果~ 具体原因可以见参考资料3

#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}

当然, 在IE6下, 不设置透明, 将其颜色设置为背景色, 使其看不出来也是可以的.

示例5

上面我们画的小三角的斜边都是依靠原来盒子的边, 还有另外一种形式的小三角, 就是斜边在盒子的对角线上

#test5 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 #3366ff transparent transparent;
    border-style:solid solid dashed dashed;
    border-width:40px 40px 0 0 ;
}

保留其中一种颜色, 就可以得到斜边在对角线上的三角形了…多个这样的三角形, 通过设置边框大小, 颜色, 拼凑起来可以形成任意形状的三角形.

像这种不规则的三角形, 延伸一下, 放在气泡框上, 就可以省去拼背景图片的麻烦了.

另外, 关于气泡框, 可以使用棱形字符(◆)来实现, 设置其font-size, 颜色和背景色一致, 定位可以使用margin负值和absolute绝对定位来实现, 见示例.

应用之圆角生成

应该说是近似圆角,,其实由一个高度非常小的梯形展示出来: - 上梯形(无上边框,下左右3px宽度, 左右颜色去掉)+矩形+下梯形
自适应圆角1:: - 整个rc设置为float: left 或 display: inline-block 分为top,bd,bottom, top中又有两个层rc1和rc2, rc1只设置border-top, 高度为0, 并设置左右margin呈短小的一横线, rc2只设置左右border并且左右margin小于rc1, height为1px, 中间bd设置左右border,不设置左右margin;; - 不过 IE 6&7 出现 bug：rc在IE6中依然显示为dispaly:block,而IE7中top 和 bottom缩成一坨,不肯扩展开来,而在rc1/rc2/rc3 中插入文字xxx后只能扩展到文字宽度,不能与bd对齐.; - 见自适应圆角1
自适应圆角2: - 自 Google 系产品的 1px 圆角按钮,,,三层div, 最外层div1正常设置边框宽度1px, 呈现出上下边框线, 中间div2只设置左右边框, 且把左右margin设置成负值, 呈现出圆角处的4个圆点内层div3同样只设置左右边框, 同时margin上下空出div2的高度, margin左右也设置与div2相同的负值.; - 见自适应圆角2

其他小问题

- 透明:

IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为 dotted或是dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上（height>=border-width*3）,虚线宽长度必须是其宽度的5倍以上（height>=border-width*5）,否则点线和虚线都不会出现.

- IE6的奇偶bug:

如果定位外框高度或是宽度为奇数,则IE6下,绝对定位元素的低定位和右定位会有1像素的误差.所以,尽量保证外框的高度或宽度为偶数值.

- IE6的空div高度bug:

IE6下,空div会有莫名的高度,也就是说height:0;不顶用,此时形成的尖角的实际占高于其他浏览器是有差异的.可使用font- size:0; + overflow:hidden;修复此问题.

- filter: chroma滤镜

该属性属性可以设置一个对象中指定的颜色为透明色, 如:

border-color: pink;
filter: chroma(color=pink);

参考资料

Feed enhanced by Better Feed from Ozh

实用jquery代码片段集合[下]

seasun — Thu, 29 Jul 2010 14:26:22 +0000

如何隐藏除了特定选择器下的全部对象

$(‘#target div:not(#exclude)’).hide();
//或者
$(‘#target’).children().filter(‘:not(#exclude)’).hide();

filter()起到过滤的作用。

寻找带有指定字符串的元素

var foundin = $(‘*:contains(” 明河”)’);

获取垂直滚动距离

alert($(document).scrollTop());

scrollTop()非常实用的一个方法。

向表格追加一行数据

$(‘#myTable tr:last’).after(‘…’);

超过一个属性时的过滤

var elements = $(‘#someid input[type=sometype][value=somevalue]‘).get();

让cookies在X分钟后过期

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie(‘example’, ‘foo’, { expires: date });

选择从第一个到第X个的元素

//从第一个到第10个
$(‘a’).slice(0,10);
//或者
$(‘a:lt(10)’);

获取客户端的IP

$.getJSON(“http://jsonip.appspot.com?callback=?”,function(data){
alert( “你的IP：” + data.ip);
});

这是利用了jsonip.appspot.com提供的取IP服务。

解析XML数据源

1
title1
desc1
2
title2
desc2

$.get(‘file.xml’,{},function(data){
$(‘item’,data).each(function(){
var $this = $(this);
var id = $this.find(‘id’).text();
var title = $this.find(‘title’).text();
var description = $this.find(‘description’).text();
//do something …
});
});

获取在id中的数字

$(“#sites a”).click(function(){
var $this = $(this);
var nmb = $this.attr(‘id’).match(/site_(\d+)/)[1];
…
});

将类似12343778 转成 12.343.778的形式

var delimiter = ‘.’;
$(‘#result’).html()
.toString()
.replace(new RegExp(“(^\\d{“+($this.html().toString().length%3||-1)+”})(?=\\d{3})”),”$1″ + delimiter)
.replace(/(\d{3})(?=\d)/g,”$1″ + delimiter);

这个正则值得收藏，颇为经典。

向firebug的控制面板发送消息

jQuery.fn.log = function (msg) {
console.log(“%s: %o”, msg, this);
return this;
};
$(‘#some_div’).find(‘li.source > input:checkbox’).log(“sources to uncheck”).removeAttr(“checked”);

获取图片的宽高

var img = $(‘#imageid’);
var theImage = new Image();
theImage.src = img.attr(“src”);
alert(“Width: ” + theImage.width);
alert(“Height: ” + theImage.height);

Feed enhanced by Better Feed from Ozh

实用jquery代码片段集合[上]

seasun — Thu, 29 Jul 2010 14:24:51 +0000

加载google的jquery库

有利于加快加载速度（已经得到验证）。

修改图片src更新图片

$(imageobj).attr(‘src’, $(imageobj).attr(‘src’) + ‘?’ + Math.random() );

（这是很实用的技巧，曾经有人问明河，为什么他已经修改了图片的src，但图片没变化呢？原因在于缓存，给图片路径后加个随机数参数即可。

加载多张图片，判断加载完成状态

var totalimages = 10;
var loadedimages = 0;
$(“”).load(function() {
++loadedimages;
if(loadedimages == totalimages){
//全部图片加载完成时…..
}
});

双击不选中文本

var clearSelection = function () {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
$(element).bind(‘dblclick’,function(event){
clearSelection();
});

对一个列表进行排序

- cloud
- sun
- rain
- snow

var items = $(‘.to_order li’).get();
items.sort(function(a,b){
var keyA = $(a).text();
var keyB = $(b).text();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
var ul = $(‘.to_order’);
$.each(items, function(i, li){
ul.append(li);
});

（中文无效）

绑定右击事件

$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});

扩展jquery的对象选择器

$.extend($.expr[':'], {
//选择器名
moreThanAThousand : function (a){
return parseInt($(a).html()) > 1000;
}
});
$(document).ready(function() {
$(‘td:moreThanAThousand’).css(‘background-color’, ‘#ff0000′);
});

检查对象是否存在

if ($(“#elementid”).length) {
//……
}

取消一个ajax请求

var req = $.ajax({
type: “POST”,
url: “someurl”,
data: “id=1″,
success: function(){
}
});
//取消ajax请求
req.abort()

检查cookies是否可用

$(document).ready(function() {
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = “cookietest=1; expires=” + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf(“cookietest=”) != -1;
if(!cookiesEnabled){
//cookies不能用……..
}
});

获取当前元素在元素集内的索引值

$(“ul > li”).click(function () {
var index = $(this).prevAll().length;
});

如果你用的是jquery1.4，明河推荐使用以下方法：

$(“ul > li”).click(function () {
var index = $(this).index();
});

让一个元素相对于屏幕居中

jQuery.fn.center = function () {
this.css(“position”,”absolute”);
this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”);
this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”);
return this;
}
$(element).center();

这个方法非常实用，明河严重推荐收藏

获取当前页面的URL

$(document).ready(function() {
var pathname = window.location.pathname;
});

Feed enhanced by Better Feed from Ozh