Web开发常用技巧
本技巧已经通过IE、FF浏览器测试。
1.css实现输入框字符自动大写
<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>
演示：
| 姓名 | |
|---|---|
| 张三 | 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);
}
演示：
| 姓名 | |
|---|---|
| 张三 | 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();
}
演示：
13.页面背景图片固定
CSS：
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" />
示例：
