Javascript应用技巧[教程]
1. 动态调整select
<select id=test size=3>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
<button onclick="up(test)">向上</button>
<script>
function up(obj)
{
if (obj.selectedIndex>0)
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
</script>
2. 实现select的细线边框
<span style="border:1px solid #000000; position:absolute; overflow:hidden"><select style="margin:-2px">
<option>1111</option>
<option>11111111111111</option>
<option>111111111</option>
</select></span>
3. 弹出窗口自动适应大小
<script>
function autoResize(src)
{
function resizeOpenWin()
{
var srcElem = event.srcElement
if (document.resized) return
window.setTimeout(function ()
{
window.resizeBy(srcElem.width-100, srcElem.height-100)
},1)
document.resized = true
}
var newbody = "<body style=margin:0px><script>"+resizeOpenWin.toString()+"</"+"script><img src="+src+" onreadystatechange=resizeOpenWin()></body>"
var newwin = window.open("", "", "width=100, height=100, toolbar=yes")
newwin.document.write(newbody)
newwin.document.close()
}
autoResize("http://www.imagegarden.net/photo/scan/view.php?url=/scan/084/21.jpg")
</script>
4. 捕获关闭按钮
<script>
window.onbeforeunload = function()
{
if (document.body.offsetWidth-50 < event.clientX && event.clientY<0)
return "是否关闭当前窗口"
}
</script>
5. 判断链接是否被访问
<style>
a {visited:false}
a:visited {visited:true}
</style>
<a href="###" onclick="alert(event.srcElement.currentStyle.visited);return false">link1</a>
<a href="abcd" onclick="alert(event.srcElement.currentStyle.visited);return false">link2</a>
6. expression 妙用
<script>
function test()
{
alert("expression function")
}
</script>
<style>
a {qiushuiwuhen:expression(this.onclick=test)}
</style>
<a href="javascript:;">expression</a>
7. 多彩链接
<style>
span {color: #FF6600}
a {color: #9299A6}
</style>
<a href="javascript:;"><span>link</span></a>
8. iframe 自动适应大小
<script>
function autoResize()
{
try
{
document.all["test"].style.height=test.document.body.scrollHeight
}
catch(e){}
}
</script>
<iframe id=test style="height:expression(1); aho:expression(autoResize())" src="\">
9. 用onmouseover、onmouseout 实现 onmouseenter 和 onmouseleave
onmouseover = if (!this.contains(event.fromElement)) {...}onmouseout = if (!this.contains(event.toElement)) {...}
10. 中文两端对齐
<DIV style="text-align:justify; text-justify:Distribute-all-lines;">搜易论坛搜易论坛</DIV>
11. 生成连续字符
<script>
alert(new Array(10).join("a"))
</script>
12. 强制图片载入
<img onerror="this.src=this.src" ...
13. 获取色盘颜色
<body>
<span style="background-color:buttonface" id=demo>buttonface</span>
<script>
var rng = document.body.createTextRange();
rng.moveToElementText(demo)
var bColor=rng.queryCommandValue("BackColor");
str=("000000"+bColor.toString(16)).match(/.{6}$/)
alert("#"+str.slice(-2)+str.slice(2,-2)+str.slice(2))
</script>
</body>
14. 不进行转义的字符串
<script>alert (/\n\r\t/.source)</script>
15. 判断日期是否合法
<script>
function isDate(strDate)
{
if (!strDate) return false
var date1 = new Array()
var date2 = null
try
{
date1[0] = strDate.match(/\d{4}/)
strDate = strDate.replace(date1[0],"")
date1[1] = parseInt(strDate.match(/\d+/g)[0])+1
strDate = strDate.replace(date1[1],"")
date1[2] = parseInt(strDate.match(/\d+/g))
date2 = new Date(date1.join("\/"))
return date1.join("\/") == date2.getYear() +"\/"+ (date2.getMonth()+1) +"\/"+ date2.getDate()
}
catch(e)
{
return false
}
}
alert(isDate("2003/01/01"))
alert(isDate("01/01/2003"))
alert(isDate("01-01-2003"))
alert(isDate("2003/21/01"))
alert(isDate("2003/01/01 20:00:00"))
</script>
16. 打开我的电脑，控制面板等
<a href="file:///::{20D04FE0-3AEA-1069-A2D8-08002B30309D}" target=_blank>我的电脑</a><br>
<a href="file:///c:/" target=_blank>本地C盘</a><br>
<a href="file:///d:/" target=_blank>本地D盘</a><br>
<a href="file:///c:/" target=_blank>本地E盘</a><br>
<a href="file:///::{208D2C60-3AEA-1069-A2D7-08002B30309D}" target=_blank>网上邻居</a><br>
<a href="file:///::{450D8FBA-AD25-11D0-98A8-0800361B1103}" target=_blank>我的文档</a><br>
<a href="file:///::{20D04FE0-3AEA-1069-A2D8-08002B30309D}/::{21EC2020-3AEA-1069-A2DD-08002B30309D}" target=_blank>控制面板</a><br>
<a href="file:///::{645FF040-5081-101B-9F08-00AA002F954E}" target=_blank>回收站</a><br>
17. 强制转为整型变量
<script>
alert (123|0)
alert (123.456|0)
alert ("abc"|0)
</script>
18. 把0-6的星期表示改为1-7表示的表示方法
<script>
for (var i=0; i<7; i++) alert(Math.ceil((i+7)%7.5))
</script>
19. 判断是否是工作日
<script>
alert(new Date().getDay()%6 ? "工作日" : "双休日")
</script>
20. 去除字符串首尾的空格
<script>
alert(" aaaa ".replace(/^\s*|\s*$/g, ""))
</script>
21. 获得本月的天数
<script>
alert(new Date(new Date().getYear(), new Date().getMonth()+1, 0).getDate())
</script>
22. 正则不匹配词组
不含"yes"或者"no":<br>
<script>
function d(s){document.write(s+"<br>")}
str=new Array("yes","no","auto","yseauto","sey","esyno");
for(i in str)
d(str[i].bold()+" : "+/^(y(?!es)|n(?!o)|[^yn])*$/.test(str[i]));
</script>
23. 使用模式窗口浏览网页
<script language=JavaScript>
showModalDialog("about:<iframe src=http://www.blueidea.com/bbswidth=100% height=100%></iframe>")
</script>
24. 随机重排数组
<script>
ars=[金,木,水,火,土,仁,义,礼,志,贤]
for (var i=0; i<10; i++)
document.write(ars.sort(function(){return Math.random( )*new Date%3-1})+"<br />")
</script>
25. 自动等分的Table
<style>
tr {
position: relative;
top: expression(-1*this.sectionRowIndex*(offsetHeight-2));
left: expression(this.sectionRowIndex*this.offsetWidth);
height: 100px;
}
td {
border: 1px solid buttonface;
font-size: 12px;
}
</style>
<table>
<tbody>
<tr><td><span CONTENTEDITABLE id="e">1111111</span></td></tr>
<tr><td><span>222</span></td></tr>
<tr><td><span>33333</span></td></tr>
<tr><td><span>4</span></td></tr>
</tbody>
<script>
otr = document.body.createTextRange()
otr.moveToElementText(document.all["e"])
otr.select()
e.focus()
</script>
</table>
26. 格式化数字
<script>
num = 1
len = 3
alert((new Array(len).join("0")+num).slice(-len))
</script>
27. 获得路径
<script>
function getURL()
{
var allPath = /^[\\\/]+/.test(filePath.value) ? filePath.value : currentPath.value + filePath.value
var pathArray = allPath.split(/[\\\/]+/)
var tmpArray = new Array
for (var i=0; i<pathArray.length; i++)
{
switch (pathArray[i])
{
case "." :
break
case ".." :
tmpArray.pop()
break
default :
tmpArray[tmpArray.length] = pathArray[i]
break
}
}
alert(tmpArray.join("\/"))
}
</script>
当前路径:<input id="currentPath" value="asp.net/xml/" /><br />
文件路径:<input id="filePath" value="./../w/../fs\r.g///if"/>
<button onclick="getURL()">getURL</button>
28. 清除删除滤镜后仍对Body的影响
<script for=window event=onload>
oldBody = document.body
newBody = document.createElement("BODY")
oldBody.style.filter="blendTrans(duration=1)"
oldBody.applyElement(newBody, "inside")
oldBody.swapNode(newBody)
oldBody.removeNode(true)
</script>
<div style="height: 1000px">
a
</div>
29. 接管alert
<script>
function window.alert(msg)
{
window.showModalDialog("about:"+msg)
}
alert("我是Alert")
</script>
30. 每次响应select选择
<script>
function change()
{
var src=event.srcElement
if ( !(event.clientX > src.offsetLeft &&
event.clientX < src.offsetLeft + src.offsetWidth &&
event.clientY > src.offsetTop &&
event.clientY < src.offsetTop+src.offsetHeight))
window.status = src.options[src.selectedIndex].text
}
</script>
<select onclick="change()">
<option>aaaaa</option>
<option>bbbbb</option>
<option>ccccc</option>
<option>ddddd</option>
</select>
31. 求出两组日期的相交的日期
<script>
var date1 = ["2003/1/1", "2004/5/6", "1998/1/2"]
var date2 = ["2003/1/1", "2008/12/1"]
var date3 = ["2003/2/2", "2008/12/1"]
var date4 = ["2003/1/1", "2004/5/6"]
function cmDate(d1, d2)
{
return d2.toString().match(new RegExp("("+d1.join("|")+")", "g"))
}
alert(cmDate(date1, date2))
alert(cmDate(date1, date3))
alert(cmDate(date1, date4))
</script>
32. 用图片替换上传文件框
<form action="javascript:alert(上传成功)" method="post" enctype="multipart/form-data">
<div style="position: absolute; top: 15px; filter: alpha(opacity=0); left: -26px;"><input id="upload" type="file" name="upload" size="1" /></div>
<input type="button" value="选择文件" onclick="upload.click()" />
<input type="submit" />
</form>
33. 同时显示多个 popup window
<script>
var popHTML = "<span onclick=var a = document.parentWindow.createPopup();var b = a.document.body;b.innerHTML = top.popHTML;a.show(5, 100, 180, 25, document.body);>popup window</span>"
document.write(popHTML)
</script>
34. 屏蔽快捷键
<script>
document.onkeydown = function()
{
event.keyCode=0
return false
}
document.onhelp = function()
{
return false
}
</script>
35. 正则表达式连接函数
<script for=window event=onload>
function getRelativeReg(reg)
{
var regStr = reg.source
var relaStr = regStr.match(/(\\\d+|\\.[^\\]*|[^\\]*)/g)
while (relaStr.length-1)
{
if (/^\\\d+$/.test(relaStr[1]))
{
relaStr[1] = "\\______rela:" + (parseInt(relaStr[1].match(/\d+/g)) - relaStr[0].match(/\(/g).length) + "______"
}
relaStr[0] = relaStr.shift() + relaStr[0]
}
return relaStr.join("")
}
function getAbsoluteReg(regStr, s)
{
var absStr = regStr.match(/(\\______rela:-?\d+______|\\.[^\\]*|[^\\]*)/g)
while (absStr.length-1)
{
if (/^\\______rela:-?\d+______$/.test(absStr[1]))
{
absStr[1] = "\\" + (parseInt(absStr[1].match(/-?\d+/g)) + absStr[0].match(/\(/g).length)
}
absStr[0] = absStr.shift() + absStr[0]
}
return new RegExp(absStr.join(""), s)
}
var re = /\w+(\s*=\s*((["])(\\["tbnr]|[^\3])*?\3|\w+))/ig
alert(re)
alert(getAbsoluteReg("(\\a)" + "(" + getRelativeReg(re) + ")", "ig"))
</script>
36. 文字自适应分辩率
<style>
body, table{font-size: 1em; line-height:180%;}
</style>
<body>
<script>
function bodyFontSize(){
document.body.runtimeStyle.fontSize = 11*Math.pow(screen.width/640, 0.5)
}
bodyFontSize()
setInterval(bodyFontSize, 1000)
</script>
Email 提醒: 如果有回复则通过电子邮件提醒。只有注册用户才有此功能。<br />
禁止笑脸转换：如果您的帖子中有转帖代码，请筛选复选此项。<br />
显示签名: 包含您在户口本中的签名。只有注册用户有此功能。
<table><tr><td>
Email 提醒: 如果有回复则通过电子邮件提醒。只有注册用户才有此功能。<br />
禁止笑脸转换：如果您的帖子中有转帖代码，请筛选复选此项。<br />
显示签名: 包含您在户口本中的签名。只有注册用户有此功能。</table>
</body>
37. 保存远程文件到本地
<script>
function saveServerFile(serverUrl, localPath)
{
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
var adoStream = new ActiveXObject("ADODB.Stream")
xmlhttp.open("GET", serverUrl, false)
xmlhttp.send()
adoStream.Type = 1
adoStream.Mode = 3
adoStream.Open()
adoStream.write(xmlhttp.responseBody)
adoStream.SaveToFile(localPath, 2)
}
saveServerFile("/bbs/images/topic5.gif", prompt("输入文件保存路径", "c:\\\\test.gif"))
</script>
38. 表格图片自动缩放
<!--[if gte IE 5.5]>
<style>
img {zoom:expression(Math.min(this.parentElement.offsetWidth/this.width,1))}
table.bbsBody {table-layout:fixed; word-wrap: break-word}
</style>
<![endif]-->
<table border=1 width=100% class="bbsBody">
<tr><td>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<img src="http://www.blueidea.com/upload/1198990-2000sp3+ie5.gif">
</table>
39. js精确计算
<script>
document.write((6*2.3)+"<br>")
document.write(parseFloat((6*2.3).toFixed(12)))
</script>
40. xbm图片
<script>
pic = "#define count_width 16"+"\n"+
"#define count_height 1"+"\n"+
"static char count_bits[] = {0xaa,0xaa}"
</script>
<img width=96 src=javaScript:pic>
41. 动态设置一个对象的伪类
<style>
a {color:blue}
a:hover{color:red}
</style>
<script defer>
function setHover(obj)
{
var uqid=obj.id=obj.uniqueID
document.styleSheets[0].addRule("A:hover#"+uqid, "color:#"+(Math.random()*0xFFFFFF|0).toString(16))
}
for (var i=0; i<document.links.length; i++) setHover(document.links[i])
</script>
<a href="###">link</a>
<a href="###">link</a>
<a href="###">link</a>
<a href="###">link</a>
<hr />
在css 2中可以用A:hover[uniqueID=value]代替
42. 同步服务器时间
<b>经典服务器时间: </b><span id=serverTime>正在同步...</span>
<script>
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
xmlhttp.open("GET", "http://www.blueidea.com/bbs/faq.html", false)
xmlhttp.setRequestHeader("Range", "bytes=-1")
xmlhttp.send()
var ts = new Date()-new Date(xmlhttp.getResponseHeader("Date"))
setInterval("serverTime.innerText=new Date(new Date().getTime()+ts).toLocaleString()", 1)
</script>
45.显示输入框
<html>
<head>
<script language="javascript">
function changeBox(status)
{
textbox.style.display = status ? "" : "none"
}
</script>
<script language="javascript" for="test" event="onpropertychange">
var propName = event.propertyName
var propValue = this[propName]
switch(propName)
{
case "checked":
changeBox(propValue)
break;
}
</script>
</head>
<body>
<input type="radio" id="test" name="radio" checked="true" />
<input type="radio" name="radio" />
<input id="textbox" />
</body>
</html>
<select id=test size=3>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
<button onclick="up(test)">向上</button>
<script>
function up(obj)
{
if (obj.selectedIndex>0)
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
</script>
2. 实现select的细线边框
<span style="border:1px solid #000000; position:absolute; overflow:hidden"><select style="margin:-2px">
<option>1111</option>
<option>11111111111111</option>
<option>111111111</option>
</select></span>
3. 弹出窗口自动适应大小
<script>
function autoResize(src)
{
function resizeOpenWin()
{
var srcElem = event.srcElement
if (document.resized) return
window.setTimeout(function ()
{
window.resizeBy(srcElem.width-100, srcElem.height-100)
},1)
document.resized = true
}
var newbody = "<body style=margin:0px><script>"+resizeOpenWin.toString()+"</"+"script><img src="+src+" onreadystatechange=resizeOpenWin()></body>"
var newwin = window.open("", "", "width=100, height=100, toolbar=yes")
newwin.document.write(newbody)
newwin.document.close()
}
autoResize("http://www.imagegarden.net/photo/scan/view.php?url=/scan/084/21.jpg")
</script>
4. 捕获关闭按钮
<script>
window.onbeforeunload = function()
{
if (document.body.offsetWidth-50 < event.clientX && event.clientY<0)
return "是否关闭当前窗口"
}
</script>
5. 判断链接是否被访问
<style>
a {visited:false}
a:visited {visited:true}
</style>
<a href="###" onclick="alert(event.srcElement.currentStyle.visited);return false">link1</a>
<a href="abcd" onclick="alert(event.srcElement.currentStyle.visited);return false">link2</a>
6. expression 妙用
<script>
function test()
{
alert("expression function")
}
</script>
<style>
a {qiushuiwuhen:expression(this.onclick=test)}
</style>
<a href="javascript:;">expression</a>
7. 多彩链接
<style>
span {color: #FF6600}
a {color: #9299A6}
</style>
<a href="javascript:;"><span>link</span></a>
8. iframe 自动适应大小
<script>
function autoResize()
{
try
{
document.all["test"].style.height=test.document.body.scrollHeight
}
catch(e){}
}
</script>
<iframe id=test style="height:expression(1); aho:expression(autoResize())" src="\">
9. 用onmouseover、onmouseout 实现 onmouseenter 和 onmouseleave
onmouseover = if (!this.contains(event.fromElement)) {...}onmouseout = if (!this.contains(event.toElement)) {...}
10. 中文两端对齐
<DIV style="text-align:justify; text-justify:Distribute-all-lines;">搜易论坛搜易论坛</DIV>
11. 生成连续字符
<script>
alert(new Array(10).join("a"))
</script>
12. 强制图片载入
<img onerror="this.src=this.src" ...
13. 获取色盘颜色
<body>
<span style="background-color:buttonface" id=demo>buttonface</span>
<script>
var rng = document.body.createTextRange();
rng.moveToElementText(demo)
var bColor=rng.queryCommandValue("BackColor");
str=("000000"+bColor.toString(16)).match(/.{6}$/)
alert("#"+str.slice(-2)+str.slice(2,-2)+str.slice(2))
</script>
</body>
14. 不进行转义的字符串
<script>alert (/\n\r\t/.source)</script>
15. 判断日期是否合法
<script>
function isDate(strDate)
{
if (!strDate) return false
var date1 = new Array()
var date2 = null
try
{
date1[0] = strDate.match(/\d{4}/)
strDate = strDate.replace(date1[0],"")
date1[1] = parseInt(strDate.match(/\d+/g)[0])+1
strDate = strDate.replace(date1[1],"")
date1[2] = parseInt(strDate.match(/\d+/g))
date2 = new Date(date1.join("\/"))
return date1.join("\/") == date2.getYear() +"\/"+ (date2.getMonth()+1) +"\/"+ date2.getDate()
}
catch(e)
{
return false
}
}
alert(isDate("2003/01/01"))
alert(isDate("01/01/2003"))
alert(isDate("01-01-2003"))
alert(isDate("2003/21/01"))
alert(isDate("2003/01/01 20:00:00"))
</script>
16. 打开我的电脑，控制面板等
<a href="file:///::{20D04FE0-3AEA-1069-A2D8-08002B30309D}" target=_blank>我的电脑</a><br>
<a href="file:///c:/" target=_blank>本地C盘</a><br>
<a href="file:///d:/" target=_blank>本地D盘</a><br>
<a href="file:///c:/" target=_blank>本地E盘</a><br>
<a href="file:///::{208D2C60-3AEA-1069-A2D7-08002B30309D}" target=_blank>网上邻居</a><br>
<a href="file:///::{450D8FBA-AD25-11D0-98A8-0800361B1103}" target=_blank>我的文档</a><br>
<a href="file:///::{20D04FE0-3AEA-1069-A2D8-08002B30309D}/::{21EC2020-3AEA-1069-A2DD-08002B30309D}" target=_blank>控制面板</a><br>
<a href="file:///::{645FF040-5081-101B-9F08-00AA002F954E}" target=_blank>回收站</a><br>
17. 强制转为整型变量
<script>
alert (123|0)
alert (123.456|0)
alert ("abc"|0)
</script>
18. 把0-6的星期表示改为1-7表示的表示方法
<script>
for (var i=0; i<7; i++) alert(Math.ceil((i+7)%7.5))
</script>
19. 判断是否是工作日
<script>
alert(new Date().getDay()%6 ? "工作日" : "双休日")
</script>
20. 去除字符串首尾的空格
<script>
alert(" aaaa ".replace(/^\s*|\s*$/g, ""))
</script>
21. 获得本月的天数
<script>
alert(new Date(new Date().getYear(), new Date().getMonth()+1, 0).getDate())
</script>
22. 正则不匹配词组
不含"yes"或者"no":<br>
<script>
function d(s){document.write(s+"<br>")}
str=new Array("yes","no","auto","yseauto","sey","esyno");
for(i in str)
d(str[i].bold()+" : "+/^(y(?!es)|n(?!o)|[^yn])*$/.test(str[i]));
</script>
23. 使用模式窗口浏览网页
<script language=JavaScript>
showModalDialog("about:<iframe src=http://www.blueidea.com/bbswidth=100% height=100%></iframe>")
</script>
24. 随机重排数组
<script>
ars=[金,木,水,火,土,仁,义,礼,志,贤]
for (var i=0; i<10; i++)
document.write(ars.sort(function(){return Math.random( )*new Date%3-1})+"<br />")
</script>
25. 自动等分的Table
<style>
tr {
position: relative;
top: expression(-1*this.sectionRowIndex*(offsetHeight-2));
left: expression(this.sectionRowIndex*this.offsetWidth);
height: 100px;
}
td {
border: 1px solid buttonface;
font-size: 12px;
}
</style>
<table>
<tbody>
<tr><td><span CONTENTEDITABLE id="e">1111111</span></td></tr>
<tr><td><span>222</span></td></tr>
<tr><td><span>33333</span></td></tr>
<tr><td><span>4</span></td></tr>
</tbody>
<script>
otr = document.body.createTextRange()
otr.moveToElementText(document.all["e"])
otr.select()
e.focus()
</script>
</table>
26. 格式化数字
<script>
num = 1
len = 3
alert((new Array(len).join("0")+num).slice(-len))
</script>
27. 获得路径
<script>
function getURL()
{
var allPath = /^[\\\/]+/.test(filePath.value) ? filePath.value : currentPath.value + filePath.value
var pathArray = allPath.split(/[\\\/]+/)
var tmpArray = new Array
for (var i=0; i<pathArray.length; i++)
{
switch (pathArray[i])
{
case "." :
break
case ".." :
tmpArray.pop()
break
default :
tmpArray[tmpArray.length] = pathArray[i]
break
}
}
alert(tmpArray.join("\/"))
}
</script>
当前路径:<input id="currentPath" value="asp.net/xml/" /><br />
文件路径:<input id="filePath" value="./../w/../fs\r.g///if"/>
<button onclick="getURL()">getURL</button>
28. 清除删除滤镜后仍对Body的影响
<script for=window event=onload>
oldBody = document.body
newBody = document.createElement("BODY")
oldBody.style.filter="blendTrans(duration=1)"
oldBody.applyElement(newBody, "inside")
oldBody.swapNode(newBody)
oldBody.removeNode(true)
</script>
<div style="height: 1000px">
a
</div>
29. 接管alert
<script>
function window.alert(msg)
{
window.showModalDialog("about:"+msg)
}
alert("我是Alert")
</script>
30. 每次响应select选择
<script>
function change()
{
var src=event.srcElement
if ( !(event.clientX > src.offsetLeft &&
event.clientX < src.offsetLeft + src.offsetWidth &&
event.clientY > src.offsetTop &&
event.clientY < src.offsetTop+src.offsetHeight))
window.status = src.options[src.selectedIndex].text
}
</script>
<select onclick="change()">
<option>aaaaa</option>
<option>bbbbb</option>
<option>ccccc</option>
<option>ddddd</option>
</select>
31. 求出两组日期的相交的日期
<script>
var date1 = ["2003/1/1", "2004/5/6", "1998/1/2"]
var date2 = ["2003/1/1", "2008/12/1"]
var date3 = ["2003/2/2", "2008/12/1"]
var date4 = ["2003/1/1", "2004/5/6"]
function cmDate(d1, d2)
{
return d2.toString().match(new RegExp("("+d1.join("|")+")", "g"))
}
alert(cmDate(date1, date2))
alert(cmDate(date1, date3))
alert(cmDate(date1, date4))
</script>
32. 用图片替换上传文件框
<form action="javascript:alert(上传成功)" method="post" enctype="multipart/form-data">
<div style="position: absolute; top: 15px; filter: alpha(opacity=0); left: -26px;"><input id="upload" type="file" name="upload" size="1" /></div>
<input type="button" value="选择文件" onclick="upload.click()" />
<input type="submit" />
</form>
33. 同时显示多个 popup window
<script>
var popHTML = "<span onclick=var a = document.parentWindow.createPopup();var b = a.document.body;b.innerHTML = top.popHTML;a.show(5, 100, 180, 25, document.body);>popup window</span>"
document.write(popHTML)
</script>
34. 屏蔽快捷键
<script>
document.onkeydown = function()
{
event.keyCode=0
return false
}
document.onhelp = function()
{
return false
}
</script>
35. 正则表达式连接函数
<script for=window event=onload>
function getRelativeReg(reg)
{
var regStr = reg.source
var relaStr = regStr.match(/(\\\d+|\\.[^\\]*|[^\\]*)/g)
while (relaStr.length-1)
{
if (/^\\\d+$/.test(relaStr[1]))
{
relaStr[1] = "\\______rela:" + (parseInt(relaStr[1].match(/\d+/g)) - relaStr[0].match(/\(/g).length) + "______"
}
relaStr[0] = relaStr.shift() + relaStr[0]
}
return relaStr.join("")
}
function getAbsoluteReg(regStr, s)
{
var absStr = regStr.match(/(\\______rela:-?\d+______|\\.[^\\]*|[^\\]*)/g)
while (absStr.length-1)
{
if (/^\\______rela:-?\d+______$/.test(absStr[1]))
{
absStr[1] = "\\" + (parseInt(absStr[1].match(/-?\d+/g)) + absStr[0].match(/\(/g).length)
}
absStr[0] = absStr.shift() + absStr[0]
}
return new RegExp(absStr.join(""), s)
}
var re = /\w+(\s*=\s*((["])(\\["tbnr]|[^\3])*?\3|\w+))/ig
alert(re)
alert(getAbsoluteReg("(\\a)" + "(" + getRelativeReg(re) + ")", "ig"))
</script>
36. 文字自适应分辩率
<style>
body, table{font-size: 1em; line-height:180%;}
</style>
<body>
<script>
function bodyFontSize(){
document.body.runtimeStyle.fontSize = 11*Math.pow(screen.width/640, 0.5)
}
bodyFontSize()
setInterval(bodyFontSize, 1000)
</script>
Email 提醒: 如果有回复则通过电子邮件提醒。只有注册用户才有此功能。<br />
禁止笑脸转换：如果您的帖子中有转帖代码，请筛选复选此项。<br />
显示签名: 包含您在户口本中的签名。只有注册用户有此功能。
<table><tr><td>
Email 提醒: 如果有回复则通过电子邮件提醒。只有注册用户才有此功能。<br />
禁止笑脸转换：如果您的帖子中有转帖代码，请筛选复选此项。<br />
显示签名: 包含您在户口本中的签名。只有注册用户有此功能。</table>
</body>
37. 保存远程文件到本地
<script>
function saveServerFile(serverUrl, localPath)
{
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
var adoStream = new ActiveXObject("ADODB.Stream")
xmlhttp.open("GET", serverUrl, false)
xmlhttp.send()
adoStream.Type = 1
adoStream.Mode = 3
adoStream.Open()
adoStream.write(xmlhttp.responseBody)
adoStream.SaveToFile(localPath, 2)
}
saveServerFile("/bbs/images/topic5.gif", prompt("输入文件保存路径", "c:\\\\test.gif"))
</script>
38. 表格图片自动缩放
<!--[if gte IE 5.5]>
<style>
img {zoom:expression(Math.min(this.parentElement.offsetWidth/this.width,1))}
table.bbsBody {table-layout:fixed; word-wrap: break-word}
</style>
<![endif]-->
<table border=1 width=100% class="bbsBody">
<tr><td>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<img src="http://www.blueidea.com/upload/1198990-2000sp3+ie5.gif">
</table>
39. js精确计算
<script>
document.write((6*2.3)+"<br>")
document.write(parseFloat((6*2.3).toFixed(12)))
</script>
40. xbm图片
<script>
pic = "#define count_width 16"+"\n"+
"#define count_height 1"+"\n"+
"static char count_bits[] = {0xaa,0xaa}"
</script>
<img width=96 src=javaScript:pic>
41. 动态设置一个对象的伪类
<style>
a {color:blue}
a:hover{color:red}
</style>
<script defer>
function setHover(obj)
{
var uqid=obj.id=obj.uniqueID
document.styleSheets[0].addRule("A:hover#"+uqid, "color:#"+(Math.random()*0xFFFFFF|0).toString(16))
}
for (var i=0; i<document.links.length; i++) setHover(document.links[i])
</script>
<a href="###">link</a>
<a href="###">link</a>
<a href="###">link</a>
<a href="###">link</a>
<hr />
在css 2中可以用A:hover[uniqueID=value]代替
42. 同步服务器时间
<b>经典服务器时间: </b><span id=serverTime>正在同步...</span>
<script>
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
xmlhttp.open("GET", "http://www.blueidea.com/bbs/faq.html", false)
xmlhttp.setRequestHeader("Range", "bytes=-1")
xmlhttp.send()
var ts = new Date()-new Date(xmlhttp.getResponseHeader("Date"))
setInterval("serverTime.innerText=new Date(new Date().getTime()+ts).toLocaleString()", 1)
</script>
45.显示输入框
<html>
<head>
<script language="javascript">
function changeBox(status)
{
textbox.style.display = status ? "" : "none"
}
</script>
<script language="javascript" for="test" event="onpropertychange">
var propName = event.propertyName
var propValue = this[propName]
switch(propName)
{
case "checked":
changeBox(propValue)
break;
}
</script>
</head>
<body>
<input type="radio" id="test" name="radio" checked="true" />
<input type="radio" name="radio" />
<input id="textbox" />
</body>
</html>