一个程序猿 » JS http://www.sunboyu.cn 时光不会倒流,脚步总要前进 Tue, 31 Jan 2012 10:50:34 +0000 http://wordpress.org/?v=2.7 en hourly 1 图片动态缩放PHP与JS算法 http://www.sunboyu.cn/2009/07/20/%e5%9b%be%e7%89%87%e5%8a%a8%e6%80%81%e7%bc%a9%e6%94%bephp%e4%b8%8ejs%e7%ae%97%e6%b3%95.shtml http://www.sunboyu.cn/2009/07/20/%e5%9b%be%e7%89%87%e5%8a%a8%e6%80%81%e7%bc%a9%e6%94%bephp%e4%b8%8ejs%e7%ae%97%e6%b3%95.shtml#comments Mon, 20 Jul 2009 00:19:05 +0000 admin http://www.sunboyu.cn/?p=875 这个算法写好多次了，虽然简单，但每次都得想一次，这里做个备份。

因为GD函数进行缩放，必须有宽和高，而在浏览器中，会自动按照比率调整宽高，所以两个函数稍有区别。

  1. #PHP版
  2. # $s_width  原图宽
  3. # $s_height 原图高
  4. # $t_width  目标文件最大宽
  5. # $t_height 目标文件最大高
  6. function ReSizePic( $s_width , $s_height , $t_width , $t_height)
  7. {
  8. if( $s_width / $s_height > $t_width / $t_height && $s_width > $t_width)
  9. {
  10. $t_height = $s_height * $t_width / $s_width;
  11. $t_width = $t_width;
  12. }
  13. else if( $s_width / $s_height > $t_width / $t_height && $s_width < = $t_width)
  14. {
  15. $t_height = $s_height;
  16. $t_width  = $s_width;
  17. }
  18. else if( $s_width / $s_height < $t_width / $t_height && $s_height > $t_height)
  19. {
  20. $t_width = $s_width*$t_height/$s_height;
  21. $t_height = $t_height;
  22. }
  23. else if( $s_width / $s_height < $t_width / $t_height && $s_height <= $t_height)
  24. {
  25. $t_height = $s_height;
  26. $t_width  = $s_width;
  27. }
  28. return array( "width" => $t_width , "height" => $t_height );
  29. }
  30. #JS版
  31. # obj 图片对象
  32. # maxWidth 显示最大宽
  33. # maxHeight 显示最大高
  34. function ReSizePic( obj , maxWidth , maxHeight )
  35. {
  36. if( ( obj.width/obj.height >= maxWidth/maxHeight ) && obj.width > maxWidth )
  37. {
  38. obj.width = maxWidth;
  39. }
  40. else if( ( obj.width/obj.height < maxWidth/maxHeight ) && obj.height > maxHeight )
  41. {
  42. obj.height = maxHeight;
  43. }
  44. }
]]> http://www.sunboyu.cn/2009/07/20/%e5%9b%be%e7%89%87%e5%8a%a8%e6%80%81%e7%bc%a9%e6%94%bephp%e4%b8%8ejs%e7%ae%97%e6%b3%95.shtml/feed JS:setAttribute() getAttribute() 使用总结 http://www.sunboyu.cn/2008/10/07/jssetattribute-getattribute-%e4%bd%bf%e7%94%a8%e6%80%bb%e7%bb%93.shtml http://www.sunboyu.cn/2008/10/07/jssetattribute-getattribute-%e4%bd%bf%e7%94%a8%e6%80%bb%e7%bb%93.shtml#comments Tue, 07 Oct 2008 15:53:38 +0000 admin http://www.sunboyu.cn/?p=336 setAttribute() getAttribute() 两个函数分别是设置DOM节点属性设置和修改的函数，比如

var a=document.getElementById(’link’);

a.setAttribute(’class’) = ‘mylinkstyle’;

可以设置一个元素的属性

同样，我们可以自定义元素的属性，比如 <a href=”#” tips=”tipscontet” title=”testtitle”>test</a>

