珍藏版:不可或缺的脚本代码_Web标准教程
一、一些很实用且必用的小脚本代码:
脚本1:进入主页以后自动播放声音
<embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true>
脚本2:进入主页后自动最大话,省的去在自己单击了
以下为引用的内容: <script> self.moveTo(0,0) self.resizeTo(screen.availWidth,screen.availHeight) </script> |
脚本3:显示现在时间的脚本
<script language=vbscript>document.write now</script>
脚本4:显示最后修改时间的脚本
<script>document.write(document.lastModified)</script>
脚本5:设为首页,加为收藏,加入频道,启动outlook发信
以下为引用的内容: <a style="cursor:hand" <a style="cursor:hand" <a href=javascript:window.external.addChannel("typhoon.cdf")>加入频道</a> <a href="mailtkayvin@sohu.com">与我联系</a> |
脚本6:状态栏动态显示现在时间
以下为引用的内容: <script> function see(){ window.setTimeout("see()",1000); today = new Date(); self.status = today.toString(); } </script> <body onload=see()> |
脚本7:关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a>
脚本8:按下F12键,直接返回首页
以下为引用的内容: <script>function look(){ if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/} } if(document.onkeydown==null) {document.onkeydown=look} </script> |
脚本9:后退,刷新,前进
以下为引用的内容: <input type=button value=后退 onclick=history.go(-1)> <input type=button value=刷新 onclick=history.go(-0)> <input type=button value=前进 onclick=history.go( 1)> |
脚本10:设定时间弹出窗口,4000=4秒,当然你可以自定义
以下为引用的内容: <script>function l() </script> |
脚本11:鼠标旁边的提示信息,类似与163登录后的页面提示效果
以下为引用的内容: <a href="#" title="这是提示">tip</a> |
脚本12:假如文字过长,则将过长的部分变成省略号显示
以下为引用的内容: <DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis"> <NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR> </DIV> |
脚本13:滚动的图片
以下为引用的内容: <script language="javascript"> function initDivPlace(){ if (ns4){ for (i=0;i<displayImgAmount;i ){ eval("document.divOuter.document.divAds" i ".left=" divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i ){ eval("document.divOuter.document.divAds" i ".left=" divWidth*displayImgAmount) } }else{ for (i=0;i<displayImgAmount;i ){ eval("document.all.divAds" i ".style.left=" divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i ){ eval("document.all.divAds" i ".style.left=" divWidth*displayImgAmount) } } } function mvStart(){ timeID=setTimeout(moveLeftDiv,moveRelax) } function mvStop(){ clearTimeout(timeID) } function moveLeftDiv(){ if (ns4){ for (i=0;i<=displayImgAmount;i ){ eval("document.divOuter.document.divAds" parseInt((startDnum i)%imgArr.length) ".left=document.divOuter.document.divAds" parseInt((startDnum i)%imgArr.length) ".left-moveStep") } startDivClipLeft=parseInt(eval("document.divOuter.document.divAds" startDnum ".clip.left")) nextDivClipRight=parseInt(eval("document.divOuter.document.divAds" nextDnum ".clip.right")) if (startDivClipLeft moveStep>divWidth){ eval("document.divOuter.document.divAds" nextDnum ".clip.right=" divWidth) eval("document.divOuter.document.divAds" startDnum ".left=" divWidth*displayImgAmount) eval("document.divOuter.document.divAds" parseInt((nextDnum 1)%imgArr.length) ".left=document.divOuter.document.divAds" nextDnum ".left " divWidth) eval("document.divOuter.document.divAds" parseInt((nextDnum 1)%imgArr.length) ".clip.left=0") startDnum=( startDnum)%imgArr.length nextDnum=(startDnum displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ eval("document.divOuter.document.divAds" nextDnum ".clip.left=0") startDivClipLeft =moveStep nextDivClipRight =moveStep } eval("document.divOuter.document.divAds" startDnum ".clip.left=" startDivClipLeft) eval("document.divOuter.document.divAds" nextDnum ".clip.right=" nextDivClipRight) }else{ for (i=0;i<=displayImgAmount;i ){ eval("document.all.divAds" parseInt((startDnum i)%imgArr.length) ".style.left=document.all.divAds" parseInt((startDnum i)%imgArr.length) ".style.pixelLeft-moveStep") } startDivClipLeft=parseInt(eval("document.all.divAds" startDnum ".currentStyle.clipLeft")) nextDivClipRight=parseInt(eval("document.all.divAds" nextDnum ".currentStyle.clipRight")) if (startDivClipLeft moveStep>divWidth){ eval("document.all.divAds" nextDnum ".style.clip='rect(0," divWidth "," divHeight ",0" ")'") eval("document.all.divAds" startDnum ".style.left=" divWidth*displayImgAmount) eval("document.all.divAds" parseInt((nextDnum 1)%imgArr.length) ".style.left=document.all.divAds" nextDnum ".style.pixelLeft " divWidth) startDnum=( startDnum)%imgArr.length nextDnum=(startDnum displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ startDivClipLeft =moveStep nextDivClipRight =moveStep } eval("document.all.divAds" startDnum ".style.clip='rect(0," divWidth "," divHeight "," startDivClipLeft ")'") eval("document.all.divAds" nextDnum ".style.clip='rect(0," nextDivClipRight "," divHeight ",0)'") } if (outHover){ mvStop() }else{ mvStart() } } function writeDivs(){ if (ns4){ document.write("<ilayer name=divOuter width=750 height=" divHeight ">") for (i=0;i<imgArr.length;i ){ document.write("<layer name=divAds" i ">") document.write(imgArr[i] " ") document.write("</layer>") } document.write("</ilayer>") document.close() for (i=displayImgAmount;i<imgArr.length;i ){ eval("document.divOuter.document.divAds" i ".clip.right=0") } }else{ document.write("<div id=divOuter style='position:relative' width=750 height=" divHeight ">") for (i=0;i<imgArr.length;i ){ document.write("<div id=divAds" i " style='position:absolute;clip:rect(0," divWidth "," divHeight ",0)'>") document.write(imgArr[i] " ") document.write("</div>") } document.write("</div>") for (i=displayImgAmount;i<imgArr.length;i ){ eval("document.all.divAds" i ".style.clip='rect(0,0," divHeight ",0)'") } } } </script> <BODY onload=javascript:mvStart()> <SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT> |
脚本14:接收键盘指令的脚本
按A就会跳转到地图名片的网页,请按A
以下为引用的内容: <SCRIPT language="JavaScript">
onkeydown="javascript:onenter();" function onenter(){ |
脚本15:让你的文本链接渐隐渐显
以下为引用的内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <BODY>
stepIn = 17; /* /* hexa = new makearray(16); document.onmouseover = domouseover; startColor = dehexize(startColor.toLowerCase()); var fadeId = new Array(); function dehexize(Color){ function domouseover() { function domouseout() { function makearray(n) { function hex(i) { function setColor(r, g, b, element) { function fade(s,e, element,step){ </script> </BODY> |
脚本16:类似与QQ的好友/黑名单之类的树型菜单_极品
以下为引用的内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <BODY> function initializeMenu(menuId, actuatorId) { if (menu == null || actuator == null) return; //if (window.opera) return; // I'm too tired actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)"; return false; #mainMenu { #menuList { li.menubar { .menu, .submenu { .menu li, .submenu li { a.actuator { a.actuator:hover { .menu li a, .submenu li a { .menu li a:hover, submenu li a:hover { span.key { |
脚本17:脚本翻页代码
以下为引用的内容: <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> showPages v1.1 Infomation
function showPages(name) { //初始化属性 showPages.prototype.getPage = function(){ //丛url获得当前页数,假如变量重复只获取最后一个 switch (mode) { case 0 : //模式1 (页数,首页,前页,后页,尾页) strHtml = '<span class="count">Pages: ' this.page ' / ' this.pageCount '</span>'; strHtml = '<span class="number">'; if (prevPage < 1) { strHtml = '<span title="First Page">«</span>'; strHtml = '<span title="Prev Page">‹</span>'; } else { strHtml = '<span title="First Page"><a href="javascript:' this.name '.toPage(1);">«</a></span>'; strHtml = '<span title="Prev Page"><a href="javascript:' this.name '.toPage(' prevPage ');">‹</a></span>'; } for (var i = 1; i <= this.pageCount; i ) { if (i > 0) { if (i == this.page) { strHtml = '<span title="Page ' i '">[' i ']</span>'; } else { strHtml = '<span title="Page ' i '"><a href="javascript:' this.name '.toPage(' i ');">[' i ']</a></span>'; } } } if (nextPage > this.pageCount) { strHtml = '<span title="Next Page">›</span>'; strHtml = '<span title="Last Page">»</span>'; } else { strHtml = '<span title="Next Page"><a href="javascript:' this.name '.toPage(' nextPage ');">›</a></span>'; strHtml = '<span title="Last Page"><a href="javascript:' this.name '.toPage(' this.pageCount ');">»</a></span>'; } strHtml = '</span><br />'; break; case 1 : //模式1 (10页缩略,首页,前页,后页,尾页) strHtml = '<span class="count">Pages: ' this.page ' / ' this.pageCount '</span>'; strHtml = '<span class="number">'; if (prevPage < 1) { strHtml = '<span title="First Page">«</span>'; strHtml = '<span title="Prev Page">‹</span>'; } else { strHtml = '<span title="First Page"><a href="javascript:' this.name '.toPage(1);">«</a></span>'; strHtml = '<span title="Prev Page"><a href="javascript:' this.name '.toPage(' prevPage ');">‹</a></span>'; } if (this.page % 10 ==0) { var startPage = this.page - 9; } else { var startPage = this.page - this.page % 10 1; } if (startPage > 10) strHtml = '<span title="Prev 10 Pages"><a href="javascript:' this.name '.toPage(' (startPage - 1) ');">...</a></span>'; for (var i = startPage; i < startPage 10; i ) { if (i > this.pageCount) break; if (i == this.page) { strHtml = '<span title="Page ' i '">[' i ']</span>'; } else { strHtml = '<span title="Page ' i '"><a href="javascript:' this.name '.toPage(' i ');">[' i ']</a></span>'; } } if (this.pageCount >= startPage 10) strHtml = '<span title="Next 10 Pages"><a href="javascript:' this.name '.toPage(' (startPage 10) ');">...</a></span>'; if (nextPage > this.pageCount) { strHtml = '<span title="Next Page">›</span>'; strHtml = '<span title="Last Page">»</span>'; } else { strHtml = '<span title="Next Page"><a href="javascript:' this.name '.toPage(' nextPage ');">›</a></span>'; strHtml = '<span title="Last Page"><a href="javascript:' this.name '.toPage(' this.pageCount ');">»</a></span>'; } strHtml = '</span><br />'; break; case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页) strHtml = '<span class="count">Pages: ' this.page ' / ' this.pageCount '</span>'; strHtml = '<span class="number">'; if (prevPage < 1) { strHtml = '<span title="First Page">«</span>'; strHtml = '<span title="Prev Page">‹</span>'; } else { strHtml = '<span title="First Page"><a href="javascript:' this.name '.toPage(1);">«</a></span>'; strHtml = '<span title="Prev Page"><a href="javascript:' this.name '.toPage(' prevPage ');">‹</a></span>'; } if (this.page != 1) strHtml = '<span title="Page 1"><a href="javascript:' this.name '.toPage(1);">[1]</a></span>'; if (this.page >= 5) strHtml = '<span>...</span>'; if (this.pageCount > this.page 2) { var endPage = this.page 2; } else { var endPage = this.pageCount; } for (var i = this.page - 2; i <= endPage; i ) { if (i > 0) { if (i == this.page) { strHtml = '<span title="Page ' i '">[' i ']</span>'; } else { if (i != 1 && i != this.pageCount) { strHtml = '<span title="Page ' i '"><a href="javascript:' this.name '.toPage(' i ');">[' i ']</a></span>'; } } } } if (this.page 3 < this.pageCount) strHtml = '<span>...</span>'; if (this.page != this.pageCount) strHtml = '<span title="Page ' this.pageCount '"><a href="javascript:' this.name '.toPage(' this.pageCount ');">[' this.pageCount ']</a></span>'; if (nextPage > this.pageCount) { strHtml = '<span title="Next Page">›</span>'; strHtml = '<span title="Last Page">»</span>'; } else { strHtml = '<span title="Next Page"><a href="javascript:' this.name '.toPage(' nextPage ');">›</a></span>'; strHtml = '<span title="Last Page"><a href="javascript:' this.name '.toPage(' this.pageCount ');">»</a></span>'; } strHtml = '</span><br />'; break; case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE) strHtml = '<span class="count">Pages: ' this.page ' / ' this.pageCount '</span>'; strHtml = '<span class="arrow">'; if (prevPage < 1) { strHtml = '<span title="First Page">9</span>'; strHtml = '<span title="Prev Page">7</span>'; } else { strHtml = '<span title="First Page"><a href="javascript:' this.name '.toPage(1);">9</a></span>'; strHtml = '<span title="Prev Page"><a href="javascript:' this.name '.toPage(' prevPage ');">7</a></span>'; } if (nextPage > this.pageCount) { strHtml = '<span title="Next Page">8</span>'; strHtml = '<span title="Last Page">:</span>'; } else { strHtml = '<span title="Next Page"><a href="javascript:' this.name '.toPage(' nextPage ');">8</a></span>'; strHtml = '<span title="Last Page"><a href="javascript:' this.name '.toPage(' this.pageCount ');">:</a></span>'; } strHtml = '</span><br />'; break; case 4 : //模式4 (下拉框) if (this.pageCount < 1) { strHtml = '<select name="toPage" disabled>'; strHtml = '<option value="0">No Pages</option>'; } else { var chkSelect; strHtml = '<select name="toPage" onchange="' this.name '.toPage(this);">'; for (var i = 1; i <= this.pageCount; i ) { if (this.page == i) chkSelect=' selected="selected"'; else chkSelect=''; strHtml = '<option value="' i '"' chkSelect '>Pages: ' i ' / ' this.pageCount '</option>'; } } strHtml = '</select>'; break; case 5 : //模式5 (输入框) strHtml = '<span class="input">'; if (this.pageCount < 1) { strHtml = '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">'; strHtml = '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>'; } else { strHtml = '<input type="text" value="Input Page:" class="ititle" readonly="readonly">'; strHtml = '<input type="text" id="pageInput' this.showTimes '" value="' this.page '" class="itext" title="Input page" onkeypress="return ' this.name '.formatInputPage(event);" onfocus="this.select()">'; strHtml = '<input type="text" value=" / ' this.pageCount '" class="icount" readonly="readonly">'; strHtml = '<input type="button" name="go" value="GO" class="ibutton" onclick="' this.name '.toPage(document.getElementById(\'pageInput' this.showTimes '\').value);"></option>'; } strHtml = '</span>'; break; default : strHtml = 'Javascript showPage Error: not find mode ' mode; break; } return strHtml; } showPages.prototype.createUrl = function (page) { //生成页面跳转url if (isNaN(parseInt(page))) page = 1; if (page < 1) page = 1; if (page > this.pageCount) page = this.pageCount; var url = location.protocol '//' location.host location.pathname; var args = location.search; var reg = new RegExp('([\?&]?)' this.argName '=[^&]*[&$]?', 'gi'); args = args.replace(reg,'$1'); if (args == '' || args == null) { args = '?' this.argName '=' page; } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') { args = this.argName '=' page; } else { args = '&' this.argName '=' page; } return url args; } showPages.prototype.toPage = function(page){ //页面跳转 var turnTo = 1; if (typeof(page) == 'object') { turnTo = page.options[page.selectedIndex].value; } else { turnTo = page; } self.location.href = this.createUrl(turnTo); } showPages.prototype.printHtml = function(mode){ //显示html代码 this.getPage(); this.checkPages(); this.showTimes = 1; document.write('<div id="pages_' this.name '_' this.showTimes '" class="pages"></div>'); document.getElementById('pages_' this.name '_' this.showTimes).innerHTML = this.createHtml(mode); } showPages.prototype.formatInputPage = function(e){ //限定输入页数格式 var ie = navigator.appName=="Microsoft Internet Explorer"?true:false; if(!ie) var key = e.which; else var key = event.keyCode; if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true; return false; } //--> </script> <style> /* Pages Main Tyle */ .pages { color: #000000; cursor: default; font-size: 10px; font-family: Tahoma, Verdana; padding: 3px 0px 3px 0px; } .pages .count, .pages .number, .pages .arrow { color: #000000; font-size: 10px; background-color: #F7F7F7; border: 1px solid #CCCCCC; } /* Page and PageCount Style */ .pages .count { font-weight: bold; border-right: none; padding: 2px 10px 1px 10px; } /* Mode 0,1,2 Style (Number) */ .pages .number { font-weight: normal; padding: 2px 10px 1px 10px; } .pages .number a, .pages .number span { font-size: 10px; } .pages .number span { color: #999999; margin: 0px 3px 0px 3px; } .pages .number a { color: #000000; text-decoration: none; } .pages .number a:hover { color: #0000ff; } /* Mode 3 Style (Arrow) */ .pages .arrow { font-weight: normal; padding: 0px 5px 0px 5px; } .pages .arrow a, .pages .arrow span { font-size: 10px; font-family: Webdings; } .pages .arrow span { color: #999999; margin: 0px 5px 0px 5px; } .pages .arrow a { color: #000000; text-decoration: none; } .pages .arrow a:hover { color: #0000ff; } /* Mode 4 Style (Select) */ .pages select, .pages input { color: #000000; font-size: 10px; font-family: Tahoma, Verdana; } /* Mode 5 Style (Input) */ .pages .input input.ititle, .pages .input input.itext, .pages .input input.icount { color: #666666; font-weight: bold; background-color: #F7F7F7; border: 1px solid #CCCCCC; } .pages .input input.ititle { width: 70px; text-align: right; border-right: none; } .pages .input input.itext { width: 25px; color: #000000; text-align: right; border-left: none; border-right: none; } .pages .input input.icount { width: 35px; text-align: left; border-left: none; } .pages .input input.ibutton { height: 17px; color: #FFFFFF; font-weight: bold; font-family: Verdana; background-color: #999999; border: 1px solid #666666; padding: 0px 0px 2px 1px; margin-left: 2px; cursor: hand; } /* body */ <body> document.write('<br>Show Times: ' pg.showTimes ', Mood Default'); |
脚本18:DIV的透明层实现
以下为引用的内容: <body bgcolor="#ff0ddd"> |
- 相关链接:
- 教程说明:
Web标准教程-珍藏版:不可或缺的脚本代码。