博客园_山高我为峰

JS innerHTML Double Quotes

2012-02-07T08:43:00Z

通过js的innerhtml来获取一个dom节点，内部的html值时，如果属性值没有空格，则ie左右版本下，都会出现标签大些，双引号丢失问题。如果属性值有空格，则标签会变成大写，引号则正常输出.

当属性值无空格时：
FF3.5.7（gecko/20091221）<div id="div2"></div>

IE6 弹出:<DIV id=div2></DIV>
IE7 弹出:<DIV id=div2></DIV>
IE8 弹出:<DIV id=div2></DIV>

有空格时：
FF3.5.7（gecko/20091221）<div id="div2 "></div>

IE6 弹出:<DIV id="div2 "></DIV>
IE7 弹出:<DIV id="div2 "></DIV>
IE8 弹出:<DIV id="div2 "></DIV>

产生这个BUG的原因是什么呢？

When you get the innerHTML of a DOM node in IE, if there are no spaces in an attribute value, IE will remove the quotes around it.IE's innerHTML doesn't remove quotes from non standard attributes.

即使是jQuery里面，jquery团队的技术人员也没有解决这个问题.

提供下解决方案：

function ieInnerHTML(obj) { 
         var zz = obj.innerHTML, 
             z =  
           zz.match(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/g); 
          if (z){ 
            for (var i=0;i<z.length;i++){ 
              var y, zSaved = z[i]; 
              z[i] = z[i].replace(/(<?\w+)|(<\/?\w+)\s/, 
                                  function(a){return a.toLowerCase();}); 
              y = z[i].match(/\=\w+[?\s+|?>]/g); 
               if (y){ 
                for (var j=0;j<y.length;j++){ 
                  z[i] = z[i].replace(y[j],y[j] 
                             .replace(/\=(\w+)([?\s+|?>])/g,'="$1"$2')); 
                } 
               } 
               zz = zz.replace(zSaved,z[i]); 
             } 
           } 
          return zz; 
         }

在相应的地方调用函数ieInnerHTML

if(/*@cc_on!@*/0){

　　inner_str = ieInnerHTML(obj);

　　}else{

　　inner_str = obj.innerHTML;

　　}

原理：对IE版本进行对应的JS处理，而且相应的元素标签中不要出现非标准元素

参考资料：

本文引用：http://liupeng.us/how-to-fix-js-innerhtml-double-quotes/

本文链接

正则表达式有无g参数时，test()结果的差异

2011-06-20T08:50:00Z

有g参数的正则表达式：

var kk=/\w\w/g;

var kk=new RegExp("\\w\\w","g");

如果正则表达式有指定g参数全局匹配，则每次test()是依次获得下一个匹配。举例说明

var s="AABBCC";

var kk=/(\w\w)/g;

for(i=0;i<8;i++){

document.write ("<br>"+kk.test(s));

}

上面的代码结果是3个true，1个false，再3个true，再1个false。

true

false

┄

第1次test匹配AA，第2次test匹配BB，第3次test匹配CC，第4次test找不到匹配，之后又从头重新开始：

第5次同第1次，第6次同第2次，┄┄。

所以会出现test有时候true，有时候false的情况。这里的正则表达式必须是指定了g参数的。

利用这一特点，可以用while循环遍历所有正则匹配：

var s="AA_123_BB_456_CC";

var kk=/((\w)\2)/g;

while(kk.test(s)){

document.write ("<br>"+RegExp.$1);

}

得到结果：

如果正则表达式没有g参数，则每次test都是从头开始匹配，不存在上述问题。

没有g参数的正则表达式：

var kk=/\w\w/;

var kk=new RegExp(\\w\\w);测试：

var s="AABBCC";

var kk=/(\w\w)/;

for(i=0;i<8;i++){

document.write ("<br>"+kk.test(s));

}

上面的代码结果是8个true，每次都是AA匹配。

true

┄

本文转自：无心的专栏

本文链接

[转载]分享8个超棒的免费高质量图标搜索引擎

