技术经验分享:Javascript中最常用的经典技巧

简介: 技术经验分享:Javascript中最常用的经典技巧

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键


no 可用于Table


2. 取消选取、防止复制


3. onpaste="return false" 不准粘贴


4. oncopy="return false;" oncut="return false;" 防止复制


5. IE地址栏前换成自己的图标


6. 可以在收藏夹中显示出你的图标


7. 关闭输入法


8. 永远都会带着框架



9. 防止被人frame



10. 网页将不能被另存为


";


11.

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

-->

14. 光标是停在文本框文字的最后

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart("character",e.value.length);

r.collapse(true);

r.select();

}

15. 判断上一页的来源

javascript :

document.referrer

16. 最小化、最大化、关闭窗口

本例适用于IE

17.屏蔽功能键Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift键!"); //可以换成ALT CTRL

}

document.onkeydown=look;

18. 网页不会被缓存

或者

19.怎样让表单没有凹凸感?


enctype="text/plain">


25.在打开的子窗口刷新父窗口的代码里如何写?


window.opener.location.reload()


26.如何设定打开页面的大小


打开页面的位置


27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动


body


{background-image:url(/logo.gif); background-repeat:no-repeat;


background-position:center;background-attachment: fixed}


28. 检查一段字符串是否全由数字组成



29. 获得一个窗口的大小


document.body.clientWidth; document.body.clientHeight


30. 怎么判断是否是字符


if (/【^/x00-/xff】/g.test(s)) alert("含有汉字");


else alert("全是字符");


31.TEXTAREA自适应文字行数的多少