如此，给a标签增加一个新的属性，tips。而tips的值可以用getAttribute()获取。

]]> http://www.sunboyu.cn/2008/10/07/jssetattribute-getattribute-%e4%bd%bf%e7%94%a8%e6%80%bb%e7%bb%93.shtml/feed 简单的div页面拖动效果 http://www.sunboyu.cn/2008/08/07/%e7%ae%80%e5%8d%95%e7%9a%84div%e9%a1%b5%e9%9d%a2%e6%8b%96%e5%8a%a8%e6%95%88%e6%9e%9c.shtml http://www.sunboyu.cn/2008/08/07/%e7%ae%80%e5%8d%95%e7%9a%84div%e9%a1%b5%e9%9d%a2%e6%8b%96%e5%8a%a8%e6%95%88%e6%9e%9c.shtml#comments Thu, 07 Aug 2008 15:33:26 +0000 admin http://www.sunboyu.cn/?p=250 这里主要是一些元素坐标的计算，不过我写这个东西不很兼容firefox，正在查找原因。
index

]]> http://www.sunboyu.cn/2008/08/07/%e7%ae%80%e5%8d%95%e7%9a%84div%e9%a1%b5%e9%9d%a2%e6%8b%96%e5%8a%a8%e6%95%88%e6%9e%9c.shtml/feed 兼容ie，firefox的页面事件监听函数 http://www.sunboyu.cn/2008/08/07/%e5%85%bc%e5%ae%b9ie%ef%bc%8cfirefox%e7%9a%84%e9%a1%b5%e9%9d%a2%e4%ba%8b%e4%bb%b6%e7%9b%91%e5%90%ac%e5%87%bd%e6%95%b0.shtml http://www.sunboyu.cn/2008/08/07/%e5%85%bc%e5%ae%b9ie%ef%bc%8cfirefox%e7%9a%84%e9%a1%b5%e9%9d%a2%e4%ba%8b%e4%bb%b6%e7%9b%91%e5%90%ac%e5%87%bd%e6%95%b0.shtml#comments Thu, 07 Aug 2008 14:01:14 +0000 admin http://www.sunboyu.cn/?p=248 listenerevent

  1. //for ff
  2. if(document.addEventListener)
  3. {
  4.     function __Eventadd ( element , eventType , handle )
  5. {
  6.     element.addEventListener( eventType , handle , false );
  7. }
  8. function __Eventremove ( element , eventType , handle )
  9. {
  10.     element.removeEventListener( eventType , handle , false );
  11. }
  12. }
  13. //for ie
  14. else if(document.attachEvent)
  15. {
  16.     function __Eventadd ( element , eventType , handle )
  17. {
  18.     element.attachEvent( 'on'+eventType , handle );
  19. }
  20. function __Eventremove ( element , eventType , handle )
  21. {
  22.     element.detachEvent( 'on'+eventType , handle );
  23. }
  24. }

实际上，真正完全兼容还要很复杂的一个过程，这里也是简化到了只是能用的程度。具体请查看《JavaScript权威指南》第五版 414页

]]> http://www.sunboyu.cn/2008/08/07/%e5%85%bc%e5%ae%b9ie%ef%bc%8cfirefox%e7%9a%84%e9%a1%b5%e9%9d%a2%e4%ba%8b%e4%bb%b6%e7%9b%91%e5%90%ac%e5%87%bd%e6%95%b0.shtml/feed 几个JS函数，自家用，共享之 http://www.sunboyu.cn/2008/08/04/%e5%87%a0%e4%b8%aajs%e5%87%bd%e6%95%b0%ef%bc%8c%e8%87%aa%e5%ae%b6%e7%94%a8%ef%bc%8c%e5%85%b1%e4%ba%ab%e4%b9%8b.shtml http://www.sunboyu.cn/2008/08/04/%e5%87%a0%e4%b8%aajs%e5%87%bd%e6%95%b0%ef%bc%8c%e8%87%aa%e5%ae%b6%e7%94%a8%ef%bc%8c%e5%85%b1%e4%ba%ab%e4%b9%8b.shtml#comments Mon, 04 Aug 2008 10:45:12 +0000 admin http://www.sunboyu.cn/?p=243 检测浏览器类型，主要根据 userAgent关键字来确定

  1. function __navigator()
  2. {
  3.     this.value = false;   //返回值  ie 0 firefox 1 other 2
  4. this.useragent =  navigator['userAgent'];
  5. if(this.useragent.indexOf('MSIE')>0)
  6. {
  7.     this.value = 0;
  8. }
  9. else if(this.useragent.indexOf('Firefox')>0)
  10. {
  11.     this.value = 1;
  12. }
  13. else
  14. {
  15.     this.value = 2;
  16. }
  17. }