2011-04-15T08:10:00Z

在工作中，我们经常需要用到图标素材。你也许能搜到很多的图标资源网站，但要找到免费的高质量图标却很难，这就是为什么我今天要与大家分享这些优秀的免费质量图标搜索引擎，相信在这些网站你能找到你要的东西。如果你知道更多更好的网站，欢迎与我们分享！

FindIcons

FindIcons 是我最喜欢的图标搜索引擎，目前已拥有超过 300,000 个图标资源。

IconFinder

Iconfinder 能帮助你快速找到需要的高质量图标，目前已拥有超过 150,000 个图标资源。

MrIcons

MrIcons 也是非常不错的图标搜索引擎，拥有 125,174 个图标资源。

Iconlet

Iconlet 是一个查找图标等图片资源的搜索引擎。

IconScan

这是一个用于查找 ICO 格式图标的搜索引擎，拥有超过 80,000 个图标文件。

IconSeeker

IconSeeker 是最好的图标搜索引擎，拥有超过 50,000 张图标资源，下载格式有 PNG, ICO 和 ICNS 三种。

Icons Search

Icons-Search 是一个帮助你查找高质量图标的在线搜索工具。

VeryIcon

VeryIcom 是另外一个帮助你搜索高质量图标的网站，拥有超过 20,000 的高质量图标。

转载自：http://www.cnblogs.com/lhb25/archive/2011/04/15/2009563.html

本文链接

平时技巧收集

2011-03-03T09:03:00Z

给定一个整数num，判断这个整数是否是2的N次方
        // 如果一个数是2的N次方，那么这两个数的“按位与”就是0.
        int num = 8;
        Response.Write(num & num-1);

//----------------------------------------------------------------------

js实现的十进制数转换N进制

/**
   * recursive 递归调用
   * @param {Object} num 十进制数
   * @param {Object} base 要转换成的进制数
   */
  function recursive(num, base) {
   var str = "", digit = "0123456789abcdef";
   if(num==0){
    return "";
   }else {
      //js除运算不清除小数，用Math.floor清一下
       str = recursive(Math.floor(num/base),base);
       return str + digit.charAt(num%base);
   }
  }

使用SQL2005自带扩展函数对字符串进行MD5加密

函数hashbytes() ，此函数是微软在SQL SERVER 2005中提供的，可以用来计算一个字符串的 MD5 和 SHA1 值，使用方法如下：

select hashbytes('MD5','000000')

select hashbytes('SHA1','000000')

hashbytes() 函数的返回结果是 varbinary 型，也就是以 0x 开头 16 进制形式的二进制数据。通常情况下，我们需要的都是字符串型的数据,使用系统内置函数 sys.fn_VarBinToHexStr()，如下使用:

select sys.fn_VarBinToHexStr(hashbytes('MD5','000000'))

html Checkbox 加边框兼容Firefox及Chrome浏览器

1.<input type="checkbox" name="test" style="outline:2px solid red" />　对IE没作用
2.<input type="checkbox" name="test1" style="border:2px solid red" /> 对Firefox、Chrome没作用
3.<input type="checkbox" name="test3" style="outline:2px solid red;border:2px solid red" />对三者都有作用

javascript中使用splice方法轻松实现对数组元素的插入、删除、替换

方法签名：

Array.prototype.splice(index,count[,elm1,elm2...n])

描述：

使用Array类型的splice方法可以对数组元素进行插入、替换、删除。该方法讲直接影响当前的数组对象(与.slice(index1,index2)方法不同)并返回被删除的数组项。

参数：

index ：数组中元素的起始下标。

count ：需要要被删除或替换的元素个数。

elems ：需要插入到数组中的项。

返回值：返回从素组中被移除的项。

演示：

var items =["a","b","c","d","e"];

//删除元素

result = items.splice(1,2)

//这个操作删除了示例中items数组中的元素[“b”，“c”],并返回[“b”，“c”]给result.

//替换元素

result = items.splice(1,2,"x","y")