<br><p>="this.style.posHeight=this.scrollHeight"></p><br><p>32. 日期减去天数等于第二个日期</p><br><p>function cc(dd,dadd)</p><br><p>{</p><br><p>//可以加上错误处理</p><br><p>var a = new Date(dd)</p><br><p>a = a.valueOf()</p><br><p>a = a - dadd <em> 24 </em> 60 <em> 60 </em> 1000</p><br><p>a = new Date(a)</p><br><p>alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")</p><br><p>}</p><br><p>cc("12/23/2002",2)</p><br><p>33. 选择了哪一个Radio</p><br><p>function checkme()</p><br><p>for each ob in radio1</p><br><p>if ob.checked then </p><br><p>window.alert ob.value</p><br><p>next</p><br><p>end function</p><br><p>Style</p><br><p>Barcode</p><br><p>34.脚本永不出错</p><br><p><!-- Hide </p> <p>function killErrors() { </p> <p>return true; </p> <p>} </p> <p>window.onerror = killErrors; </p> <p>// --> </p><br><p>35.ENTER键可以让光标移到下一个输入框</p><br><p>36. 检测某个网站的链接速度:</p><br><p>把如下代码加入区域中:</p><br><p>tim=1</p><br><p>setInterval("tim++",100)</p><br><p>b=1</p><br><p>var autourl=new Array()</p><br><p>autourl【1】=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>"</p><br><p>autourl【2】="javacool.3322.net"</p><br><p>autourl【3】=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>"</p><br><p>autourl【4】=""</p><br><p>autourl【5】=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>"</p><br><p>function butt(){</p><br><p><strong><em>("")</p><br><p>for(var i=1;i<autourl.length;i++)</p><br><p></em></strong>(" =》<input type=text </p><br><p>name=url"+i+" size=40> =》<input type=button value="/blog/GO </p> <p>onclick=window.open(this.form.url"+i+".value)></p> <p>")</p><br><p><strong><em>("")</p><br><p>}</p><br><p>butt()</p><br><p>function auto(url){</p><br><p>document.forms【0】【"url"+b】.value=url</p><br><p>if(tim>200)</p><br><p>{document.forms【0】【"txt"+b】.value="/链接超时"}</p><br><p>else</p><br><p>{document.forms【0】【"txt"+b】.value="/blog/时间"+tim/10+"秒"}</p><br><p>b++</p><br><p>}</p><br><p>function run(){for(var i=1;i<autourl.length;i++)</em></strong>("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 </p><br><p>onerror=auto("<a href="http://"+autourl+"")>")}">http://"+autourl+"")>")}</a></p><br><p>run()</p><br><p>37. 各种样式的光标</p><br><p>auto :标准光标</p><br><p>default :标准箭头</p><br><p>hand :手形光标</p><br><p>wait :等待光标</p><br><p>text :I形光标</p><br><p>vertical-text :水平I形光标</p><br><p>no-drop :不可拖动光标</p><br><p>not-allowed :无效光标</p><br><p>help :?帮助光标</p><br><p>all-scroll :三角方向标</p><br><p>move :移动标</p><br><p>crosshair :十字标</p><br><p>e-resize</p><br><p>n-resize</p><br><p>nw-resize</p><br><p>w-resize</p><br><p>s-resize</p><br><p>se-resize</p><br><p>sw-resize</p><br><p>38.页面进入和退出的特效</p><br><p>进入页面</p><br><p>推出页面 </p><br><p>这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使用哪种特效,取值为1-23:</p><br><p>  0 矩形缩小 </p><br><p>  1 矩形扩大 </p><br><p>  2 圆形缩小</p><br><p>  3 圆形扩大 </p><br><p>  4 下到上刷新 </p><br><p>  5 上到下刷新</p><br><p>  6 左到右刷新 </p><br><p>  7 右到左刷新 </p><br><p>  8 竖百叶窗</p><br><p>  9 横百叶窗 </p><br><p>  10 错位横百叶窗 </p><br><p>  11 错位竖百叶窗</p><br><p>  12 点扩散 </p><br><p>  13 左右到中间刷新 </p><br><p>  14 中间到左右刷新</p><br><p>  15 中间到上下</p><br><p>  16 上下到中间 </p><br><p>  17 右下到左上</p><br><p>  18 右上到左下 </p><br><p>  19 左上到右下 </p><br><p>  20 左下到右上</p><br><p>  21 横条 </p><br><p>  22 竖条 </p><br><p>  23 以上22种随机选择一种</p><br><p>39.在规定时间内跳转</p><br><p>40.网页是否被检索</p><br><p>  其中属性值有以下一些:</p><br><p>  属性值为"all": 文件将被检索,且页上链接可被查询;</p><br><p>  属性值为"none": 文件不被检索,而且不查询页上的链接;</p><br><p>  属性值为"index": 文件将被检索;</p><br><p>  属性值为"follow": 查询页上的链接;</p><br><p>  属性值为"noindex": 文件不检索,但可被查询链接;</p><br><p>  属性值为"nofollow": 文件不被检索,但可查询页上的链接。</p><br><p>41、email地址的分割</p><br><p>把如下代码加入区域中</p><br><p>webmaster@sina.com</p><br><p>42、流动边框效果的表格</p><br><p>把如下代码加入区域中</p><br><p>l=Array(6,7,8,9,'a','b','b','c','d','e','f')</p><br><p>Nx=5;Ny=35</p><br><p>t=""</p><br><p>for(x=Nx;x<Nx+Ny;x++)</p><br><p>t+=" "</p><br><p>t+="  "</p><br><p>for(x=2;x<=Nx;x++)</p><br><p>t+="  "</p><br><p>t+=""</p><br><p>for(x=Ny;x>0;x--)</p><br><p>t+=" "</p><br><p><strong><em>(t+"")</p><br><p>var N=Nx</em>2+Ny<em>2</p><br><p>function f1(y){</p><br><p>for(i=0;i<N;i++){</p><br><p>c=(i+y)%20;if(c>10)c=20-c</p><br><p>document.all【"a_mo"+(i)】.bgColor=""""#0000"+l【c】+l【c】+"'"}</p><br><p>y++</p><br><p>setTimeout('f1('+y+')','1')}</p><br><p>f1(1)</p><br><p>43、JavaScript主页弹出窗口技巧</p><br><p>窗口中间弹出</p><br><p>window.open("","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);</p><br><p>============</p><br><p>function WinOpen() {</p><br><p> msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");</p><br><p> msg.</em></strong>("哈 罗!");</p><br><p> msg.<strong><em>("酷 毙 了!这 是JavaScript所 开 的 视 窗!");</p><br><p>}</p><br><p>==============</p><br><p>一、在下面的代码中,你只要单击打开一个窗口,即可链接到赛迪网。而当你想关闭时,只要单击一下即可关闭刚才打开的窗口。</p><br><p>  代码如下: </p><br><p>  <!-- </p><br><p>  function openclk() { </p><br><p>  another=open('1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>','NewWindow'); </p><br><p>  } </p><br><p>  function closeclk() { </p><br><p>  another.close(); </p><br><p>  } </p><br><p>  //--> </p><br><p>  二、上面的代码也太静了,为何不来点动感呢?如果能给页面来个降落效果那该多好啊! </p><br><p>  代码如下: </p><br><p>  function drop(n) { </p><br><p>  if(self.moveBy){ </p><br><p>  self.moveBy (0,-900); </p><br><p>  for(i = n; i > 0; i--){ </p><br><p>  self.moveBy(0,3); </p><br><p>  } </p><br><p>  for(j = 8; j > 0; j--){ </p><br><p>  self.moveBy(0,j); </p><br><p>  self.moveBy(j,0); </p><br><p>  self.moveBy(0,-j); </p><br><p>  self.moveBy(-j,0); </p><br><p>  } </p><br><p>  } </p><br><p>  } </p><br><p>  三、讨厌很多网站总是按照默认窗口打开,如果你能随心所欲控制打开的窗口那该多好。 </p><br><p>  代码如下: </p><br><p>  <!-- Begin </p><br><p>  function popupPage(l, t, w, h) { </p><br><p>  var windowprops = "location=no,scrollbars=no,menubars=no,toolbars=no,resizable=yes" + </p><br><p>  ",left=" + l + ",top=" + t + ",width=" + w + ",height=" + h; </p><br><p>  var URL = "<a href="http://www.80cn.com">http://www.80cn.com</a>"; </p><br><p>  popup = window.open(URL,"MenuPopup",windowprops); </p><br><p>  } </p><br><p>  // End --> </p><br><p>  打开页面的参数</p><br><p>  离开左边的距离: pixels </p><br><p>  离开右边的距离: pixels </p><br><p>  窗口的宽度: pixels </p><br><p>  窗口的高度: pixels </p><br><p>  <input type=button value="打开这个窗口!" onClick="popupPage(this.form.left.value, this.form.top.value, this.form.width.value,</p> <p>this.form.height.value)"> </p><br><p>  你只要在相对应的对话框中输入一个数值即可,将要打开的页面的窗口控制得很好。 </p><br><p>44、页面的打开移动</p><br><p>把如下代码加入区域中</p><br><p><!-- Begin</p> <p>for (t = 2; t > 0; t--) {</p> <p>for (x = 20; x > 0; x--) {</p> <p>for (y = 10; y > 0; y--) {</p> <p>parent.moveBy(0,-x);</p> <p> }</p> <p>}</p> <p>for (x = 20; x > 0; x--) {</p> <p>for (y = 10; y > 0; y--) {</p> <p>parent.moveBy(0,x);</p> <p> }</p> <p>}</p> <p>for (x = 20; x > 0; x--) {</p> <p>for (y = 10; y > 0; y--) {</p> <p>parent.moveBy(x,0);</p> <p> }</p> <p>}</p> <p>for (x = 20; x > 0; x--) {</p> <p>for (y = 10; y > 0; y--) {</p> <p>parent.moveBy(-x,0);</p> <p> }</p> <p> } </p> <p>}</p> <p>//--></p><br><p>// End --></p><br><p>45、显示个人客户端机器的日期和时间</p><br><p><!-- Hiding</p><br><p> today = new Date()</p><br><p> </em></strong>("现 在 时 间 是: ",today.getHours(),":",today.getMinutes())</p><br><p> <strong><em>("</p><br><p>今 天 日 期 为: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());</p><br><p>// end hiding contents --></p><br><p>46、自动的为你每次产生最後修改的日期了: </p><br><p>This is a simple HTML- page.</p><br><p>Last changes:</p><br><p> <!-- hide script from old browsers</p><br><p> </em></strong>(document.lastModified)</p><br><p> // end hiding contents --></p><br><p>47、不能为空和邮件地址的约束:</p><br><p><!-- Hide</p> <p>function test1(form) {</p> <p> if (form.text1.value == "")</p> <p> alert("您 没 写 上 任 何 东 西, 请 再 输 入 一 次 !")</p> <p> else { </p> <p> alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");</p> <p> }</p> <p>}</p> <p>function test2(form) {</p> <p> if (form.text2.value == "" || </p> <p> form.text2.value.indexOf('@', 0) == -1) </p> <p> alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");</p> <p> else alert("您 已 输//代码效果参考:http://hnjlyzjd.com/xl/wz_24475.html<p></p> 入 完 成 !");</p> <p>}</p> <p>// --></p><br><p>Enter your name:</p><br><p>Enter your e-mail address:</p><br><p>48、跑马灯</p><br><p><!-- Hide</p> <p>var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"Here goes your message the visitors to your </p> <p>page will "+"look at for hours in pure fascination...";</p> <p>var lentxt=scrtxt.length;</p> <p>var width=100;</p> <p>var pos=1-width;</p> <p>function scroll() {</p> <p> pos++;</p> <p> var scroller="";</p> <p> if (pos==lentxt) {</p> <p> pos=1-width;</p> <p> }</p> <p> if (pos<0) {</p> <p> for (var i=1; i<=Math.abs(pos); i++) {</p> <p> scroller=scroller+" ";}</p> <p> scroller=scroller+scrtxt.substring(0,width-i+1);</p> <p> }</p> <p> else {</p> <p> scroller=scroller+scrtxt.substring(pos,width+pos);</p> <p> }</p> <p> window.status = scroller;</p> <p> setTimeout("scroll()",150);</p> <p> }</p> <p>//--></p><br><p>这里可显示您的网页 !</p><br><p>49、在网页中用按钮来控制前页,后页和主页的显示。</p><br><p>50、查看某网址的源代码</p><br><p>把如下代码加入区域中</p><br><p>function add()</p><br><p>{</p><br><p>var ress=document.forms【0】.luxiaoqing.value</p><br><p>window.location="view-source:"+ress;</p><br><p>}</p><br><p>输入要查看源代码的URL地址:</p><br><p>51、title显示日期</p><br><p>把如下代码加入区域中:</p><br><p><!--hide</p> <p>var isnMonth = new</p> <p>Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");</p> <p>var isnDay = new</p> <p>Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");</p> <p>today = new Date () ;</p> <p>Year=today.getYear();</p> <p>Date=today.getDate();</p> <p>if (document.all)</p> <p>document.title="今天是: "+Year+"年"+isnMonth【today.getMonth()】+Date+"日"+isnDay【today.getDay()】</p> <p>//--hide--></p><br><p>52、显示所有链接</p><br><p>把如下代码加入区域中</p><br><p><!--</p> <p>function extractlinks(){</p> <p>var links=document.all.tags("A")</p> <p>var total=links.length</p> <p>var win2=window.open("","","menubar,scrollbars,toolbar")</p> <p>win2.***("一共有"+total+"个连接</p> <p>")</p> <p>for (i=0;i<total;i++){</p> <p>win2.***(""+links【i】.outerHTML+"</p> <p>")</p> <p>}</p> <p>}</p> <p>//--></p><br><p>53、回车键换行</p><br><p>把如下代码加入区域中</p><br><p>function handleEnter (field, event) {</p><br><p> var keyCode = event.keyCode ? event.keyCode : event.which ?</p><br><p>event.which : event.charCode;</p><br><p> if (keyCode == 13) {</p><br><p> var i;</p><br><p> for (i = 0; i < field.form.elements.length; i++)</p><br><p> if (field == field.form.elements【i】)</p><br><p> break;</p><br><p> i = (i + 1) % field.form.elements.length;</p><br><p> field.form.elements【i】.focus();</p><br><p> return false;</p><br><p> } </p><br><p> else</p><br><p> return true;</p><br><p>} </p><br><p>回车换行</p><br><p>54、确认后提交</p><br><p>把如下代码加入区域中</p><br><p><!--</p> <p>function msg(){</p> <p>if (confirm("你确认要提交嘛!"))</p> <p>document.lnman.submit()</p> <p>}</p> <p>//--></p><br><p>55、改变表格的内容</p><br><p>把如下代码加入区域中</p><br><p>var arr=new Array()</p><br><p>arr【0】="一一一一一";</p><br><p>arr【1】="二二二二二";</p><br><p>arr【2】="三三三三三";</p><br><p> 改变第一格</p><br><p> 改变第二格</p><br><p> 改变第三格</p><br><p> 第一格</p><br><p>第二格</p><br><p>第三格</p><br><p> 只为成功找方法,不为失败找理由!</p>

相关文章
|
3月前
|
JavaScript 前端开发 IDE
TypeScript vs. JavaScript:技术对比与核心差异解析
TypeScript 作为 JavaScript 的超集,通过静态类型系统、编译时错误检测和强大的工具链支持,显著提升代码质量与可维护性,尤其适用于中大型项目和团队协作。相较之下,JavaScript 更灵活,适合快速原型开发。本文从类型系统、错误检测、工具支持等多维度对比两者差异,并提供技术选型建议,助力开发者合理选择。
775 1
|
3月前
|
监控 JavaScript 前端开发
JavaScript加密与解密技术:Hook技术应用案例分析
以上案例展示了如何利用JavaScript Hook技术结合强大且广泛采纳标准化算法(如AES),无缝地集成进Web应用程序以增强通信安全性。此种方法不仅能够确保敏感信息得到有效保护,并且由于它们操作适度透明、无需重构已存在代码基础架构而具备较高实际可行性及易操作性。
188 11
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
394 1
|
7月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
204 4
|
10月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
480 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
10月前
|
监控 网络协议 算法
基于问题“如何监控局域网内的电脑”——Node.js 的 ARP 扫描算法实现局域网内计算机监控的技术探究
在网络管理与安全领域,监控局域网内计算机至关重要。本文探讨基于Node.js的ARP扫描算法,通过获取IP和MAC地址实现有效监控。使用`arp`库安装(`npm install arp`)并编写代码,可定期扫描并对比设备列表,判断设备上线和下线状态。此技术适用于企业网络管理和家庭网络安全防护,未来有望进一步提升效率与准确性。
382 8
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
457 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
296 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
235 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
152 0