chenfahuihttp://www.chenfahui.cn/陈发辉RainbowSoft Studio Z-Blog 1.8 Walle Build 100427zh-CNCopyright 2009-2012 chenfahui.cn. Some Rights Reserved.Sat, 18 Feb 2012 11:28:07 +0800倒计时jsa@b.com (chenfahui)http://www.chenfahui.cn/post/44.htmlWed, 21 Dec 2011 09:17:04 +0800http://www.chenfahui.cn/post/44.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒計時</title>
</head>
 
<body>
剩余时间：<span id="expireTime"></span>
<script type="text/javascript">
   var expire = 2412169;
   var expireTime = function(expires){
       if(expires > 0){
           var second = expires;
       }else{
           var second = "0 分";
           return second;
       }
       var day = hour = min = "";
       if(second>86400){
           day = Math.floor(second/86400)+"天 ";
           second = second%86400;
       }
       if(second>3600){
           hour = Math.floor(second/3600)+"时 ";
           second = second%3600;
       }
       if(second>60){
           min = Math.floor(second/60)+"分 ";
           second = second%60;
       }
       second = second+"秒";
       return day+hour+min+second;
   }
    
   var timeEle = document.getElementById("expireTime");
    
   var timer = window.setInterval(function(){
       timeEle.innerHTML = expireTime(expire--);
       if(expire<0){
           clearInterval(timer);
       }
   },1000);
</script>
</body>
</html>
 
 

]]>Javascripthttp://www.chenfahui.cn/post/44.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=44http://www.chenfahui.cn/cmd.asp?act=tb&id=44&key=f3ad77d4 不知道你现在何方，为何不说话a@b.com (chenfahui)http://www.chenfahui.cn/post/43.htmlThu, 08 Dec 2011 11:21:16 +0800http://www.chenfahui.cn/post/43.html 不知道你现在何方，为何不说话。

上周末，跟老同学散步，走到六年前第一次来到这个城市从学校出来玩的街。六年多了...

]]>心情随笔http://www.chenfahui.cn/post/43.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=43http://www.chenfahui.cn/cmd.asp?act=tb&id=43&key=cca7356e跑马灯a@b.com (chenfahui)http://www.chenfahui.cn/post/42.htmlThu, 08 Dec 2011 09:51:42 +0800http://www.chenfahui.cn/post/42.html可控制（上一条、下一条、暂停、开始）跑马灯效果：

]]>Javascripthttp://www.chenfahui.cn/post/42.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=42http://www.chenfahui.cn/cmd.asp?act=tb&id=42&key=b0b06163jquery离开页面提示a@b.com (chenfahui)http://www.chenfahui.cn/post/41.htmlThu, 27 Oct 2011 16:27:07 +0800http://www.chenfahui.cn/post/41.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.chenfahui.cn/ziliao/js/jquery-1.4.1.min.js"></script>
<title>jquery离开页面提示</title>
</head>
<body>
<script type="text/javascript">
window.onbeforeunload = function(){
    if(is_form_changed()){return "您的修改内容还没有保存，您确定离开吗？"; }
}
function is_form_changed(){
    //检测页面是否有保存按钮
    var property_save = jQuery("#save");
    //检测到保存按钮,继续检测元素是否修改
    if(property_save.length>0){
        var is_changed = false;
        jQuery("#property input, #property textarea, #property select").each(function(){
            var _v = jQuery(this).attr('_value');
            if(typeof(_v) == 'undefined')
                 _v = '';
            if(_v != jQuery(this).val())
                is_changed = true;
        });
        return is_changed;
    }
    return false;
}
jQuery(document).ready(function(){
    jQuery("#property input, #property textarea, #property select").each(function(){
        jQuery(this).attr('_value', jQuery(this).val());
    });
});
</script>
</body>
</html>

 

]]>Javascripthttp://www.chenfahui.cn/post/41.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=41http://www.chenfahui.cn/cmd.asp?act=tb&id=41&key=bfa01b89textarea高度自适应a@b.com (chenfahui)http://www.chenfahui.cn/post/40.htmlMon, 24 Oct 2011 12:17:00 +0800http://www.chenfahui.cn/post/40.htmltextarea高度自适应， textarea随内容的增多自动增加高度。注意onpropertychange不能加this.style.height='0px';，在IE下会出现 Stack overflow at line:0 错误。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>textarea高度自适应</title>
</head>
<body>
<textarea style="height:18px;line-hieght:18px;padding:3px;width:200px;overflow:hidden;resize:none" onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height='0px';this.style.height=this.scrollHeight + 'px'" ></textarea>  
</body>
</html>
 
demo: 

]]>Div+csshttp://www.chenfahui.cn/post/40.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=40http://www.chenfahui.cn/cmd.asp?act=tb&id=40&key=7a6765db判断浏览器否为IE6a@b.com (chenfahui)http://www.chenfahui.cn/post/39.htmlWed, 19 Oct 2011 17:48:04 +0800http://www.chenfahui.cn/post/39.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>判断浏览器否为IE6</title>
</head>
 <body>