//这个操作使用元素"x","y"替换了示例中items数组中的元素[“b”，“c”],并返回[“b”，“c”] 给 result.

//插入元素

result = items.splice(1,0,"x","y")

//这个操作的结果是在示例中items数组的的“b”元素后插入["x","y"],返回值为空。

本文链接

ActionScript3.0平铺由外部加载的图片

2011-02-22T06:04:00Z

var backImage:MovieClip = new MovieClip();

this.addChild (backImage);

var loader:Loader = new Loader();
loader.load (new URLRequest("http://www.baidu.com/img/logo-yy.gif"));
loader.contentLoaderInfo.addEventListener (Event.COMPLETE,showLoadResult);

function showLoadResult (event:Event):void {
        var _bitmap:Bitmap = Bitmap(loader.content);
        var matrix:Matrix = new Matrix(1, 0, 0, 1, this.stage.stageWidth / 2, this.stage.stageHeight / 2);
        var sampleSprite:Sprite = new Sprite();
		//sampleSprite.width=500;
		//sampleSprite.height=500;
        sampleSprite.graphics.beginBitmapFill (_bitmap.bitmapData, matrix , true , true);
        //sampleSprite.graphics.drawRect (this.stage.stageWidth / 2, this.stage.stageHeight / 2, _bitmap.width, _bitmap.height);
		 sampleSprite.graphics.drawRect (0, 0, this.stage.stageWidth, this.stage.stageHeight);
        sampleSprite.graphics.endFill ();
        backImage.addChild (sampleSprite);
}

本文链接

截取中英文字符串

2011-01-18T07:14:00Z

function substr(str, len)
{

   if(!str || !len) { 
     return ''; 
   }
   //预期计数：中文2字节，英文1字节
   var a = 0;
   //循环计数
   var i = 0;
   //临时字串
   var temp = '';
   for (i=0;i<str.length;i++){
     if (str.charCodeAt(i)>255){
      //按照预期计数增加2
        a+=2;
      }else{
        a++;
      }
      
      //如果增加计数后长度大于限定长度，就直接返回临时字符串
     if(a > len) { 
         return temp+'...'; 
      }
     //将当前内容加到临时字符串
     temp += str.charAt(i);
    }
    //如果全部是单字节字符，就直接返回源字符串
   return str;
}

本文链接

IE处理GIF动画图片onload事件的一个BUG

2011-01-17T01:13:00Z

在IE中，如果新建一个image对象，然后添加onload事件加载一个GIF动画图片时，onload执行方法会重复执行，而在除IE外的浏览器就没有这个问题。

<script type="text/javascript">
var img = new Image();
img.src = "test.gif";
img.onload = function(){
  alert("这里会重复弹出！");
}
</script>

经过研究发现，出现这种原因是因为GIF动画里有多个帧，每个帧都会触发一次onload事件，所以会一直执行onload的方法，知道了病因解决起来就简单了。

<script type="text/javascript">
var img = new Image();
img.src = "test.gif";
img.onload = function(){
    alert("加载完成，只弹一次");
    img.onload = null; //关键点就是这了
}
</script>

加载完成后要把onload事件赋为null，这样img动画到下一帧时就没有onload事件可触发了。

本文链接

BulkLoader类使用

2010-08-02T06:48:00Z

BulkLoader提供简单的载入函数，不管要载入的是xml、swf还是声音文件，都只使用同一接口。功能强大，十分推荐。

用法，载入xml文件：

var bulkLoader:BulkLoader = new BulkLoader('main loading');
bulkLoader.add('my_xml_file.xml');
bulkLoader.start();

引用前面载入的资源：

var myXML:XML = BulkLoader.getLoader("main loading").getXML("my_xml_file.xml");

更全面的用法:

