shooting's sky » javascript http://anfirst.cn 专心每一天 Fri, 11 May 2012 04:49:32 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 javascript 表单 submit()错误 http://anfirst.cn/archives/983 http://anfirst.cn/archives/983#comments Mon, 18 Oct 2010 12:51:10 +0000 admin http://anfirst.cn/?p=983 做个简单的表单验证，调用表单对象的submit对象竟然出现submit is not a function这样的错误，花了半个晚上的时间，终于找出了原因

原来 js对submit关键字敏感，而我的表单中有按钮name=”submit”…

把所有的name=”submit”去掉一切正常

吐血。。。

]]> http://anfirst.cn/archives/983/feed 0 纯javascript 单行向上滚动效果代码 http://anfirst.cn/archives/981 http://anfirst.cn/archives/981#comments Mon, 20 Sep 2010 01:39:29 +0000 shooting http://anfirst.cn/?p=981 <style> *{margin:0;padding:0;} #scrollDiv {height:30px;overflow:hidden;position:relative;margin:50px;} #scrollUl {position:absolute;} #scrollUl li{height:30px;line-height:30px;} </style> 
<script type="text/javascript">
function scrollOneStep(obj)
{
var ul = document.getElementById(obj);
var li = ul.getElementsByTagName("li");
var li_move = li.item(0);
var line = 0 - parseInt(li_move.clientHeight);
var speed = 10;
var pix = 0;
t2 = setInterval(function(){
if(pix > line){
ul.style.top = ""+pix + "px";
pix --;
}else{
clearInterval(t2);
}
},speed);

ul.style.top += parseInt(ul.style.top)+30+"px";

ul.removeChild(li_move);
ul.appendChild(li_move);
ul.style.top = "0"

}

function scroll(obj)
{
var t= setInterval(function(){scrollOneStep(obj);},1000);
}
</script>

<div id="scrollDiv">
<ul id="scrollUl">
<li>164101***400</li>
<li>334205***400</li>
<li>164101***400</li>
<li>334205***400</li>
<li>164101***400</li>
<li>334205***400</li>
<li>164101***400</li>
</ul>
</div>
<script language="javascript"> scroll('scrollUl'); </script>
]]> http://anfirst.cn/archives/981/feed 0 ajax 返回的innerHTML里面的javascript代码执行问题及Demo [转载] http://anfirst.cn/archives/972 http://anfirst.cn/archives/972#comments Mon, 13 Sep 2010 08:57:44 +0000 shooting http://anfirst.cn/?p=972 解决了一个困扰我许久的问题，用过AJAX的人可能会知道，当把从服务器返回xhr.responseText的数据设定给innerHTML时， 里面的JS代码并不能够执行，查了很多资料，终于找到一个简单而且可行的办法，就是把JS代码封装到一个DIV中通过xhr.responseText打 包给innerHTML，然后把<script></script>标签扒下去，在通过eval()函数执行JS代码（思想转载 自这 里），这里以弹出对话框为例，示例如下：

<!–这是innerHTML的内容–>

<div id=”a”>

<script>

alert(“aa”);

<script>

</div>

<!–这是调用JS的主页内容–>

var pageInfo = xhr.responseText;

document.getElementById(“pageInfo”).innerHTML = pageInfo;

eval(document.getElementById(“aa”).innerHTML.replace(/<script>|<\/script>/,”)); //将<script>标签替换掉,这样才能被eval()函数执行

结果出现了显示”aa”的对话框！

但是问题又出现了，如果执行2句或者两句以上的JS代码就会出现错误了！

这样我们就可以把需要执行的多行JS代码封装成一个方法直接放到需要调用该JS代码的主页面里，然后再被调用的页面里写上这个方法名就可以了，这里 以弹出2个对话框为例，示例如下：

<!–这是innerHTML的内容–>

<div id=”a”>

<script>

doit();

<script>

</div>

<!–这是调用JS的主页内容–>

var pageInfo = xhr.responseText;

document.getElementById(“pageInfo”).innerHTML = pageInfo;

eval(document.getElementById(“aa”).innerHTML.replace(/<script>|<\/script>/,”)); //将<script>标签替换掉,这样才能被eval()

