Web开发常用技巧

于 2015-11-29 20:39:16 发布
阅读量471 收藏
点赞数

本技巧已经通过IE、FF浏览器测试。

1.css实现输入框字符自动大写

1
< input  style="text-transform:uppercase" />

演示： 

2.页面居中html/css

1
2
3
4
5
6
7
8
9
10
11
12
<! 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 >
< style  type="text/css">
     body{width:960px;margin:0 auto;}
     div{height:100px;background-color:#ADCF73;}
</ style >
</ head >
< body >
< div  id="wrapper">test</ div >test
</ body >
</ html >

注意：ie6必须加入第一行<!DOCTYPE...

ie5这样写不行，必须这样写:body{text-align:center;}#wrapper{width:960px;margin:0 auto;}

3.单击tr选中radio button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< table  border="1">
     < tr >< th >姓名</ th >< th >Email</ th ></ tr >
     < tr  onclick="chkUser(this);">
         < td >< input  type="radio" name="employee" value="1" />张三</ td >
         < td >zhangsan@xxx.com</ td >
     </ tr >
     < tr  onclick="chkUser(this);">
         < td >< input  type="radio" name="employee" value="1" />李四</ td >
         < td >lisi@xxx.com</ td >
     </ tr >
</ table >
< script  type="text/javascript">
<!--
      function chkUser(obj) { obj.cells[0].childNodes[0].checked = true; }
//-->
</ script >

演示：

姓名 Email
张三 zhangsan@xxx.com
李四 lisi@xxx.com

4.倒计时JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type= "text/javascript" >
function  count() {
     var  now = new  Date();
     var  y = now.getYear();
     var  m = now.getMonth() + 1;
     var  d = now.getDate();
     var  h = now.getHours();
     var  n = now.getMinutes();
     var  s = now.getSeconds();
  
     var  time = new  Date( '9999' , '1' , '1' , '0' , '0' , '00' );
     var  temp = new  Date(y, m, d, h, n, s);
     var  diff = (time.valueOf() - temp.valueOf()) / 1000;
     setTimeout( 'count()' , 1000);
     document.getElementById( 'leaveTime' ).innerHTML = getLeaveTimeString(diff);
}
function  getLeaveTimeString(ms) {
     if  (ms <= 0) return  '' ;
     var  str = '9999年元旦倒計時：' ;
     if  (ms > 86400) {
         str = str + String(Math.floor(ms / 86400)) + '天' ;
         ms = ms % 86400;
     }
     if  (ms > 3600) {
         str = str + String(Math.floor(ms / 3600)) + '小时' ;
         ms = ms % 3600;
     }
     if  (ms > 60) {
         str = str + String(Math.floor(ms / 60)) + '分' ;
         ms = ms % 60;
     }
     str = str + String(ms) + '秒' ;
     return  str;
}
</script>
<span id= "leaveTime" ></span>
<script type= "text/javascript" >count();</script>

5.对话框

方式一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//p1.htm
function  selData() {
     var  url = 'p2.htm' ;
     var  rtnVal = openWin(url, 600, 500);
     alert(rtnVal);
}
function  openWin(url, width, height) {
     return  window.showModalDialog(url, this , 'dialogWidth:'  + width + 'px;dialogHeight:'  + height + 'px;' );
}
 
//p2.htm
function  closeWin() {
     window.returnValue = 'return value.' ;
     window.close();
}

方式二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//p1.htm
function  selData() {
     var  url = 'p2.htm' ;
     openWin(url, 600, 500);
}
function  callback(rtnVal) {
     alert(rtnVal);
}
function  openWin(url, width, height) {
     return  window.showModalDialog(url, this , 'dialogWidth:'  + width + 'px;dialogHeight:'  + height + 'px;' );
}
 
//p2.htm
function  closeWin() {
     window.dialogArguments.callback( 'return value.' );
     window.close();
}

6.提交表单等待信息

1
2
3
4
5
6
7
8
9
10
11
12
function  showMessage() {
     document.forms[0].style.display = 'none' ;
     if  (!document.getElementById( 'waitMessage' )) {
         var  div = document.createElement( 'DIV' );
         div.id = 'waitMessage' ;
         div.className = 'message' ;
         div.innerHTML = '资料处理中﹐请稍等...' ;
         document.body.insertBefore(div, document.body.firstChild);
     } else  {
         document.getElementById( 'waitMessage' ).style.display = 'block' ;
     }
}

演示:

7.去掉字符串左右空格

使用方式：document.getElementById('txt').value.trim();

1
2
3
String.prototype.trim = function () {
     return  this .replace(/^\s+|\s+$/g, '' );
}

8.格式化日期

使用方式:(new Date()).format('yyyy/mm/dd');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Date.prototype.format = function (formatStr) {  
     var  str = formatStr;
     var  y, m, d, h, n, s;
     y = this .getYear();
     m = this .getMonth() + 1;
     d = this .getDate();
     h = this .getHours();
     n = this .getMinutes();
     s = this .getSeconds();
     str = str.replace(/yyyy|YYYY/, y);
     str = str.replace(/yy|YY/, (y % 100) > 9 ? (y % 100) : '0'  + (y % 100));
     str = str.replace(/mm|MM/, m > 9 ? m : '0'  + m);
     str = str.replace(/m|M/g, m);
     str = str.replace(/dd|DD/, d > 9 ? d : '0'  + d);
     str = str.replace(/d|D/g, d);
     str = str.replace(/hh|HH/, h > 9 ? h : '0'  + h);
     str = str.replace(/h|H/g, h);
     str = str.replace(/nn|NN/, n > 9 ? n : '0'  + n);
     str = str.replace(/n|N/g, n);
     str = str.replace(/ss|SS/, s > 9 ? s : '0'  + s);
     str = str.replace(/s|S/g, s);
     return  str;
}

9.添加删除Table行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function  addRow(tb) {
     var  curTb = document.getElementById(tb);
     var  row = curTb.insertRow(curTb.rows.length);
     if  (row) {
         var  cell = row.insertCell(0);
         cell.innerHTML = '<input name="delTR" type="button" value="删除" onclick="delRow(this);" />王五' ;
         cell = row.insertCell(1);
         cell.innerHTML = 'wangwu@xxx.com' ;
     }
}
function  delRow(obj) {
     var  curTr = obj.parentNode.parentNode;
     var  curTb = curTr.parentNode;
     curTb.deleteRow(curTr.rowIndex);
}

演示： 

姓名 Email
张三 zhangsan@xxx.com
李四 lisi@xxx.com

10.全选/反选

1
2
3
4
5
6
7
8
9
10
11
12
function  chkAll(obj, name) {
     var  items = document.getElementsByName(name);
     if  (obj.checked) {
         for  ( var  i = 0; i < items.length; i++) {
             items[i].checked = true ;
         }
     } else  {
         for  ( var  i = 0; i < items.length; i++) {
             items[i].checked = false ;
         }
     }
}

演示：  
   

11.显示/隐藏

1
2
3
4
5
6
7
8
9
10
function  expand(obj, id) {
     var  elem = document.getElementById(id);
     if  (obj.innerHTML == '隐藏' ) {
         elem.style.display = 'none' ;
         obj.innerHTML = '显示' ;
     } else  {
         elem.style.display = 'block' ;
         obj.innerHTML = '隐藏' ;
     }
}

演示：

隐藏
Test value

12.运行代码

1
2
3
4
5
6
7
function  runCode(id) {
     var  code = document.getElementById(id).value;
     var  newWin = window.open( '' , '' , '' );
     newWin.opener = null ;
     newWin.document.write(code);
     newWin.document.close();
}

演示：  

13.页面背景图片固定

CSS：

1
body{ background : #fff  url (bg.jpg) no-repeat  fixed  right  bottom ;}

14.JS给TextBox赋值，并触发TextBox事件

1
2
3
< input  type="text" id="txt1" />
< input  type="text" id="txt2" onpropertychange="document.getElementById('txt1').value='Hello '+this.value;" />
< input  type="button" onclick="document.getElementById('txt2').value='world';" value="Submit" />

示例：

 

分类:  04 Web技术
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值