chenfahui'Blog

陈发辉的个人主页 chenfahui.cn

倒计时js

 <!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>
 
 

跑马灯

可控制(上一条、下一条、暂停、开始)跑马灯效果:

jquery离开页面提示

 

离开页面时,检测表单元素是否被修改,然后给出提示.防止用户错失修改的机会,提高用户体验。 

<!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>

 

textarea高度自适应

textarea高度自适应, 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: 

判断浏览器否为IE6

方法一:  

<!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>

 

 

取得div的top值和left值

 

要取得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;

 

SWFUpload 多文件图片上传

中文文档地址是: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开发的一个客户端的上传工具它结合了FLASHJavaScript的功能,以提供一种超越了传统的浏览器中<input type="file" />标签提供的文件上传功能。

SWFUpload提供的主要功能:

  • 在文件选择对话框中能够进行文件多选
  • 页面无刷新的上传
  • 提供上传进度的事件回调,实时显示上传进度
  • 良好的浏览器兼容性
  • 采用了命名空间以兼容其它JS的库 (例如 jQuery, Prototype, 等等)
  •  
  • FLASH 9FLASH 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显示。

 

...

contentEditable

 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运行一切正常.谷歌浏览器运行一切正常

jQuery弹出层插件大全

 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

表单验证

Email验证:if (!myEmail.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/))

空字符验证:

function isnull(str){

   if($.trim(str)=='')

      return false;

   else

      return true;

};

Trim()

 
功能删除字符串首部和尾部的空格。
 
语法Trim ( string )
 
参数string:string类型,指定要删除首部和尾部空格的字符串返回值String。函数执行成功时返回删除了string字符串首部和尾部空格的字符串,发生错误时返回空字符串("")。 如果参数值为null时,会抛出空指针异常。

 

checkbox判断:if($("#sendCopy").attr("checked")==true)

...

«1234»

Powered By Z-Blog 1.8 Walle Build 100427
Copyright 2009-2012 chenfahui.cn. Some Rights Reserved.www.chenfahui.cn网站PR查询