JavaScript小技巧

最新推荐文章于 2021-06-04 04:34:07 发布

原创最新推荐文章于 2021-06-04 04:34:07 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #浏览器 #cmd #html #scroll

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一系列实用的网页特效技巧，包括如何让浏览器收藏站点、设为主页、去除超链接下划线、自动刷新网页等，还提供了多种代码示例帮助读者实现这些功能。

◆加入收藏夹
说明	点击即可把你的网站添加到浏览器的收藏菜单下
代码	<span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.helpor.net','网页特效集锦')" title="网页特效集锦">收藏本站</span>

◆设为首页
说明	点击即可把你的网站设置为浏览器的起始页
代码	<span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.helpor.net');" style="CURSOR: hand">设为首页</span>

◆去掉超链接的下划线
说明	有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与</head>之间，下划线就无影无踪啦！注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！
代码	<style TYPE="text/css"> <!-- A:link{text-decoration:none} A:visited{text-decoration:none} A:hover {color: #ff00ff;text-decoration:underline} --> </style>

◆自动刷新网页
说明	自动刷新网页在HTML的与之间加入下面这段代码，则在5分钟之后正在浏览的页面将会自动变为target.html这一页。代码中300为刷新的延迟时间，以秒为单位。targer.html为你想转向的目标页,若为本页则为自动刷新本页。
代码	<meta http-equiv="refresh" content="300; url=target.html">

◆刷新本页
说明	点击即可刷新本页。
代码	<a href="javascript:location.reload()" target="_self">刷新</a>

◆返回到上一页
说明	点击即可返回到上一页面。
代码	<a href="javascript:history.back(-1)">返回上一页</a>

◆跳出小窗口
说明	在打开有下面这段代码的页面时将会跳出一个468x60大小的小窗口。“window.html”为跳出的小窗口里所要显示的网页。toolbar、status、menubar、scrollbars、设置小窗口的工具栏、状态栏、菜单栏及滚动条的有无，resizable设置是否可让浏览者改变小窗口大小，width、height设置小窗口的宽度以及高度。(不过这样的小窗口一般是不受欢迎的哦！)
代码	<script language="JavaScript"> window.open("window.html","www_helpor_net","toolbar=no, status=no,menubar=no, scrollbars=no,resizable=no,width=468,height=60,left=200,top=50"); </script>

◆自动关闭窗口
说明	在网页源代码中加入下面的代码，则该窗口将在20秒钟之后自动关闭！这与跳出式小窗口配合使用是再好不过啦！代码中“i=20”表示关闭的延迟时间为20秒，可任意修改。
代码	<script language="javascript"> <!-- function clock(){i=i-1 document.title="本窗口将在"+i+"秒后自动关闭!"; if(i>0)setTimeout("clock();",1000); else self.close();} var i=20 clock(); //--> </script>

◆给页面加保护1
说明	如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话，不妨在HTML里加入下面这段代码。当在网页里按下鼠标右键时，出现的不是想要的快捷菜单而是一个警告窗口。“/n/n”表示换行。
代码	<script language="JavaScript"> function helpor() { if (event.button==2)alert(' 仅供浏览!谢谢!/n/n若有问题请与我联系! ') } </script> 然后把<body> 改为 <body onmousedown="helpor_net()">

◆给页面加保护2
说明	但是这种屏蔽方法的破解方法也是众所周知的。那就是连续单击鼠标左键和右键便又可以看到右键菜单了。加上〈body oncontextmenu=self.event.returnValue=false〉后就可以啦！
代码	<script> function click(){ if(event.button==2){ alert( '本网站欢迎您 !!'); } } document.onmousedown=click 〈/script〉然后把<body> 改为〈body oncontextmenu=self.event.returnValue=false〉

◆给页面加保护3

说明

定义〈body〉。这次用的参数是：onselectstart。就是左键选定的参数。代码如下：

代码

〈body onselectstart="return false"〉

　　这样，左键选定功能就给轻易屏蔽了。原理和上面的一样。现在，再用你的左键选择任意内容把，已经没有用了。自然也不能ctrl + C，ctrl +V了。那么，现在我们来把这两部分合并起来。彻底控制左右键！：

〈body oncontextmenu=self.event.returnValue=false onselectstart="return false"〉

◆固定字号大小
说明	你是否有过这样的经历：一个布置得很好的网页，当浏览时把浏览器的字号设置成大或小时，漂亮的网页马上面目全非了。因为字的大小变了，版式自然乱了。现在好了，只要把下面这段代码加入到网页源文件的<head>与</head>之间就行了(对用<font>标签定义的文字无效)。
代码	<style type="text/css"> <!-- body {font-size:9pt} td {font-size:9pt} --> </style>

◆状态栏里的动态欢迎语
说明	浏览器的状态栏里出现一个字接一个字往左跑的欢迎语！
代码	<script language="JavaScript"> <!-- function statusMessageObject(p,d) { this.msg = MESSAGE this.out = " " this.pos = POSITION this.delay = DELAY this.i = 0 this.reset = clearMessage } function clearMessage() { this.pos = POSITION } var POSITION = 100 var DELAY = 5 var MESSAGE = "欢迎光临! Welcome to WWW.HELPOR.NET " var scroll = new statusMessageObject() function scroller() { for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) { scroll.out += " " } if (scroll.pos >= 0) scroll.out += scroll.msg else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length) window.status = scroll.out scroll.out = " " scroll.pos-- if (scroll.pos < -(scroll.msg.length)) { scroll.reset() } setTimeout ('scroller()',scroll.delay) } function snapIn(jumpSpaces,position) { var msg = scroll.msg var out = "" for (var i=0; i<position; i++) {out += msg.charAt(i)} for (i=1;i<jumpSpaces;i++) {out += " "} out += msg.charAt(position) window.status = out if (jumpSpaces <= 1) { position++ if (msg.charAt(position) == ' ') {position++ } jumpSpaces = 100-position } else if (jumpSpaces > 3) {jumpSpaces *= .75} else {jumpSpaces--} if (position != msg.length) { var cmd = "snapIn(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,scroll.delay); } else { window.status="" jumpSpaces=0 position=0 cmd = "snapIn(" + jumpSpaces + "," + position + ")"; scrollID = window.setTimeout(cmd,scroll.delay); return false } return true } snapIn(100,0); // --> </script>

◆保护自己的页面不被别人放在框架中
说明	有些人真是懒得可以，把别人做好的网页往自己网页的框架(Frame)里一放，别人的成果就变成了自己的，而且看不出该网页的真实地址！为了防止你的成果被这些人所剽窃，你就可以在你网页的HTML里加入下面这段代码，这样，你的网页便总是在整个窗口中打开了。
代码	<Script LANGUAGE="JavaScript"> if(self!=top){top.location=self.location;} </script>

◆网页中图片和文字相分离的方法

说明

首先打开有图片的网页，完全打开后，在地址栏输入

代码

javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img%20src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+'</center>');void(document.close())}else{alert('No%20images!')}

　　回车就可以罗列出页面中的所有图片

◆不显示网页中图片的代码

说明

首先打开有图片的网页，完全打开后，在地址栏输入

代码

javascript:for(jK6bvW=0;jK6bvW<document.images.length;jK6bvW++){void(document.images[jK6bvW].style.visibility='hidden')}

　　回车就不会显示页面中的图片

◆网页文字缩小0.5倍

说明

首先打开有图片的网页，完全打开后，在地址栏输入

代码

javascript:void(s=document.body.style);void(z=s.getAttribute('zoom'));if(z){s.setAttribute('zoom',(parseInt(z)-50)+'%');}else s.setAttribute('zoom','50%')

　　回车网页文字缩小0.5倍

◆网页文字放大1.5倍

说明

首先打开有图片的网页，完全打开后，在地址栏输入

代码

javascript:void(s=document.body.style);void(z=s.getAttribute('zoom'));if(z){s.setAttribute('zoom',(parseInt(z)+50)+'%');}else s.setAttribute('zoom','150%')

　　回车网页文字放大1.5倍