function doit(){

alert(“aa”);

alert(“bb”);

}

结果出现了”aa” “bb”两个对话框!

这样就完美解决了ajax 返回的innerHTML里面的javascript代码执行问题，一些复杂的JS函数都可以，而且一些jQuery的方法也可以哦！

这是在网上找的资料，依据以此，我写了例子来 验证：

Defalut.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”AjaxJsTestWeb._Default” %>

<!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 runat=”server”>
<title>无标题页</title>
<script language=”javascript” type=”text/javascript” >

function getRequest() {
http_request = false;
if (window.XMLHttpRequest) {
//对于Mozilla﹑Netscape﹑Safari等浏览器，创建XMLHttpRequest
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
//如果服务器响应的header不是text/xml，可以调用其它方法修改该header
http_request.overrideMimeType(‘text/xml’);
}
} else if (window.ActiveXObject) {
// 对于Internet Explorer浏览器，创建XMLHttpRequest
try {
http_request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
return http_request;
}
//获得Url 的responseText

function getResponseText(url)
{
http_request=getRequest();
http_request.open(‘GET’, url, false);
http_request.send(null);

if (http_request.readyState == 4)
{
// 收到完整的服务器响应
if (http_request.status == 200) {
//HTTP服务器响应的值OK
requestdoc = http_request.responseText;
//将服务器返回的字符串写到页面中ID为message的区域
}
else {
requestdoc = http_request.status;
}
}
return requestdoc;
}
//获得Url 的responseXML

//代码片段
function getResponseXml(url)
{
http_request=getRequest();
http_request.open(‘GET’, url, false);
http_request.send(null);

if (http_request.readyState == 4)
{
// 收到完整的服务器响应
if (http_request.status == 200) {
//HTTP服务器响应的值OK
requestdoc = http_request.responseXML;
//将服务器返回的字符串写到页面中ID为message的区域
}
else {
requestdoc = http_request.status;
}
}
return requestdoc;
}

function TestAjaxJs()
{
http_request=getRequest();
http_request.open(‘GET’, “containjsText.aspx”, false);
http_request.send(null);

if (http_request.readyState == 4)
{
// 收到完整的服务器响应
if (http_request.status == 200) {
//HTTP服务器响应的值OK
requestdoc = http_request.responseText;
//将服务器返回的字符串写到页面中ID为message的区域
}
else {
requestdoc = http_request.status;
}
}
// debugger;
document.getElementById(“divJsText”).InnerHTML=requestdoc;
alert( document.getElementById(“divJsText”).InnerHTML);
var str;
str=document.getElementById(“divJsText”).InnerHTML.replace(/<script language=’javascript’>|<\/script>/,”);
str=str.replace(/<\/script>/,”);

alert(str);
eval(str);
// document.write(document.getElementById(“divJsText”).InnerHTML);
return false;
}

</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<div id=”divJsText” ></div>
<asp:Literal ID=”ltrJsText” runat=”server”></asp:Literal><asp:Label ID=”lblJsText” runat=”server”></asp:Label>
<asp:Button ID=”btnAjax” runat=”server” Text=”Ajax请求返回带有JS脚本的文本 JS脚本执行”  OnClientClick=”return TestAjaxJs();”/>
</div>
</form>
</body>
</html>

ContainJsText.aspx.cs 代码页面

两种情况：

(1)多个JS语句

namespace AjaxJsTestWeb
{
public partial class ContainJsText : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder jsText = new StringBuilder();
jsText.AppendLine(“<script language=’javascript’>function doit(){alert(‘哈哈,我执行了啊!’);alert(‘哈哈,我再次执行了啊!’);} doit();</script>”);
Response.Write(jsText.ToString().Trim());
Response.End();
}
}
}

(2) 就一个js语句

namespace AjaxJsTestWeb
{
public partial class ContainJsText : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder jsText = new StringBuilder();
jsText.AppendLine(“<script language=’javascript’>alert(‘哈哈,我执行了啊!’)</script>”);
Response.Write(jsText.ToString().Trim());
Response.End();
}
}
}