package {
import br.com.stimuli.loading.BulkLoader;
import br.com.stimuli.loading.BulkProgressEvent;
import flash.events.*;
import flash.display.*;
import flash.media.*;
import flash.net.*;

public class SimpleExampleMain extends MovieClip {
public var loader : BulkLoader;
public var v : Video;
public var counter : int = 0;

public function SimpleExampleMain() {
//构建BulkLoader的时候需要给它一个名称
loader = new BulkLoader("main-site");
//设置输出日志
loader.logLevel = BulkLoader.LOG_INFO;
//构建好了以后，通过add方法往队列里添加需要加载的对象
loader.add("photo.png");
//添加加载对象时候，也可以给它添加一个id，方便以后调用
loader.add("images.jpg", {id:"bg"});
//还可以通过priority属性调整加载对象的加载顺序，priority值越大，优先权越高，越早加载
loader.add("list.xml", {priority:20, id:"config-xml"});
//加载一个动画，加载动画的时候可以用pausedAtStart属性暂停播放动画
loader.add("mov.fla", {maxTries:6, id:"the-video", pausedAtStart:true});
//maxTries属性用于设定加载失败时的重试次数，注意，这里的“id”用了字符串命名
loader.add("song.mp3", {"id":"soundtrack", maxTries:1, priority:100});

//看了最新版本的文档，已经开始支持swf和json，一阵欣喜。

//添加一个COMPLETE事件，这个事件会在队列里的所有对象都加载完毕后触发
loader.addEventListener(BulkLoader.COMPLETE, onAllItemsLoaded);

//添加一个PROGRESS事件，这个事件会在队列加载时不断触发。通常可以用于监听加载进度。
loader.addEventListener(BulkLoader.PROGRESS, onAllItemsProgress);

//队列编辑完毕后用star方法开始加载队列
loader.start();
}
public function onAllItemsLoaded(evt : Event):void {
trace("every thing is loaded!");
//建立一个Video对象
var video : Video = new Video();
//从队列里提取刚才加载的视频流
var theNetStream : NetStream = loader.getNetStream("the-video");
addChild(video);
video.attachNetStream(theNetStream);
theNetStream.resume();
video.y = 300;
//提取图片

//可以直接通过url提取对象
var bitmapCats : Bitmap = loader.getBitmap("photo.png");
bitmapCats.width = 200;
bitmapCats.scaleY = bitmapCats.scaleX;
addChild(bitmapCats);

//当然，也可以通过id提取对象
var bitmapShoes : Bitmap = loader.getBitmap("bg");
bitmapShoes.width = 200;
bitmapShoes.scaleY = bitmapShoes.scaleX;
bitmapShoes.x = 220;
addChild(bitmapShoes);

//提取音频
var soundtrack : Sound = loader.getSound("soundtrack");
soundtrack.play();

//提取一个xml文档
var theXML : XML = loader.getXML("config-xml");
trace(theXML);
}
//通过BulkProgressEvent的loadingStatus方法可以显示加载过程中的所有信息！
public function onAllItemsProgress(evt : BulkProgressEvent):void {
trace(evt.loadingStatus());
}
}
}

