直接上代码,其实就是围绕毫秒数做一些运算。
演示见:这里。
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());
随着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树载完毕后执行我们的代码
偶这个是从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();
}
};
}
}
有文章说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);
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>
这里说的跨浏览器主要指的是IE及Firefox
首先推荐使用或阅读Prototype.js,其中解决了很多IE及firefox下的兼容问题。
然后就是“Javascript的IE和Firefox兼容性汇编”这篇文章。
这里主要记录是一些本人碰到,而上面又没有涉及的问题
if (typeof(domFrame.onreadystatechange) != "undefined") {
// ie
domFrame.onreadystatechange = notify;
} else {
// firefox
domFrame.onload = notify;
}
function notify() {
alert('iframe内容装载完成');
}
像上面那个例子,假如在B页面中写onload事件回调方法,在方法中取clientHeight,clientWidth返回值将不正确。
解决方法可以在A页面中来取值或设置
// A页面
// 将返回B页面的clentWidth, clientHeight
domFrame.contentWindow.document.body.clientWidth;
domFrame.contentWindow.document.body.clientHeight;
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;
}