JS常用
[一篮饭特稀原创，转载请注明出处http://www.cnblogs.com/wanghafan/archive/2012/02/15/2352126.html]
--Jquery Ajax 传输 特殊字符
View Code
1 Jquery $.Ajax 传输包含<>之类的html特殊字符时是无法进入请求页面的，解决方法入下：tempStr是一个"<table>...</table>"的串。
2
3 $.ajax({
4 type: "POST",
5 url: "../Control/Ajax_Excel.aspx",
6 data: {htmlStr:escape(tempStr)},
7 success: function(data)
8 {
9 }
10 });
11 public partial class Control_Ajax_Excel : System.Web.UI.Page
12 {
13 protected void Page_Load(object sender, EventArgs e)
14 {
15 string HtmlStr = Request.Params["htmlStr"] == null ? string.Empty : Server.UrlDecode(Request.Params["htmlStr"].ToString());
16 ...
17 }
18
19 }
--Jquery Ajax 被 缓存 导致无法进入$.ajax的url页面断点问题的研究和解决方法
View Code
1 经过尝试，发现未设置$.ajax的type="Post"，而默认ajax的type="Get"这就导致旧数据被缓存起来，从而需要清空IE缓存后再ajax页面设置断点才能进入的原因！因此，在使用$.ajax时务必设置type="POST"
2 附上<Jquery AJAX POST和GET区别>http://fengyan0124.blog.163.com/blog/static/11733439120104151238789/
3
4 1:GET访问 浏览器 认为 是等幂的
5 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]
6 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果
7 POST则 认为是一个 变动性 访问 （浏览器 认为 POST的提交 必定是 有改变的）
8 防止 GET 的 等幂 访问 就在URL后面加上 ？+new Date();，[总之就是使每次访问的URL字符串不一样的]
9 设计WEB页面的时候 也应该遵守这个原则
10 2:一.谈Ajax的Get和Post的区别
11 Get方式:
12 用get方式可传送简单数据，但大小一般限制在1KB下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是，它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。
13 Post方式:
14 当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。
15 总之，GET方式传送数据量小，处理效率高，安全性低，会被缓存，而POST反之。
16 使用get方式需要注意：
17 1 对于get请求（或凡涉及到url传递参数的），被传递的参数都要先经encodeURIComponent方法处理.例：var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent
18 (content)+"&id=1" ;
19 使用Post方式需注意：
20 1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量. 通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。例：
21 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
22 2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18，注意var name=update.php?
23 abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
24 3.参数在Send(参数)方法中发送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null);
25 4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"];
--Table2Json 和 DataTable2Json
View Code
1 function Table2Json(tableid) {
2
3 var txt = "[";
4 var table = document.getElementById(tableid);
5 var row = table.getElementsByTagName("tr");
6 var col = row[0].getElementsByTagName("td");
7 for(var j = 1; j < row.length; j++) {
8 var r = "{";
9 for(var i = 0; i < col.length; i++) {
10 var tds = row[j].getElementsByTagName("td");
11 r += "\""+ col[i].innerHTML + "\"\:\""+ tds[i].innerHTML + "\",";
12 }
13 r = r.substring(0, r.length - 1)
14 r += "},";
15 txt += r;
16 }
17 txt = txt.substring(0, txt.length - 1);
18 txt += "]";
19 returntxt;
20 }
21
22 public static string DataTable2Json(DataTable dt)
23 {
24 StringBuilder JsonString = new StringBuilder();
25 if (dt != null && dt.Rows.Count > 0)
26 {
27 JsonString.Append("[ ");
28 for (int i = 0; i < dt.Rows.Count; i++)
29 {
30 JsonString.Append("{ ");
31 for (int j = 0; j < dt.Columns.Count; j++)
32 {
33 if (j < dt.Columns.Count - 1)
34 {
35 JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
36 }
37 else if (j == dt.Columns.Count - 1)
38 {
39 JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
40 }
41 }
42 if (i == dt.Rows.Count - 1)
43 {
44 JsonString.Append("} ");
45 }
46 else
47 {
48 JsonString.Append("}, ");
49 }
50 }
51 JsonString.Append("]");
52 return JsonString.ToString();
53 }
54 else
55 {
56 return null;
57 }
58 }
--JS 双击 单元格 改变 控件
View Code
1 //#region 单元格改变输入
2 function tabin()
3 {
4 $.each($('#tab_Single tr:gt(0)'),function(){
5 $(this).children().eq(8).click(function(){
6 if($(this).find('input')!=null & $(this).children().attr("tagName")!='INPUT'){
7 $(this).html('<input type=\'text\' value=\''+$(this).html()+'\' onfocusout=\'tabout(this);\' style=\'width:'+($(this).width()-10)+'px;text-align:center\'/>');
8 $(this).find('input').focus();//加上这句防止在不同单元格切换中出现移开无法复原的bug
9 }
10 });
11 });
12 }
13 //#endregion
14
15
16 //#region 离开单元格
17 function tabout(obj){
18 var reg = new RegExp("^([+-]?)\\d*\\.?\\d+$");
19 if($(obj).attr("tagName")=='INPUT')
20 {
21 var val=$(obj).val();
22 if(!reg.test(val))
23 {
24 val=0;
25 }
26 $(obj).parent().html(val);
27 }
28 }
29 //#endregion
--JQuery2DOM DOM2JQuery
View Code
1 1、DOM对象转jQuery对象
2 普通的Dom对象一般可以通过$()转换成jQuery对象。
3
4 如：$(document.getElementById("msg"))
5 返回的就是jQuery对象，可以使用jQuery的方法。
6
7 2、jQuery对象转DOM对象
8 由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。
9 如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]
10
11 这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。
12
13 以下几种写法都是正确的：
14 $("#msg").html();
15 $("#msg")[0].innerHTML;
16 $("#msg").eq(0)[0].innerHTML;
17 $("#msg").get(0).innerHTML;
--Json 使用
View Code
1 $.getJSON("url，{url参数1：url参数1值，url参数2：url参数2值,...}，载入成功时执行的回调函数")
2
3 url："GISQueryControl.aspx"
4
5 data：{action:'ClickQuery',pegcode:strPegCode,ShowDiv:strDivId}
6
7 function OnClickQueryCallBack(data,textStatus)
8 {
9 if(textStatus=="success")
10 {
11 var htmlStr ;
12 if(typeof(data)!="undefined"&&data!=null&&data.length>0)
13 {
14 htmlStr="<table>";
15 for(i=0;i<data.length;i++)
16 {
17 htmlStr+= "<tr class=\"TR_BG\"><td>"+data[i].PegPipCode+"</td></tr>";
18 }
19 htmlStr += "</table></div>";
20 document.getElementById("TipdivCtrl").innerHTML = htmlStr;
21 }
22 }
23 }
24
25 运行过程：
26
27 传给页面：$.getJSON
28 处理的是一个对象{XX:xx,YY:yy,ZZ:zz}
29
30 页面获取传来的对象：
31 string XX=Request[XX].ToString();
32 string YY=Request[YY].ToString();
33 string ZZ=Request[ZZ].ToString();
34
35 页面处理过程：
36 处理和拼接content="....";
37
38 页面处理完结果content:
39 1.可能是一个对象(简单的数据)
40 content="{AA:aa,BB:bb,CC:cc}";
41 2.也可能是一个数组(复杂的数据)
42 content="[{AA:aa,BB:bb},{AA:cc,BB:dd}]";
43 Response.Write(content);
44
45 回调的时候：CallBack(data,textStatus)函数
46 1.如果是对象
47 var AA=data.AA;
48 var BB=data.BB;
49 var CC=data.CC;
50 2.如果是数组
51 var AA="";
52 var BB="";
53 for(i=0;i<data.length;i++)
54 {
55 AA+=data[i].AA;
56 BB+=data[i].BB;
57 }
58
59 e.g.大坝系统Json
60 单桩单管：data.length=1
61 {ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-2)',LastDate:'2010-03-03',LastData:'5.864',BaseData:'',PipeCode:'CY-2',MPCD:'2006'}
62
63 单桩多管：data.length=2
64 [
65 {ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-1)',LastDate:'2010-03-03',LastData:'6.923',BaseData:'',PipeCode:'CY-1',MPCD:'2005'},
66 {ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-2)',LastDate:'2010-03-03',LastData:'5.864',BaseData:'',PipeCode:'CY-2',MPCD:'2006'}
67 ]
68
69 多桩多管:data.length=5
70 [
71 {ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-1)',LastDate:'2010-03-03',LastData:'6.923',BaseData:'',PipeCode:'CY-1',MPCD:'2005'},
72 {ShowDivID:'divTipContent',PegCode:'1+700',MapX:'186',MapY:'89',PegPipCode:'1+700(CY-2)',LastDate:'2010-03-03',LastData:'5.864',BaseData:'',PipeCode:'CY-2',MPCD:'2006'},
73 {ShowDivID:'divTipContent',PegCode:'2+350',MapX:'218',MapY:'130',PegPipCode:'2+350(CY-1)',LastDate:'2010-03-03',LastData:'6.582',BaseData:'',PipeCode:'CY-1',MPCD:'2009'},
74 {ShowDivID:'divTipContent',PegCode:'2+350',MapX:'218',MapY:'130',PegPipCode:'2+350(CY-2)',LastDate:'2010-03-03',LastData:'5.606',BaseData:'',PipeCode:'CY-2',MPCD:'2010'},
75 {ShowDivID:'divTipContent',PegCode:'2+350',MapX:'218',MapY:'130',PegPipCode:'2+350(CY-3)',LastDate:'2010-03-03',LastData:'4.824',BaseData:'',PipeCode:'CY-3',MPCD:'2011'}
76 ]
--Jquery 常用方法
View Code
1.Window.onload 的JQuery方法
$(document).ready(function(){
//The Code!
})
可以简写为:
$(function(){
//The Code!
})
2.添加和去除Css类
$(function(){
$(“a.alink”).mouseover(function(){
this.addClass(“over”); //添加样式
}).mouseout(function(){
this.removeClass(“over”); //去除样式
})
})
3.动态切换样式
$funciotn(){
$(a.alink).click(function(){
This.toggleClass(“highline”); //动态切换,当有时去除,当没有时添加
})
}
4.给表格的偶数行添加样式
$(".mytable tr:even").addClass("tr1");
5.在选中元素上添加内容
如: $("p ").wrap(“<div class=’aa’></div >”);
原代码:<p>测试</p>
运行后效果: <div class=’aa’><p>测试</p></div >
6.直接获取、编辑内容
var sString = $(“p:frist”).text(); //获取第一个P标签的文本值
$(“p:last”).html(sString); //把值赋给最后一个P标签，以Html形式赋给，也就是说可以包含Html标签
7.页面元素有克隆
$(“img.eq(1)”).clone().appendTo($(“p”)); //将第一个图片克隆到所有的P标签中
8.事件的监听
$(“img”)
.bind (“click”,fnMyfun1=function(){ //添加事件1
$(“#show”).append(“事件1”); //在id为show的标签中添加文本
})
.bind (“click”,fnMyfun2=function(){//添加事件2
$(“#show”).append(“事件2”);
})
.bind (“click”,fnMyfun3=function(){//添加事件3
$(“#show”).append(“事件3”);
}) //可以同时添加多个事件
9.移除监听的事件
$(“input(type=button)”).click(function(){
$(“img”).unbind(“click”,” fnMyfun1”); //移除事件监听fnMyfun1
})
10.JQuery制作动画与特效――元素的显示与隐藏效果
$(“img”).hide();
$(“img”).hide(3000); //设置渐隐的时间，单位毫秒
$(“img”).show ();
$(“img”).show (3000);
还有更多特效如：fadeIn() fadeout() slideUp() slideDown()
--JS 根据 value 值 排序li
View Code
1 <html>
2 <head>
3 <title> 根据span value的值，排序li </title>
4 <script type="text/javascript">
5 //冒泡排序
6 function sortList(){
7 var lis=document.getElementById("oList").childNodes;
8 for (var i = 0; i < lis.length - 1; i++) {
9
10 for (var j = 0; j < lis.length - 1; j++) {
11
12 if(parseInt(lis[j].childNodes[0].value)>parseInt(lis[j+1].childNodes[0].value)){
13
14 lis[j].swapNode(lis[j+1]); //交换元素
15 lis=document.getElementById("oList").childNodes; //需要重新绑定对象
16
17 }
18 }
19 }
20 }
21 </script>
22 </head>
23
24 <body>
25 <ul id="oList">
26 <li><span value="3">三</span></li>
27 <li><span value="8">八</span></li>
28 <li><span value="2">二</span></li>
29 <li><span value="5">五</span></li>
30 <li><span value="7">七</span></li>
31 <li><span value="9">九</span></li>
32 <li><span value="4">四</span></li>
33 <li><span value="6">六</span></li>
34 <li><span value="1">一</span></li>
35 <li><span value="10">十</span></li>
36 </ul>
37 <INPUT TYPE = button VALUE = "Swap List" onclick = "sortList()">
38 </body>
39 </html>
--JS 向服务端提交数据
View Code
1 1.少量数据（编号之类）--- Ajax提交
2
3 <!--准备提交页面-->
4
5 $.ajax({
6
7 type: "POST",
8
9 url: "../Control/Ajax_Excel.aspx",
10
11 data: {htmlStr:escape(tempStr)},
12
13 success: function(data)
14
15 {
16
17 }
18
19 });
20
21 2.大量数据（表格之类）---Form提交
22
23 <!--准备提交页面-->
24
25 <form id="form1" runat="server" method="post">
26
27 <asp:HiddenField ID="hid_tempStr" runat="server" /> <!--用一个隐藏域来存储复杂大量的HTML表格数据-->
28
29 </form>
30
31 <script type="text/javascript">
32
33 $(function () {
34
35 $('#btn_Excel').click(function () {
36
37 $('#hid_tempStr').val(‘大量数据Html表格之类’);
38
39 document.form1.action="../Control/Ajax_Excel.aspx";//指定提交到其他页面
40
41 document.form1.submit();
42
43 document.form1.action="../StaAnalyse/ProjManage.aspx";//提交完需要反馈本身，否则action变化，这样可以使得其他的服务端控件继续可用
44
45 });
46
47 });
48
49 </script>
50
51 <!--Web.config-->
52
53 <system.web>
54
55 <httpRuntime requestValidationMode="2.0" /> <!--防止报错-->
56
57 <pages validateRequest="false"/> <!--防止报错-->
58
59 </system.web>
60
61 <!--提交到的页面-->
62
63 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Excel.aspx.cs" Inherits="Control_Ajax_Excel" EnableViewStateMac="false" %> <!--防止报错-->
64
65 <!--提交到的页面后台代码-->
66
67
68 public partial class Control_Ajax_Excel : System.Web.UI.Page
69
70 {
71
72 protected void Page_Load(object sender, EventArgs e)
73
74 {
75
76 string HtmlStr=Request.Params["hid_tempStr"]==null?string.Empty:Server.UrlDecode(Request.Params["hid_tempStr"].ToString());
77
78 ......
79
80 }
81
82 }
--JS 导出 Excel
View Code
1 tempStr是html的table，类似：<TABLE id=tabReport class=tb_Content border=1>......</TABLE>
2 方法一：
3 $('#btn_Excel').click(function () {
4
5 var newWin = window.open();
6 newWin.document.write(tempStr);
7 newWin.document.close();
8 newWin.document.execCommand('saveas',true,'导出.xls');
9 newWin.window.close();
10
11 ｝
12 但是方法一会在过程中弹出新页面，很丑，于是我进行如下改进。在页面放一个0px的iframe即可解决。
13 方法二：
14 $('#btn_Excel').click(function () {
15 ifra_Excel.document.body.innerHTML=tempStr;
16 ifra_Excel.document.write(tempStr);
17 ifra_Excel.document.execCommand('saveas',true,'导出.xls');
18
19 ｝
20 <iframe id="ifra_Excel" style="width:0px;height:0px;border:0px"></iframe>
--JS 合并制定列相同值单元格
View Code
1 mergeRowsByColumn(document.getElementById('tabReport'),23); // 表格ID='tabReport',需要合并的列=23列
2
3 function mergeRowsByColumn(tableObj,columnIndex)
4 {
5 for(var i=0;i<tableObj.rows.length-1;i++)
6 {
7 var td1=tableObj.rows[i].cells[columnIndex];
8 for(var j=i+1;j<tableObj.rows.length;j++)
9 {
10 var td2=tableObj.rows[j].cells[columnIndex];
11 if(td1.innerHTML==td2.innerHTML)
12 {
13 td1.rowSpan++;
14 tableObj.rows[j].deleteCell(columnIndex);
15 i++;
16 }
17 else
18 {
19 break;
20 }
21 }
22 }
23 }
--算术运算 计算 保留2位小数
View Code
1 function cale()
2 {
3 var EstimatedRatio=$('#tb_EstimatedRatio').val();
4 var EstimatedMonney=$('#tb_EstimatedMonney').val();
5 if(EstimatedRatio.replace(/(^\s*)|(\s*$)/g, "")=='') EstimatedRatio=0;
6 if(EstimatedMonney.replace(/(^\s*)|(\s*$)/g, "")=='') EstimatedMonney=0;
7 $('#tb_EstimatedCost').val((parseFloat(EstimatedRatio)*parseFloat(EstimatedMonney)).toFixed(2));
8 }
--JS eval
View Code
1 功能：把字符串解析为js可以辨认的代码
2
3 e.g.
4
5 前提：
6
7 data是一个Json: [{Key:1,TypeName:AA},{Key:2,TypeName:AA},{Key:3,TypeName:BB}]
8
9 //自定义剔除Json列col连续且重复数据
10 function getSingles(data,col)
11 {
12 var tmp = "";
13 var arr=[];
14 var single="data[i]."+col;
15 for(var i=0;i<data.length;i++)
16 {
17 if(i==0)
18 {
19 tmp = eval(single);
20 arr.push(eval(single));
21 }
22 else
23 {
24 if(tmp!=eval(single))
25 {
26 tmp = eval(single);
27 arr.push(eval(single));
28 }
29 }
30 }
31 return arr;
32 }
33
34 调用：
35
36 getSingles(data,"TypeName");
37
38 结果：
39
40 返回一个数组[AA,BB]
--Json2Str Str2Json
View Code
1 1、Str转Json
2 var str="[{key:1,value:1},{key:2,value:2}]";
3 state = eval(str);
4 for(i=0;i<state.length;i++)
5 {
6 state[i].value;
7 }
8
9 2、Json转Str
10 function json2Str(o) {
11 var arr = [];
12 var fmt = function(s) {
13 if (typeof s == 'object' && s != null) return json2str(s);
14 return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;
15 }
16 for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));
17 return '{' + arr.join(',') + '}';
18 }
--JS 获取鼠标位置
View Code
1 //获取鼠标位置
2 function mousePosition(ev)
3 //#region
4 {
5 if(ev.pageX || ev.pageY)
6 {
7 return {x:ev.pageX, y:ev.pageY};
8 }
9 return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};
10 }
11 //#endregion
12
13 调用:
14 var ev = ev || window.event;
15 var mousePos = mousePosition(ev);
16 alert(mousePos.x+mousePos.y);
--JS 改变background
View Code
1 function changeBgImage(obj){
2 obj.style.cssText="background:url('2.gif') no-repeat 2 3";
3 }
--JS 字符串拼接效率
View Code
1 <script>
2 function code1(){
3 var str = '';
4 var startDate = new Date();
5 for(i=0;i<50000;i++){
6 str+='abc';
7 }
8 var endDate = new Date();
9 alert(endDate-startDate);
10 }
11
12 function code2(){
13 var startDate = new Date();
14 var arr = [];
15 for(i=0;i<50000;i++){
16 arr.push('abc');
17 }
18 var str = arr.join('');
19 var endDate = new Date();
20 alert(endDate-startDate);
21 }
22 </script>
23 <BODY>
24 <script>
25 code1();
26 code2();
27 </script>
28 </BODY>
29 上面的代码分别在IE6和FireFox下执行结果如下：
30 CODE1 CODE2
31 IE6 1390 172
32 FF 4 7
--JS 控制textarea的maxLength
View Code
1 textarea标签虽然有maxLength属性，但是它并不管用，所以只能自己控制，
2 下面的例子中我的思路是：
3 在textarea中输入内容后就判断是否超出了maxLength，如果超出就按照maxLength截取textare的值，有个问题，如果用鼠标来拷贝粘贴就没法调用判断maxLength的方法，解决办法就是当textarea获取焦点时把鼠标右键失效，失去焦点时再恢复鼠标右键
4
5 这个方法从功能上解决了textarea的maxLength问题，但还不是很完美，在输入超过maxLength的字符后光标会有闪烁，因为是截取回填，没有像input的maxLength那样真正不让输入，今天一时也想不到好办法，以后找到再补充进来。
6
7 <html>
8
9 <head>
10
11 <title></title>
12 <script type="text/javascript">
13
14 var textarea_maxlen = {
15 isMax : function (){
16 var textarea =
17 document.getElementById("area");
18 var max_length = textarea.maxLength;
19 if(textarea.value.length > max_length){
20 textarea.value =
21 textarea.value.substring(0, max_length);
22 }
23 },
24 disabledRightMouse : function (){
25 document.oncontextmenu =
26 function (){ return false; }
27 },
28 enabledRightMouse : function (){
29 document.oncontextmenu = null;
30 }
31 };
32 </script>
33 </head>
34
35 <body>
36 <textarea id="area" maxLength="10"
37 onkeyup="textarea_maxlen.isMax()"
38 onfocus="textarea_maxlen.disabledRightMouse()"
39 onblur="textarea_maxlen.enabledRightMouse()"
40 rows="20" cols="100">
41 </textarea>
42 </body>
43
44 </html>
--JS DateDiff
View Code
1 function dateDiff(interval, date1, date2)
2 {
3 var objInterval = {'D' : 1000 * 60 * 60 * 24, 'H' : 1000 * 60 * 60, 'M' : 1000 * 60, 'S' : 1000, 'T' : 1};
4 interval = interval.toUpperCase();
5 var dt1 = Date.parse(date1.replace(/-/g, '/'));
6 var dt2 = Date.parse(date2.replace(/-/g, '/'));
7 try
8 {
9 return Math.round((dt2 - dt1) / eval('(objInterval.' + interval + ')'));
10 }
11 catch (e)
12 {
13 return e.message;
14 }
15 }
--JS 横向滚动广告
View Code
1 <HTML><HEAD><TITLE>无标题文档</TITLE>
2 <META http-equiv=Content-Type content="text/html; charset=gb2312">
3 <META content="MSHTML 6.00.2800.1264" name=GENERATOR>
4 <link href="css/css.css" rel="stylesheet" type="text/css">
5 </HEAD>
6 <BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">
7 <CENTER>
8 <TABLE
9 style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
10 cellSpacing=0 cellPadding=0 width=750 align=center border=0>
11 <TBODY>
12 <TR>
13 <TD>
14 <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
15 <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
16 <TBODY>
17 <TR>
18 <TD id=demo1 vAlign=top><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">
19 <tr>
20 <td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>
21 <td width="171" background="images/pic_bg.jpg"><div align="center">
22 <p>2</p>
23 </div></td>
24 <td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
25 <td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
26 <td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
27 <td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
28 <td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
29 <td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
30 <td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
31 <td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
32 </tr>
33 </table></TD>
34 <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>
35 <SCRIPT>
36 var speed3=25//速度数值越大速度越慢
37 demo2.innerHTML=demo1.innerHTML
38 function Marquee(){
39 if(demo2.offsetWidth-demo.scrollLeft<=0)
40 demo.scrollLeft-=demo1.offsetWidth
41 else{
42 demo.scrollLeft++
43 }
44 }
45 var MyMar=setInterval(Marquee,speed3)
46 demo.onmouseover=function() {clearInterval(MyMar)}
47 demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
48 </SCRIPT>
49 </TD></TR></TBODY></TABLE></TD></TR></TABLE>
50 </CENTER>
51 </BODY></HTML>
--JS 遍历checkbox getElementsByTagName
View Code
1 var chksStr="";
2 var inputs=document.getElementsByTagName("input");
3 var chkboxs;
4 for(var i=0;i<inputs.length;i++)
5 {
6 if(inputs[i].type == "checkbox")
7 {
8 if(inputs[i].checked)
9 {
10 chksStr+=","+inputs[i].id.substr(3,inputs[i].id.length);
11 }
12 }
13 }
14 chksStr =chksStr.substr(1,chksStr.length);
15 alert(chksStr);
--JS 验证控件输入合法性
View Code
1 js部分：
2 function revMobilePhone(obj)
3 {
4 var tt=/^\d{11}|\d{3,4}-\d{7,8}/;
5 if(!tt.exec(obj))
6 {
7 alert("联系电话格式不正确");
8 }
9 }
10 页面部分：
11 <asp:TemplateField HeaderText="联系电话?">
12 <EditItemTemplate>
13 <input id="tbMobilePhone" value='<%# Bind("MobilePhone") %>' runat="server" type="text" onblur="revMobilePhone(this.value)" />
14 </EditItemTemplate>
15 <ControlStyle Width="120px" />
16 <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="10px" Height="25px" />
17 <ItemTemplate>
18 <asp:Label ID="lbMobilePhone" runat="server" Text='<%# Bind("MobilePhone") %>' Font-Size="13px"></asp:Label>
19 </ItemTemplate></asp:TemplateField>
20 代码部分：
21
22 protected void gvShow_RowUpdating(object sender, GridViewUpdateEventArgs e)
23 {
24 ...
25 string mobilephone = ((HtmlInputText)(gvShow.Rows[e.RowIndex].Cells[0].FindControl("tbMobilePhone"))).Value.ToString().Trim();
26 ...
27 }
--JS QueryString
View Code
1 function QueryString()
2 {
3 //构造参数对象并初始化
4 var name,value,i;
5 var str=location.href;//获得浏览器地址栏URL串
6 var num=str.indexOf("?")
7 str=str.substr(num+1);//截取“?”后面的参数串
8 var arrtmp=str.split("&");//将各参数分离形成参数数组
9 for(i=0;i < arrtmp.length;i++)
10 {
11 num=arrtmp[i].indexOf("=");
12 if(num>0)
13 {
14 name=arrtmp[i].substring(0,num);//取得参数名称
15 value=arrtmp[i].substr(num+1);//取得参数值
16 this[name]=value;//定义对象属性并初始化
17 }
18 }
19 }
20
21 调用:
22 var abc = new QueryString();
23 alert(abc.id);//id是假如参数名称中有这个变量名
--JS妙用iframe根据内容自动调节高度
View Code
1 //放在子页
2
3 var GLOB_CONST_extraHeight_IE = 4; //using default value 4 of IE
4 var GLOB_CONST_extraHeight_NOIE = 16 ; //using default value 16 of FF
5 function autosize() {
6 try {
7 var iframe = parent.document.getElementsByTagName('iframe');
8 var len = iframe.length;
9 if (len <= 0) {
10 return;
11 }
12 var i;
13 if (iframe[0].contentDocument) { //for mozilla, firefox
14 for (i = 0; i < len; i ++) {
15 if (iframe[i].contentDocument == document) {
16 iframe[i].style.height=document.body.offsetHeight +GLOB_CONST_extraHeight_NOIE;
17 return;
18 }
19 }
20 }
21 else { // for IE
22 iframe = parent.document.frames;
23 len = iframe.length;
24 if (len <= 0) {
25 return;
26 }
27 for (i = 0; i < len; i ++) {
28 if (iframe[i].document == document) {
29 iframe[i].frameElement.style.height=document.body.scrollHeight+ GLOB_CONST_extraHeight_IE;
30 return;
31 }
32 }
33 }
34 }catch(err) {
35 alert(err.message);
36 }
37 }
38
39 //在子页的body添加onLoad="autosize()"即可
--JS图片预加载代码 显示loading
View Code
1 <html>
2 <head>
3 <style type="text/css">
4 div{border:#aaaaaa 3px solid;width:200px;padding:2px;margin:2px 9px;font-size:12px;line-height:22px;color:#999999;}
5 .ipt1{width:160px;font-size:12px;color:#1F6478;border:#999999 1px solid;margin-left:9px;}
6 .ipt2{border:#999999 1px solid;margin-left:6px;color:#666666}
7 p{margin:0px;padding:0px;background-image:url(http://www.codefans.net/jscss/demoimg/loading.gif);background-position:center;background-repeat:no-repeat;width:200px;height:200px;text-align:center;font-size:12px;color:#999999;line-height:26px;}
8 </style>
9 <script language="javascript" type="text/javascript">
10 function preloadimg(url,obj,ipt){
11 var img=new Image();
12 obj.innerHTML="<p>图片加载中...</p>";
13 img.onload=function(){obj.innerHTML="";obj.style.width=String(img.width)+"px";ipt.style.width=String(img.width-40)+"px";obj.appendChild(img);};
14 img.onerror=function(){obj.innerHTML="图片加载失败！"};
15 img.src=url; //img.src一定要写在img.onload之后，否则在IE中会出现问题
16 }
17 function show(){
18 var div=document.getElementsByTagName("div")[0];
19 var input=document.getElementsByTagName("input");
20 preloadimg("http://www.codefans.net/jscss/demoimg/wall8.jpg",div,input[0]);
21 input[0].onclick=function(){this.value=""};
22 input[1].onclick=function(){preloadimg(input[0].value,div,input[0]);}
23 }
24 window.onload=show;
25 </script>
26 <title>JavaScript图片预加载代码，显示loading</title>
27 </head>
28 <body>
29 <div></div>
30 <br />
31 <input type="text" value="将图片地址粘贴在这里" class="ipt1"/><input type="button" value="开始加载" class="ipt2"/>
32 </body>
33 </html>
--JS中substr和substring的区别
View Code
1 String.substr(N1,N2) 这个就是我们常用的从指定的位置(N1)截取指定长度(N2)的字符串;
2 String.substring(N1,N2) 这个就有点特别了，它是先从N1，N2里找出一个较小的值，然后从字符串的开始位置算起，截取较小值位置和较大值位置之间的字符串,截取出来的字符串的长度为较大值与较小值之间的差。
--判空
View Code
1 if(typeof(obj)!="undefined"&&obj!=null)
2 {
3 var aa=obj;
4 ...
5 }
--屏蔽右键
View Code
1 <script type="text/javascript">
2 function document.oncontextmenu() {
3 return false;
4 }
5 function nocontextmenu() {
6 if (document.all) {
7 event.cancelBubble = true;
8 event.returnvalue = false;
9 return false;
10 }
11 }
12 </script>
13 <body onload="document.oncontextmenu();">
--获取iframe的内容
View Code
1 document.frames['framX'].document.body.innerHTML
--JS处理中文url参数
View Code
1 window.location = encodeURI("FrmSearch.aspx?key=中文参数");
--控制CSS
View Code
1 document.getElementById('ServiceCnt').style.cssText='margin-top:15px;margin-left:15px;'
--JS过滤空格Trim
View Code
1 function trim(str)
2 {
3 return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
4 }
--JS 文本框自动过滤空格
View Code
1 <asp:TextBox ID="searchMobilePhone" runat="server" Width="80px" Text="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></asp:TextBox>
--JS 非常好用的Display
View Code
1 style='display:<%Response.Write((UserType=="个人")?"inline":"none");%>'
--JS 屏蔽右键
View Code
1 <script type="text/javascript">
2 function document.oncontextmenu() {
3 return false;
4 }
5 function nocontextmenu() {
6 if (document.all) {
7 event.cancelBubble = true;
8 event.returnvalue = false;
9 return false;
10 }
11 }
12 </script>
13 <body onload="document.oncontextmenu();">
--window.onload的调用写法
View Code
1 function bbb()
2 {
3 aaa();
4 }
5 window.onload=bbb;
--JS 时间
View Code
1 var now= new Date();
2 var month = now.getMonth()+1;
3 var day = now.getDate();
4 var hour = now.getHours();
5 var min = now.getMinutes();
6 if(month<10){month="0"+(now.getMonth()+1);}
7 if(day<10){day="0"+now.getDate();}
8 if(hour<10){hour="0"+now.getHours();}
9 if(min<10){min="0"+now.getMinutes();}
10 var nowTim = now.getFullYear()+"-"+month+"-"+day+" "+hour+":"+min+":00";
--JS窗口坐标
View Code
