存档

文章标签 ‘javascript’

javascript 获取滚动条高度+常用js页面宽度与高度[转]

2010年5月20日
没有评论

/********************
* 取窗口滚动条高度
******************/
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
/********************
* 取窗口可视范围的高度
*******************/
function getClientHeight()
{
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
else
{
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}
/********************
* 取文档内容实际高度
*******************/
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
////////////////////////////////////////////////////
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在 Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> [...]

作者: shooting 分类: 学习笔记 标签: ,

javascript 图片loading的实现

2009年9月8日
2 条评论

我们在设计一些图片比较多的网页时，为了增强用户体验，希望图片加载的时候有个loading动画效果，而不是由空白到一下子出来。在zen cart的二次开发过程中同样也遇到了这个问题，下面是我的解决方案。
首页给图片设置一个默认的loading动画，再分配一个id，如<img  id=”loading1″  src=”loading.gif”>实际上加载过程通过一个函数来完成
function addListener(element, type, expression, bubbling)
{
bubbling = bubbling || false;
if(window.addEventListener)    { // Standard
element.addEventListener(type, expression, bubbling);
return true;
} else if(window.attachEvent) { // IE
element.attachEvent(‘on’ + type, expression);
return true;
} else return false;
}

var ImageLoader = function(url){
this.url = url;
this.image = null;
this.loadEvent = null;
};

ImageLoader.prototype = {
load:function(){
this.image = document.createElement(‘img’);
var url = this.url;
var image = this.image;
var loadEvent = this.loadEvent;
addListener(this.image, ‘load’, function(e){
if(loadEvent != [...]

作者: shooting 分类: zencart项目, 全部文章, 学习笔记 标签: , , ,

一个好用的javascript日历-spiffyCal

2009年7月16日
没有评论

在做zencart二次开发的时候发现的一个javascript，特收藏一下
使用代码很简单
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Calendar</title>
<link rel=”stylesheet” type=”text/css” href=”spiffyCal/spiffyCal_v2_1.css”>
<script type=”text/javascript” src=”spiffyCal/spiffyCal_v2_1.js”></script>
<script type=”text/javascript”>
var dateAvailable = new ctlSpiffyCalendarBox(“dateAvailable”, “new_product”, “products_date_available”,”btnDate1″,””);
</script>
</head>
<body>
<div id=”spiffycalendar” class=”text”></div>
<form name=”new_product”>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”4″>
<tr class=”dataTableRow”>
<td align=”right”>上架日期：<br /><small>(YYYY-MM-DD)</small></td>
<td align=”left”>&nbsp;<script type=”text/javascript”>dateAvailable.writeControl(); dateAvailable.dateFormat=”yyyy-MM-dd”;</script> </td>
</tr>
</table>
</form>
</body>
</html>
spiffyCal.zip下载

作者: shooting 分类: 全部文章, 学习笔记 标签: , , ,

javascript:文件类型检验小案例

2009年5月31日
没有评论

例如允许上传的文件类型有 gif,jpg,jpeg,bmp,png;
通过一个输入框可以输入文件类型，但必须都是合法的
例如可以输入gif|bmp,jpg|png|gif等等
通过js在客户端检测的代码如下
<script language=”javascript”>
function test(str)
{
type=”gif|jpg|jpeg|bmp|png”;//合法类型
//str=”gif|jpg|bmp”
ar_type=type.split(“|”);
ar_str=str.split(“|”);
for(istr in ar_str)
{
flag = false;
for(itype in ar_type)
{
if(ar_str[istr]==ar_type[itype])
{
flag=true;
continue;
}
}
if (flag==false)break;
};
if(!flag) alert(“文件类型不合法!”);
return false;
}
</script>
<form name=”form1″>
<INPUT TYPE=”text” NAME=”strt”><INPUT TYPE=”submit” onclick=test(form1.strt.value)>
</form>

作者: shooting 分类: 全部文章, 学习笔记 标签: , ,

有关javascript 的onmouseout事件

2009年5月22日
没有评论

相信很多人都碰到过，以前我也碰到过，那是为了做一个弹出菜单，最后还是用css搞定的。就那天又碰到同样的问题，找了半天资料，终于知道了究竟。
文档中onmouseout事件的定义是

onmouseout 事件会在鼠标指针移出指定的对象时发生。

支持改时间的html标签也很多有
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
可是什么叫onmouseout到底在什么情况下被出发呢？举个简单的例子：
<div onmouseout=”javascript:this.style.display=’none’” style=”width:500px;height:300px;background-color:#ccc;”><a href=”#”>test</a></div>
可以做个小实验，可以发现，鼠标移出div时却是触发了onmouseout事件，div被隐藏了，可是在div内部，当鼠标移动到test的链接上时，div却也被隐藏了，相信原因很明了，即使在div内部，当鼠标进入其内部的对象时，也会触发div的onmouseout事件，再做个试验，把test的链接去掉，也就是div内部只剩下纯文本，这是鼠标移到文字上，没有反应。。。
解决办法：很简单，给div再加个事件onmouseover，因为鼠标在进入子对象同时也会触发div的onmouseover事件，上面的例子改为这样就可以解决问题：
<div [...]

作者: shooting 分类: 全部文章, 学习笔记 标签: ,

javascript给html对象绑定一个带参数的方法

2008年11月22日
没有评论

javascript中经常会碰到动态为html对象注册事件的问题，比如一个简单的例子：

function clickevent()
{
alert(“my message!”);
}

object.onclick=clickevent(msg)其实注册事件时赋值符号(=)后应该是函数的引用，也就是函数名，所以只能用object.onclick=clickevent 可是如果要想这个事件驱动的函数带上参数怎么办呢，这时候可以再创建一个无参数的新函数，新函数中执行带参数的函数就行了，很简单如下
object.onclick=function(){clickevent(msg);} 就可以了。
也可以定义一个函数
function cleckevent2()
{
return function(){alert(msg);}
}
object.onclick=clickevent2
其实原理还是一样的。

作者: shooting 分类: 全部文章, 学习笔记 标签: ,