这里特别提出一点，就是加入progess事件，当载入的对象太多，函数中的totalBytes并不能同步获取所有资源的Bytes，evt.loadingStatus(）方法列出了所有的onProgess可以检测到的属性，通过N此检测，我确信这是一个BUG。loadedBytes是正常显示，而totalBytes会在loading接近尾声的时候才能够获取。我查看了code.google的文档，找到了一个方法，还没有去验证 loader.get("id").addEventListener(Event.COMPLETE,onBackgroundLoaded)获取众多资源中的特定支援，应用在Complete方法上，这样是否同样可以应用在PROGRESS恩？如果在获取每个单一资源的以后执行break，再把单一资源的totalBytes相加在一起，是否可以得出我们在总的onProgess方法里获取不到的totalBytes？

文章转自：http://amazonite.blog.sohu.com/131966709.html

本文链接

Asp.net缓存动态图片

2010-06-11T09:18:00Z

最近在模仿QQ的相册，发现QQ相册中的大小图片都是动态的，通过抓包工具发现Http返回的状态码是304.

大家应该都知道当浏览器缓存了文件就直接从缓存中读取，状态码就是304.所以QQ相册的这种动态缓存技术让我研究了一段时间，现把研究结果记录下来，备用。

实现原理：

首先，要知道原始图片的最后一次修改时间。

其次，获取本地缓存文件夹中该文件的时间。

最后，两个时间比较，如果本地缓存的时间大于原始图片最后一次修改的时间，那么就告诉浏览器本地已经有这个文件了，不用再去请求了，将HTTP状态值置为304即可；否则就去动态生成你需要的小图片，并且将这个小图片通过设置 Last-Modified HTTP标头来实现本地访问时间。

好了，原理我们知道了，那代码怎么实现呢？

protected void Page_Load(object sender, EventArgs e)
    {
        string imgPath = string.IsNullOrEmpty(Request["imgPath"]) ? "" : Request["imgPath"].ToString();
       
        Response.ContentType = "image/jpeg";       
        DateTime contentModified = System.IO.File.GetLastWriteTime(imgPath); 

        if (IsClientCached(contentModified))
        {
            Response.StatusCode = 304;
            
            Response.SuppressContent = true;
        }
        else
        {
            
                Thumbnail.GenerateHighThumbnail(imgPath, 80, 80); //这里是生成缩略图的代码，网上到处都是，这里就不展现了。
            
            Response.Cache.SetETagFromFileDependencies();
            Response.Cache.SetAllowResponseInBrowserHistory(true);           

            Response.Cache.SetLastModified(contentModified);
        }
       

    }

    private bool IsClientCached(DateTime contentModified)
    {
        string header = Request.Headers["If-Modified-Since"];

        if (header != null)
        {
            DateTime isModifiedSince;
            if (DateTime.TryParse(header, out isModifiedSince))
            {
                return isModifiedSince >= DateTime.Parse(contentModified.ToString());
            }
        }

        return false;
    }

重点说一下IsClientCached方法中的 return isModifiedSince >= DateTime.Parse(contentModified.ToString());

这里contentModified本来就是DateTime类型，为什么还要把它转成字符串，然后再转回日期型呢？

我在这里折腾了好长时间，是因为我们取出原始图片最后一次修改的时间精确到毫秒，而通过Request.Headers["If-Modified-Since"];请求的结果是伦敦标准时间，没有毫秒值，所以如果不转换一下就会出现已经缓存的图片，由于毫秒的问题，使return isModifiedSince >= DateTime.Parse(contentModified.ToString()); 返回false，这里转换后将毫秒去掉后就可以正常了。

本文链接

JS文件传参及处理技巧

2010-05-13T08:48:00Z

其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。

解决思路：

1、首先获取到当前JS文件的SRC属性，这里有一个小技巧：我们只需要获取当前页面最后一个script标记内容即可。
为什么？？因为JS是顺序解析的，当前JS脚本解析时后面的js都还没有解析到，当然就认为自己就是最后一个script了。此外，这样获取还有一个好处：我们可以多次引用同一个文件且传入不同的参数，这样可以在js文件中根据参数不同做不同处理，很巧妙把！简直就是动态语言了。
代码如下：
　　var scripts=document.getElementsByTagName("script");
　　var curJS=scripts[scripts.length-1]; //curJS就是我们当前的js文件

得到这个就好办了，通过curJS.src即可获取到完整的路径内容（包括参数）。

2、下面的就是解析参数内容了，解析的过程相当简单，相信很多人都容易完成这一步。
但我们要对一个特殊情况进行处理：如果一个参数被传入了多次，则要将该参数值转换为数组存储每一个传入的值。

完整测试脚本如下：

测试示例的HTML源码：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="test.js?id=4&username=yemoo&id=1&uid=110"></script>
  <script type="text/javascript" src="test.js?id=5&username=ajaxbbs&id=7&uid=253"></script>
  <script type="text/javascript" src="test.js?id=6&username=jack&id=8&uid=258"></script>
</head>
<body>
</body>
</html>

文章转自：http://www.cnitblog.com/yemoo/archive/2008/03/11/40799.html

本文链接