获得浏览器相关信息

  1. function __window()
  2. {
  3.     this.innerwidth = 0;   //document width
  4. this.innerheight = 0; //document height
  5.  
  6. this.outerwidth = 0;   //browser width
  7. this.outerwidth = 0;   //browser height
  8.  
  9. this.screenx = 0;     //browser position x
  10. this.screeny = 0;   //browser position y
  11.  
  12.     /*@cc_on
  13.   @if(@_jscript)
  14.  
  15.   this.innerwidth = document.body.clientWidth;
  16.   this.innerheight = document.body.clientHeight;
  17.  
  18.   this.outerwidth = document.documentElement.clientWidth;
  19.   this.outerheight = document.documentElement.clientHeight;
  20.  
  21.   this.screenx = window.screenLeft;
  22.   this.screeny = window.screenTop;
  23.  
  24.   @else*/
  25.  
  26.   this.innerwidth = window.innerWidth;
  27.   this.innerheight = window.innerHeight;
  28.  
  29.   this.outerwidth = window.outerWidth;
  30.   this.outerheight = window.outerHeight;
  31.  
  32.   this.screenx = window.screenX;
  33.   this.screeny = window.screenY;
  34. /*@end
  35.   @*/
  36. }
]]> http://www.sunboyu.cn/2008/08/04/%e5%87%a0%e4%b8%aajs%e5%87%bd%e6%95%b0%ef%bc%8c%e8%87%aa%e5%ae%b6%e7%94%a8%ef%bc%8c%e5%85%b1%e4%ba%ab%e4%b9%8b.shtml/feed JavaScript跨浏览器兼容代码 http://www.sunboyu.cn/2008/08/03/javascript%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e4%bb%a3%e7%a0%81.shtml http://www.sunboyu.cn/2008/08/03/javascript%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e4%bb%a3%e7%a0%81.shtml#comments Sun, 03 Aug 2008 14:58:07 +0000 admin http://www.sunboyu.cn/?p=242 方法1：检测浏览器关键字

  1. function __navigator()
  2. {
  3.     this.value = false;   //返回值  ie 0 firefox 1 other 2
  4. this.useragent =  navigator['userAgent'];
  5. if(this.useragent.indexOf('MSIE')>0)
  6. {
  7.     this.value = 0;
  8. }
  9. else if(this.useragent.indexOf('Firefox')>0)
  10. {
  11.     this.value = 1;
  12. }
  13. else
  14. {
  15.     this.value = 2;
  16. }
  17. }

方法2：

  1. if(document.all)
  2.   ie
  3. else
  4.   other

方法3：

  1. <!--[if IE]>
  2.     js for ie
  3. <![endif]-->
  4. <!--[if !IE]>
  5.     js for !ie
  6. <![endif]-->

