javascript 表单 submit()错误
2010年10月18日
没有评论
做个简单的表单验证，调用表单对象的submit对象竟然出现submit is not a function这样的错误，花了半个晚上的时间，终于找出了原因
原来 js对submit关键字敏感，而我的表单中有按钮name=”submit”…
把所有的name=”submit”去掉一切正常
吐血。。。
存档
文章标签 ‘javascript’
纯javascript 单行向上滚动效果代码
2010年9月20日
没有评论
<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>
ajax 返回的innerHTML里面的javascript代码执行问题及Demo [转载]
2010年9月13日
没有评论
解决了一个困扰我许久的问题，用过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
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 ==> 页面对象高度（即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
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 != 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>
一个好用的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”> <script type=”text/javascript”>dateAvailable.writeControl(); dateAvailable.dateFormat=”yyyy-MM-dd”;</script> </td>
</tr>
</table>
</form>
</body>
</html>
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>
有关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 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>
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
其实原理还是一样的。
近期评论