Web开发常用技巧

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

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

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

演示：

2.页面居中html/css

<!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

<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

<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.对话框

方式一：

//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();
}

方式二:

//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.提交表单等待信息

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();

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

8.格式化日期

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

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行

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.全选/反选

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.显示/隐藏

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.运行代码

function runCode(id) {
    var code = document.getElementById(id).value;
    var newWin = window.open('', '', ''); 
    newWin.opener = null;
    newWin.document.write(code);
    newWin.document.close();
}

演示： <html> <head> <title>Test Code</title> </head> <body> Test Code </body> </html>

13.页面背景图片固定

CSS：

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

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

<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" />

示例：