方法4:

  1. /*@cc_on
  2.   @if(@_jscript)
  3.   is for ie
  4.   @else*/
  5.   js for !ie
  6. /*@end
  7.   @*/
]]> http://www.sunboyu.cn/2008/08/03/javascript%e8%b7%a8%e6%b5%8f%e8%a7%88%e5%99%a8%e5%85%bc%e5%ae%b9%e4%bb%a3%e7%a0%81.shtml/feed 一个操作Cookie的小程序 http://www.sunboyu.cn/2008/07/30/%e4%b8%80%e4%b8%aa%e6%93%8d%e4%bd%9ccookie%e7%9a%84%e5%b0%8f%e7%a8%8b%e5%ba%8f.shtml http://www.sunboyu.cn/2008/07/30/%e4%b8%80%e4%b8%aa%e6%93%8d%e4%bd%9ccookie%e7%9a%84%e5%b0%8f%e7%a8%8b%e5%ba%8f.shtml#comments Wed, 30 Jul 2008 14:57:24 +0000 admin http://www.sunboyu.cn/?p=231 simplecookie

  1. <br />
  2. /*<br />
  3.     一个简单的cookie操作函数，自家用<br />
  4. */<br />
  5. function SetCookie()<br />
  6. {<br />
  7.     var name = arguments[0];<br />
  8. var value = arguments[1];<br />
  9. //初始化默认存储时间<br />
  10. var time = 3600;<br />
  11. if(arguments[2]!=undefined)<br />
  12. {<br />
  13.     time = arguments[2]<br />
  14. }<br />
  15. if(arguments[0]==undefined||arguments[0]==undefined)<br />
  16. {<br />
  17.     alert("SetCookie Has ERROR Agruments");<br />
  18. }<br />
  19. document.cookie = name+"="+escape(value)+" ; expires="+GetTime(time);<br />
  20. }<br />
  21. function GetCookie( name )<br />
  22. {<br />
  23.     var arr = document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));<br />
  24. if(arr!=null)<br />
  25. {<br />
  26.     return unescape(arr[2]);<br />
  27. }<br />
  28. else<br />
  29. {<br />
  30.     return null;<br />
  31. }<br />
  32. }<br />
  33. function DelCookie( name )<br />
  34. {<br />
  35.     var value = GetCookie( name );<br />
  36. if(value!=null)<br />
  37. {<br />
  38.     document.cookie = name+"="+escape(value)+" ; expires="+GetTime( 0 );<br />
  39. }<br />
  40. }<br />
  41. function GetTime( time )<br />
  42. {<br />
  43.     var exp = new Date();<br />
  44. exp.setTime( exp.getTime()+time*1000 );<br />
  45. return exp.toGMTString();<br />
  46. }<br />

]]> http://www.sunboyu.cn/2008/07/30/%e4%b8%80%e4%b8%aa%e6%93%8d%e4%bd%9ccookie%e7%9a%84%e5%b0%8f%e7%a8%8b%e5%ba%8f.shtml/feed 用户行为状态的持久化 http://www.sunboyu.cn/2008/07/30/%e7%94%a8%e6%88%b7%e8%a1%8c%e4%b8%ba%e7%8a%b6%e6%80%81%e7%9a%84%e6%8c%81%e4%b9%85%e5%8c%96.shtml http://www.sunboyu.cn/2008/07/30/%e7%94%a8%e6%88%b7%e8%a1%8c%e4%b8%ba%e7%8a%b6%e6%80%81%e7%9a%84%e6%8c%81%e4%b9%85%e5%8c%96.shtml#comments Wed, 30 Jul 2008 04:41:12 +0000 admin http://www.sunboyu.cn/?p=230 用持久化这个词，有点拽文的意思，但必须找出一个形象的词汇来描述，暂且这么用。

用户行为持久，主要指保留用户行为状态，比如保存用户的登录信息，可以让用户不必每次输入密码。保留用户当前打开的页面，当前对客户端的操作等。

用户登录状态，主要应用cookie的方式把一些认证信息保存在本地，而其他信息的保留，同样可以使用cookie保存，比如框架的一些状态。

http://openoa.sunboyu.cn   这个网站中，可以看一下对用户行为持久的一些操作。首先是框架左侧菜单显示的控制。这个控制可以在刷新的时候保持用户的折叠状态，而不用每次刷新，都去折叠菜单。这个控制用cookie保存数据。

还有个操作，就是曾经另我很头疼的，大框架每刷新一次，主框架都会恢复默认的链接，也就是中间打开的页面会丢失。最近用js解决了这个问题，每次点击左侧菜单链接的时候，使用锚点标记的方式把链接写在url中，再次刷新的时候，根据url中的锚点确认主框架的链接。

这两个功能都完成了，用着还不错。

]]> http://www.sunboyu.cn/2008/07/30/%e7%94%a8%e6%88%b7%e8%a1%8c%e4%b8%ba%e7%8a%b6%e6%80%81%e7%9a%84%e6%8c%81%e4%b9%85%e5%8c%96.shtml/feed 死苛正则表达式 http://www.sunboyu.cn/2008/06/27/%e6%ad%bb%e8%8b%9b%e6%ad%a3%e5%88%99%e8%a1%a8%e8%be%be%e5%bc%8f.shtml http://www.sunboyu.cn/2008/06/27/%e6%ad%bb%e8%8b%9b%e6%ad%a3%e5%88%99%e8%a1%a8%e8%be%be%e5%bc%8f.shtml#comments Fri, 27 Jun 2008 04:57:06 +0000 admin http://www.sunboyu.cn/?p=160 犀牛书买来后，先看的正则。

正则就是一堆逻辑规则的集合，没啥难的，类似语句中的if else foreach等，只是把语句换乘符号了。

首先得会拆解逻辑，而后用那些乱七八糟的符号去描述这些逻辑。

规则是人家定的，没办法，只好用这些东西。

进步很快，希望能称谓正则高手。

]]> http://www.sunboyu.cn/2008/06/27/%e6%ad%bb%e8%8b%9b%e6%ad%a3%e5%88%99%e8%a1%a8%e8%be%be%e5%bc%8f.shtml/feed