技术经验分享: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>

相关文章
|
18天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
39 1
|
2月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
2月前
|
JavaScript 前端开发 API
探索后端技术:Node.js的优势和实际应用
【10月更文挑战第6天】 在当今数字化时代,后端开发是任何成功软件应用的关键组成部分。本文将深入探讨一种流行的后端技术——Node.js,通过分析其核心优势和实际应用案例,揭示其在现代软件开发中的重要性和潜力。
152 2
|
20天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
32 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
36 1
|
2月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
26 3
|
Web App开发 JavaScript 数据安全/隐私保护
|
Web App开发 JavaScript .NET
javascript客户端检测技术
原文:javascript客户端检测技术 javascript客户端检测技术  1. Firefox    Gecko是firefox的呈现引擎。当初的Gecko是作为通用Mozilla浏览器一部分开发的,而第一个采用Gecko引擎的浏览器是Netscape6; 我们可以使用用户代理检测下:如下JS代码: var ua = navigator.
1155 0
|
21天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
21 1
JavaScript中的原型 保姆级文章一文搞懂