Web开发常用技巧
来源:互联网 发布:网络分销平台排行 编辑:程序博客网 时间:2024/05/16 14:41
本技巧已经通过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
>
演示:
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);
}
演示:
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技术
0 0
- Web开发常用技巧
- web开发常用小技巧
- web开发常用小技巧(上)
- web开发常用小技巧(下)
- web开发常用js小技巧
- Mobile Web前端开发系列-常用技巧
- web开发常用js功能性小技巧
- Web开发常用小技巧 -- JavaScript[不断添加中...]
- web常用开发技术 40种js技巧
- Web网站开发设计中常用的技巧
- Web网站开发设计中常用的技巧
- Web网站开发设计中常用的技巧
- 开发高Web应用程序常用优化性能的技巧
- 开发高Web应用程序常用优化性能的技巧
- WEB前端开发中一些常用技巧总结
- Web开发:需收藏的JavaScript常用技巧
- WEB页常用技巧
- Web设计常用技巧
- mysql数据备份与还原
- Android版本检测升级
- 击溃360手机卫士的三大防护
- 肉体才是人的神殿,不管在那里祭祀什么,它都应该更强韧、更美丽清洁。
- EOF与VC中的ctrl+z
- Web开发常用技巧
- 常用数据结构有哪些
- hdu 校赛 ACM组队安排 (递推)
- Java基础---图形用户界面GUI(一)
- 地理信息系统基础算法(一)判断点在线段上
- CSS HACK 兼容列表 Firefox, IE5, IE5.5, IE6, IE7, IE8
- 数据字节编码DBA--30
- 《代码整洁之道》-- 写代码时需要注意的命名技巧
- ACM组队安排 (DFS+计数原理)