since.2006  

直接上代码,其实就是围绕毫秒数做一些运算。

演示见:这里。

function WeekDate() {

    /**
     * 基准时间,所有计算以此为基础
     */
    var _calcDate = new Date();

    /**
     * 一天的豪秒数
     */
    var _day = 1000 * 60 * 60 * 24;

    this.getThisWeekDate = getThisWeekDate;
    this.getPrevWeekDate = getPrevWeekDate;
    this.getNextWeekDate = getNextWeekDate;
    this.wrapDate = wrapDate;

    this.getDayMillisecond = getDayMillisecond;

    /**
     * 取上周开始至上周结束日期
     *
     * @return Array [0]上周第一天 [1]上周最后一天
     */
    function getPrevWeekDate() {
        // 取上周结束日期
        var lastDay = new Date(_calcDate - (_calcDate.getDay()) * _day);
        // 取上周开始日期
        var firstDay = new Date((lastDay * 1) - 6 * _day);
        // 更新基准时间
        _calcDate = firstDay;

        return [wrapDate(firstDay), wrapDate(lastDay)];
    }

    /**
     * 取下周开始至下周结束日期
     *
     * @return Array [0]上周第一天 [1]上周最后一天
     */
    function getNextWeekDate() {
        // 取下周开始日期
        var firstDay = new Date((_calcDate * 1) + (6 - _calcDate.getDay() + 2) * _day);
        // 取下周结束日期
        var lastDay = new Date((firstDay * 1) + 6 * _day);
        // 更新基准时间        
        _calcDate = firstDay;

        return [wrapDate(firstDay), wrapDate(lastDay)];
    }

    /**
     * 取本周开始至本周结束日期
     *
     * @return Array [0]本周第一天 [1]本周最后一天
     */
    function getThisWeekDate() {
        _calcDate = new Date();
        // 第一天日期
        var firstDay = new Date(_calcDate - (_calcDate.getDay() - 1) * _day);
        // 最后一天日期
        var lastDay = new Date((firstDay * 1) + 6 * _day);

        return [wrapDate(firstDay), wrapDate(lastDay)];
    }

    function wrapDate($date) {
        var m = $date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;

        var d = $date.getDate();
        d = d < 10 ? "0" + d : d;

        return $date.getFullYear() + "-" + m + "-" + d;            
    }

    function getDayMillisecond() {
        return _day;
    }
}

//var weekDate = new WeekDate();
//alert(weekDate.getNextWeekDate());
//alert(weekDate.getNextWeekDate());
//alert(weekDate.getThisWeekDate());
//alert(weekDate.getPrevWeekDate());
//alert(weekDate.getPrevWeekDate());
Posted by hee at 14:10 PM | Permalink | 评论(0)

随着ajax的流行,页面中的JS代码越来越多。一般我们用JS处理页面时,都是使用window.onload等到页面加载完毕后再来处理,否则有时会出现文档未加载完毕而报的错误了。

但window.onload有一个不好的地方,它会等到整个页面(包括图片,flash等)全部加载完毕后,才会执行。一个页面中如果有很多图片,中间会有较长的延迟才会去执行我们的代码。

具体效果:http://www.ajaxeye.com/labs/domready.htm(注意页面中的两个小方块颜色,一开始默认都是红色,注意颜色的改变)

上面页面中,会在DOM树加载完毕后window.onload时分别改变两个小方块的颜色为绿色。

解决方法可以参见英文原文:
http://dean.edwards.name/weblog/2005/09/busted/
http://dean.edwards.name/weblog/2006/06/again/

解决方法就是想办法监听DOM树加载完毕的事件,等DOM树载完毕后执行我们的代码

  • Firefox、Opera9下,可以监听DOMContentLoaded事件来处理
  • IE下,可以给script标签加defer来处理

偶这个是从mootools,prototype中抠出来的IE,Firefox下测试通过

Event.addDOMReadyEvent = function($callback) {    
    var timer, fired = false;    
        
    function fireDOMReadyEvent() {    
        if (fired) {    
            return;    
        }    
        if (timer) {    
            window.clearInterval(timer);    
        }    
        fired = true;    
        $callback();    
    }    
        
    // firefox, opera, safari ...     
    if (document.addEventListener) {    
        if (window.webkit) {    
            timer = window.setInterval(function() {    
                if (/loaded|complete/.test(document.readyState)) {    
                    fireDOMReadyEvent();    
                }    
            }, 10);    
                
            Event.addEvent(window, 'load', fireDOMReadyEvent);    
        } else {    
            // firefox, opera9 使用 DOMContentLoaded    
            document.addEventListener("DOMContentLoaded", fireDOMReadyEvent, false);    
        }    
    } else {    
        // Internet Explorer中使用 defer 属性    
        var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';    
        document.write('<SCRIPT id=__tbOnDOMReady src="' + src + '" defer><\/script>');    
        $('__tbOnDOMReady').onreadystatechange = function() {    
            if (this.readyState == 'complete') {    
                this.onreadystatechange = null;    
                fireDOMReadyEvent();    
            }    
        };    
    }    
}  
Posted by hee at 22:01 PM | Permalink | 评论(2)