转自 http://www.taotechinfo.com/collect/2010724/n807115732.html

]]> http://anfirst.cn/archives/972/feed 1 javascript 获取滚动条高度+常用js页面宽度与高度[转] http://anfirst.cn/archives/957 http://anfirst.cn/archives/957#comments Thu, 20 May 2010 08:27:47 +0000 shooting http://anfirst.cn/?p=957 /********************
* 取窗口滚动条高度
******************/
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 ==> 页面对象高度（即BODY对象高度加上Margin高）
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标 准要方便许多啊。

//////////////////////////////////////////////////////////////////////////////////////

网页可见区域宽:
document.body.clientWidth

网页可见区域高:
document.body.clientHeight

网页可见区域宽:
document.body.offsetWidth(包 括边线的宽)

网页可见区域高:
document.body.offsetHeight(包括边线的宽)

网页 正文全文宽:
document.body.scrollWidth

网页正文全文高:
document.body.scrollHeight

网 页被卷去的高:
document.body.scrollTop

网页被卷去的左:
document.body.scrollLeft

网 页正文部分上:
window.screenTop

网页正文部分左:
window.screenLeft

屏 幕分辨率的高:
window.screen.height

屏幕分辨率的宽:
window.screen.width

屏 幕可用工作区高度:
window.screen.availHeight

屏幕可用工作区宽度:
window.screen.availWidth

]]> http://anfirst.cn/archives/957/feed 0 javascript 图片loading的实现 http://anfirst.cn/archives/818 http://anfirst.cn/archives/818#comments Tue, 08 Sep 2009 10:03:57 +0000 shooting http://anfirst.cn/?p=818 我们在设计一些图片比较多的网页时，为了增强用户体验，希望图片加载的时候有个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 != null){
loadEvent(url, image);
}
}, false);
this.image.src = this.url;
},
getImage:function(){
return this.image;
}
};

function loadImage(objId,urls){
var loader = new ImageLoader(urls);
loader.loadEvent = function(url){
obj = document.getElementById(objId);
obj.src = url;
}
loader.load();
}

通过loadImage函数就可以为指定的图片添加加载过程，其中通过addListener 函数注册事件，使得在图片加载完成的时候能够自动替换掉loading.gif这个动画过渡图片。使用代码很简单

<img  id=”loading1″  src=”loading.gif”  />

<script language=”javascript”>

loadImage(“loading1″,”http://www.baidu.com/img/baidu_logo.gif”);

</script>

]]> http://anfirst.cn/archives/818/feed 2 一个好用的javascript日历-spiffyCal http://anfirst.cn/archives/747 http://anfirst.cn/archives/747#comments Thu, 16 Jul 2009 08:51:56 +0000 shooting http://anfirst.cn/?p=747 在做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下载

]]> http://anfirst.cn/archives/747/feed 0 javascript:文件类型检验小案例 http://anfirst.cn/archives/730 http://anfirst.cn/archives/730#comments Sun, 31 May 2009 08:05:19 +0000 shooting http://anfirst.cn/?p=730 例如允许上传的文件类型有 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>

]]> http://anfirst.cn/archives/730/feed 0 有关javascript 的onmouseout事件 http://anfirst.cn/archives/719 http://anfirst.cn/archives/719#comments Fri, 22 May 2009 06:54:41 +0000 shooting http://www.anfirst.cn/?p=719 相信很多人都碰到过，以前我也碰到过，那是为了做一个弹出菜单，最后还是用css搞定的。就那天又碰到同样的问题，找了半天资料，终于知道了究竟。
文档中onmouseout事件的定义是

  1. 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 onmouseout=”javascript:this.style.display=’none’” onmouseover=”javascript:this.style.display=’block’” style=”width:500px;height:300px;background-color:#ccc;”><a href=”#”>test</a></div>

]]> http://anfirst.cn/archives/719/feed 0 javascript给html对象绑定一个带参数的方法 http://anfirst.cn/archives/129 http://anfirst.cn/archives/129#comments Fri, 21 Nov 2008 21:50:00 +0000 shooting http://www.anfirst.cn/blog/?p=129 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

其实原理还是一样的。

]]> http://anfirst.cn/archives/129/feed 0