页面效果收集与整理
1、让英文字符串超出表格宽度自动换行
<td style="word-wrap:break-word; word-break:break-all;">
2、不要滚动条
让竖条没有:
<body style='overflow:scroll;overflow-y:hidden'>
</body>
让横条没有:
<body style='overflow:scroll;overflow-x:hidden'>
</body>
两个都去掉？更简单了:
<body scroll="no">
</body>
3、删除时确认
<a href='javascript:if(confirm("确实要删除吗?"))location="del.jsp"'>删除</a>
4、鼠标划过，表格变色
<tr onmouseover="this.bgColor='red'" onmouseout="this.bgColor=''">
5、屏蔽右键
<body oncontextmenu="return false;">
或
<script language="JavaScript">
<!--
if (window.Event)
document.captureEvents(Event.MOUSEUP);
function nocontextmenu()
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e)
{
if (window.Event)
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</script>
7、用正则强制输入数字
<input name="id2" type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")'>
8、禁止输入中文
<input type=text style="ime-mode: disabled ">
9、图片变灰,掠过恢复
<img src="/images/csdn.gif" style="filter:gray" onmouseover="this.style.filter=''">
10、定时跳转到其它页面
<meta http-equiv="refresh" content="5;URL=http://www.baidu.com">
11、TITLE换行
<a href=# title="第一行 第二行 第三行">title分行测试</a>
12、行背景色渐变
<table width="100%" height="100%">
<tr><td style="FILTER: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#EFF3FF', startColorstr='#94B2F7', gradientType='1')" ></td></tr>
</table>
说明：
笑脸(冒号D)
功能从startcolorstr渐变到endcolorstr
gardientType 是填充样式，可设。
13、title显示日期
把如下代码加入<body>区域中:
<script language="JavaScript1.2">
<!--hide
var isnMonth = new
Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDay = new
Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today = new Date () ;
Year=today.getYear();
Date=today.getDate();
if (document.all)
document.title="今天是: "+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]
//--hide-->
</script>
14、IE地址栏前换成自己的图标
<link rel="Shortcut Icon" href="favicon.ico">
15、可以在收藏夹中显示出你的图标
<link rel="Bookmark" href="favicon.ico">
16、最小化、最大化、关闭窗口 (IE)
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize">
</object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize">
</object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close">
</OBJECT>
<input type=button value="最小化" onClick="hh1.Click()"/>
<input type=button value="最大化" onClick="hh2.Click()"/>
<input type=button value="关闭" onClick="hh3.Click()"/>
17、在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()
18、检查一段字符串是否全由数字组成
<script language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
19、日期减去天数等于第二个日期
<script language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("08/08/2008",8)
</script>
20.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
21、改变表格的内容
把如下代码加入<body>区域中
<script ***script>
var arr=new Array()
arr[0]="一一一一一";
arr[1]="二二二二二";
arr[2]="三三三三三";
</script>
<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
<option value=a>改变第一格</option>
<option value=a>改变第二格</option>
<option value=a>改变第三格</option>
</select>
<table id=zz border=1>
<tr height=20>
<td width=150>第一格</td>
<td width=150>第二格</td>
<td width=150>第三格</td>
</tr>
</table>
23.不要列表前面的项目符号
style="list-style-type: none;color:blue"
24.a元素下划线定义
text-decoration:none; color:orange;
text-decoration:underline;
<td style="word-wrap:break-word; word-break:break-all;">
2、不要滚动条
让竖条没有:
<body style='overflow:scroll;overflow-y:hidden'>
</body>
让横条没有:
<body style='overflow:scroll;overflow-x:hidden'>
</body>
两个都去掉？更简单了:
<body scroll="no">
</body>
3、删除时确认
<a href='javascript:if(confirm("确实要删除吗?"))location="del.jsp"'>删除</a>
4、鼠标划过，表格变色
<tr onmouseover="this.bgColor='red'" onmouseout="this.bgColor=''">
5、屏蔽右键
<body oncontextmenu="return false;">
或
<script language="JavaScript">
<!--
if (window.Event)
document.captureEvents(Event.MOUSEUP);
function nocontextmenu()
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e)
{
if (window.Event)
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</script>
7、用正则强制输入数字
<input name="id2" type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")'>
8、禁止输入中文
<input type=text style="ime-mode: disabled ">
9、图片变灰,掠过恢复
<img src="/images/csdn.gif" style="filter:gray" onmouseover="this.style.filter=''">
10、定时跳转到其它页面
<meta http-equiv="refresh" content="5;URL=http://www.baidu.com">
11、TITLE换行
<a href=# title="第一行 第二行 第三行">title分行测试</a>
12、行背景色渐变
<table width="100%" height="100%">
<tr><td style="FILTER: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#EFF3FF', startColorstr='#94B2F7', gradientType='1')" ></td></tr>
</table>
说明：
笑脸(冒号D)
功能从startcolorstr渐变到endcolorstr
gardientType 是填充样式，可设。
13、title显示日期
把如下代码加入<body>区域中:
<script language="JavaScript1.2">
<!--hide
var isnMonth = new
Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDay = new
Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today = new Date () ;
Year=today.getYear();
Date=today.getDate();
if (document.all)
document.title="今天是: "+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]
//--hide-->
</script>
14、IE地址栏前换成自己的图标
<link rel="Shortcut Icon" href="favicon.ico">
15、可以在收藏夹中显示出你的图标
<link rel="Bookmark" href="favicon.ico">
16、最小化、最大化、关闭窗口 (IE)
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize">
</object>
<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Maximize">
</object>
<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<PARAM NAME="Command" value="Close">
</OBJECT>
<input type=button value="最小化" onClick="hh1.Click()"/>
<input type=button value="最大化" onClick="hh2.Click()"/>
<input type=button value="关闭" onClick="hh3.Click()"/>
17、在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload()
18、检查一段字符串是否全由数字组成
<script language="Javascript"><!--
function checkNum(str){return str.match(//D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
19、日期减去天数等于第二个日期
<script language=Javascript>
function cc(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
cc("08/08/2008",8)
</script>
20.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
21、改变表格的内容
把如下代码加入<body>区域中
<script ***script>
var arr=new Array()
arr[0]="一一一一一";
arr[1]="二二二二二";
arr[2]="三三三三三";
</script>
<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
<option value=a>改变第一格</option>
<option value=a>改变第二格</option>
<option value=a>改变第三格</option>
</select>
<table id=zz border=1>
<tr height=20>
<td width=150>第一格</td>
<td width=150>第二格</td>
<td width=150>第三格</td>
</tr>
</table>
23.不要列表前面的项目符号
style="list-style-type: none;color:blue"
24.a元素下划线定义
text-decoration:none; color:orange;
text-decoration:underline;