有文章说html dom中设置自定义属性时,需要使用setAttribute来设置.
但在某些情况下,不能全使用setAttribute来设置值
比如:

// 设置自定义属性
element.setAttribute("attribute.name", "attribute.value");
// 取得自定义属性
var value = element.setAttribute("attribute.name", "attribute.value");
alert(value);

在setAttribute属性值为字符串时,IE6,Firefox2,opera9下都工作正常.
而setAttribute当属性值为对象时,用上面的方法,只有IE下能工作正常.
比如:

// 设置自定义属性
element.setAttribute("attribute.name", object);
// 取得自定义属性
var obj = element.getAttribute("attribute.name");
// IE下返回的类型是object,而Firefox,opera下返回的类型却是string
alert(typeof obj);

解决的办法可以在设置自定义属性时,像设置内置属性一样操作

// 设置自定义属性
element.attribute = object;
// 取得自定义属性
var obj = element.getAttribute("attribute");
// 这样IE,Firefox,opera下都工作正常了
alert(typeof obj);

 

Posted by hee at 14:03 PM | Permalink | 评论(0)

dp.SyntaxHighlighter一款基于js的客户端源代码加亮脚本。
支持大多数编程语言,如:css,c#,c++,vb,delphi,js,php,ruby,sql,html等等。
目前这个blog的源代码加亮功能就是使用dp.SyntaxHighlighter,感觉效果比较清爽。
其它的还有基于PHP的GeSHi

dp.SyntaxHighlighter的使用方法较简单,在需要进行源代码加亮的页面头部、尾部分别导入下面代码:

<!-- 在头部导入css样式表 -->   
<LINK href="SyntaxHighlighter.css" type=text/css rel=stylesheet></LINK>   
<SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shCore.js"></SCRIPT>   
<SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushJava.js"></SCRIPT>   
<SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushJScript.js"></SCRIPT>   
<SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushPhp.js"></SCRIPT>   
<SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushXml.js"></SCRIPT>   
<SCRIPT language=javascript src="/exblog2/js/3part/SyntaxHighlighter/Scripts/shBrushCss.js"></SCRIPT>   
   
<!-- name属性的值在下面的js方法中的参数 --> 
<!-- class属性的表示源代码的种类,这里是javascript --> 
<TEXTAREA class=javascript name=code rows=10 cols=60> 
function msg() {    
        alert("hello world!");    
    }    
</pre></TEXTAREA>  
Posted by hee at 17:03 PM | Permalink | 评论(0)

这里说的跨浏览器主要指的是IE及Firefox

首先推荐使用或阅读Prototype.js,其中解决了很多IE及firefox下的兼容问题。

然后就是“Javascript的IE和Firefox兼容性汇编”这篇文章。

这里主要记录是一些本人碰到,而上面又没有涉及的问题

  • IE中iframe的onreadystatechange方法,在firefox下没有这个方法,可以用onload来代替。
if (typeof(domFrame.onreadystatechange) != "undefined") {       
    // ie       
    domFrame.onreadystatechange = notify;       
} else {       
    // firefox       
    domFrame.onload = notify;       
}       
      
function notify() {       
    alert('iframe内容装载完成');       
}
  • firefox下在iframe中的页面内嵌在别的页面中,onload后,取不到clientHeight,clientWidth这些值

像上面那个例子,假如在B页面中写onload事件回调方法,在方法中取clientHeight,clientWidth返回值将不正确。
解决方法可以在A页面中来取值或设置

// A页面      
// 将返回B页面的clentWidth, clientHeight      
domFrame.contentWindow.document.body.clientWidth;      
domFrame.contentWindow.document.body.clientHeight;
  • IE中取元素的颜色值可以使用element.currentStyle.color,firefox下没有currentStyle。可以使用下面方法来代替:
function getCurrentStyle(obj, prop) {    
        if (obj.currentStyle) {    
            return obj.currentStyle[prop];    
        } else if (window.getComputedStyle) {    
            prop = prop.replace(/([A-Z])/g, "-$1");    
            prop = prop.toLowerCase();    
            return window.getComputedStyle(obj, "").getPropertyValue();    
        }    
        return null;    
    }
Posted by hee at 09:12 AM | Permalink | 评论(0)