<input type="submit" onclick="ietester()" value="点击测试" />
<script type="text/javascript">
function ietester() {
var undef,
ie,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
v > 4 ? ie=v : ie=undef;
 
if ( ie === 6 ) {
alert('IE6');
   } else {
alert('非ie6');
   }
}
</script>
</body>
</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.chenfahui.cn/ziliao/js/jquery-1.4.1.min.js"></script>
<title>判断浏览器否为IE6</title>
</head>
<body>
<script type="text/javascript">
function ietester2 (){
if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style ){
alert("IE6")
}
else{
alert("非IE6")
}
};
</script>
<input value="点击测试" type="button" onclick="ietester2()" />
</body>
</html>

 

 

]]>Javascripthttp://www.chenfahui.cn/post/39.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=39http://www.chenfahui.cn/cmd.asp?act=tb&id=39&key=240ef592取得div的top值和left值a@b.com (chenfahui)http://www.chenfahui.cn/post/38.htmlMon, 17 Oct 2011 14:29:12 +0800http://www.chenfahui.cn/post/38.html 

要取得top值和left值，先要把这个div的定位设为 relative 或者 absolute
比如：<div id="txtArea" style="width:470;height:25;position:relative;left:0;top:0;"></div> 

top值： document.getElementById('txtArea').offsetTop+document.body.scrollTop
left值：document.getElementById('txtArea').offsetLeft;

 

]]>Javascripthttp://www.chenfahui.cn/post/38.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=38http://www.chenfahui.cn/cmd.asp?act=tb&id=38&key=9737729dSWFUpload 多文件图片上传a@b.com (chenfahui)http://www.chenfahui.cn/post/37.htmlSat, 15 Oct 2011 15:01:05 +0800http://www.chenfahui.cn/post/37.html中文文档地址是：http://www.v-sky.com/doc/swfupload/Documentation.html

网官上的DEMO为：http://demo.swfupload.org/v220/index.htm

下载地址：http://code.google.com/p/swfupload/

SWFUpload最初是由Vinterwebb.se开发的一个客户端的上传工具. 它结合了FLASH和JavaScript的功能，以提供一种超越了传统的浏览器中<input type="file" />标签提供的文件上传功能。

SWFUpload提供的主要功能:

  • 在文件选择对话框中能够进行文件多选
  • 页面无刷新的上传
  • 提供上传进度的事件回调，实时显示上传进度
  • 良好的浏览器兼容性
  • 采用了命名空间以兼容其它JS的库 (例如 jQuery, Prototype, 等等)
  •  
  • 对FLASH 9和FLASH 10播放器的支持(V2.2.0版本放弃了对Flash 8的支持)

SWFUpload背后的设计思想和其它基于Flash的上传工具是不同的。它将浏览器的中UI交给开发人员来控制。开发人员能够利用XHTML,CSS,Javascript来定制符合他们网站风格的UI上传元素。然后使用它提供的一组简单的JS事件来更新上传状态，开发人员能够利用这些事件来及时更新页面中的上传进度UI。

不幸的是Flash Player 10 更严格的安全机制迫使我们不得不将一个Flash Button放入Flash影片中。SWFUpload提供API供开发者通过图片、文字、CSS的方式来自定制更灵活的UI显示。

 

...

]]>Jqueryhttp://www.chenfahui.cn/post/37.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=37http://www.chenfahui.cn/cmd.asp?act=tb&id=37&key=8671fb09contentEditablea@b.com (chenfahui)http://www.chenfahui.cn/post/36.htmlSat, 15 Oct 2011 14:18:34 +0800http://www.chenfahui.cn/post/36.html contentEditable　

        html中的一个属性。设置html的contentEditable=‘true’时，即可开启该元素的编辑模式。

 　　Html中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用 过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素 设置为可写．我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．
 　　如果想要整个网页可编辑，请在body标签内设置contentEditable
 　　contentEditable虽不是W3C标准．经过我测试在IE6中运行正常．
 　　在IE8下设置表格可写不支持，其他元素没有问题．在FireFox运行一切正常．谷歌浏览器运行一切正常
]]>Div+csshttp://www.chenfahui.cn/post/36.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=36http://www.chenfahui.cn/cmd.asp?act=tb&id=36&key=36c3b875 jQuery弹出层插件大全a@b.com (chenfahui)http://www.chenfahui.cn/post/35.htmlFri, 14 Oct 2011 16:55:05 +0800http://www.chenfahui.cn/post/35.html jQuery弹出层插件大全：
    1.thickbox
     目前用的比较多的，最新版本是thickbox3.1
下载地址：http://jquery.com/demo/thickbox/#examples
   2.colorBox
官方网站：http://colorpowered.com/colorbox/
下载地址：http://colorpowered.com/colorbox/colorbox.zip
演示实例:http://colorpowered.com/colorbox/core/example1/index.html
   3.FancyBox
官方网站：http://fancybox.net
下载地址：http://fancybox.googlecode.com/files/jquery.fancybox-1.2.5.zip
演示实例:http://fancybox.net/example
   4.jQueryUI Dialog
官方网站：http://jqueryui.com/demos/dialog/
下载地址：http://jqueryui.com/demos/dialog/
演示实例:http://jqueryui.com/demos/dialog/
   5.DOM window
官方网站：http://swip.codylindley.com/
下载地址：http://swip.codylindley.com/jquery.DOMWindow.js
演示实例:http://swip.codylindley.com/DOMWindowDemo.html
   6.shadowbox
官方网站：http://www.shadowbox-js.com/
下载地址：http://www.shadowbox-js.com/download.html
演示实例:http://www.shadowbox-js.com/index.html
  7.jquery插件大全
http://www.51jsp.cn/html/javascriptkj/20100303/6734.html
  8.jQuery Impromptu
http://trentrichardson.com/Impromptu/index.php

]]>Javascripthttp://www.chenfahui.cn/post/35.html#commenthttp://www.chenfahui.cn/http://www.chenfahui.cn/feed.asp?cmt=35http://www.chenfahui.cn/cmd.asp?act=tb&id=35&key=6ed74251