老贴：40种网站设计常用技巧（JS）

piperzero · 发表于 2013-1-29 09:22:18

转自http://topic.csdn.net/t/20061220/16/5244445.html
1.  oncontextmenu="window.event.returnValue=false"  将彻底屏蔽鼠标右键
  <table  border  oncontextmenu=return(false)><td>no</table>  可用于Table

  2.  <body  onselectstart="return  false">  取消选取、防止复制

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

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

  5.  <link  rel="Shortcut  Icon"  href="favicon.ico">  IE地址栏前换成自己的图标

  6.  <link  rel="Bookmark"  href="favicon.ico">  可以在收藏夹中显示出你的图标

  7.  <input  style="ime-mode:disabled">  关闭输入法

  8.  永远都会带着框架
  <script  language="JavaScript"></script>

  9.  防止被人frame
  <SCRIPT  LANGUAGE=JAVASCRIPT></SCRIPT>

  10.  网页将不能被另存为
  <noscript><iframe  src="/blog/*.html>";</iframe></noscript>

  11.  <input  type=button  value=查看网页源代码
  view-source:"+  "http://www.williamlong.info"">

  12.删除时确认
  <a  href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>

  13.  取得控件的绝对位置
  //Javascript
  <script  language="Javascript">
  function  getIE(e){
  var  t=e.offsetTop;
  var  l=e.offsetLeft;
  while(e=e.offsetParent)
  alert("top="+t+"/nleft="+l);
  }
  </script>

  //VBScript
  <script  language="VBScript"></script>

  14.  光标是停在文本框文字的最后
  <script  language="javascript">
  function  cc()
  {
  var  e  =  event.srcElement;
  var  r  =e.createTextRange();
  r.moveStart("character",e.value.length);
  r.collapse(true);
  r.select();
  }
  </script>
  <input  type=text  name=text1  value="123"  >

  15.  判断上一页的来源
  javascript:
  document.referrer
16.  最小化、最大化、关闭窗口
  <object  id=hh1  classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
  <param  name="Command"  value="Minimize"></object>
  <object  id=hh2  classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
  <param  name="Command"  value="Maximize"></object>
  <OBJECT  id=hh3  classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
  <PARAM  NAME="Command"  VALUE="Close"></OBJECT>
  <input  type=button  value=最小化  onclick=hh1.Click()>
  <input  type=button  value=最大化  onclick=hh2.Click()>
  <input  type=button  value=关闭  onclick=hh3.Click()>
  本例适用于IE

  17.屏蔽功能键Shift,Alt,Ctrl
  <script>
  function  look(){
  if(event.shiftKey)
  alert("禁止按Shift键!");  //可以换成ALT　CTRL
  }
  document.onkeydown=look;
  </script>

  18.  网页不会被缓存
  <META  HTTP-EQUIV="pragma"  CONTENT="no-cache">
  <META  HTTP-EQUIV="Cache-Control"  CONTENT="no-cache,  must-revalidate">
  <META  HTTP-EQUIV="expires"  CONTENT="Wed,  26  Feb  1997  08:21:57  GMT">
  或者<META  HTTP-EQUIV="expires"  CONTENT="0">

  19.怎样让表单没有凹凸感？
  <input  type=text  style="border:1  solid  #000000">
  或
  <input  type=text  style="border-left:none;  border-right:none;  border-top:none;  border-bottom:

  1  solid  #000000"></textarea>

  20.<div><span>&<layer>的区别？
  <div>(division)用来定义大段的页面元素，会产生转行
  <span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行
  <layer>是ns的标记，ie不支持，相当于<div>

  21.让弹出窗口总是在最上面:
  <body  >

  22.不要滚动条?
  让竖条没有:
  <body  style="overflow:scroll;overflow-y:hidden">
  </body>
  让横条没有:
  <body  style="overflow:scroll;overflow-x:hidden">
  </body>
  两个都去掉？更简单了
  <body  scroll="no">
  </body>

  23.怎样去掉图片链接点击后，图片周围的虚线？
  <a  href="#"  ><img  src="/blog/logo.jpg"  border=0></a>

  24.电子邮件处理提交表单
  <form  name="form1"  method="post"  action="mailto:****@***.com"  enctype="text/plain">
  <input  type=submit>
  </form>

  25.在打开的子窗口刷新父窗口的代码里如何写？
  window.opener.location.reload()

  26.如何设定打开页面的大小
  <body  >
  打开页面的位置<body  >

  27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
  <STYLE>
  body
  {background-image:url(/blog/logo.gif);  background-repeat:no-repeat;
  background-position:center;background-attachment:  fixed}
  </STYLE>

  28.  检查一段字符串是否全由数字组成
  <script  language="Javascript"></script>

  29.  获得一个窗口的大小
  document.body.clientWidth;  document.body.clientHeight

  30.  怎么判断是否是字符
  if  (/[^/x00-/xff]/g.test(s))  alert("含有汉字");
  else  alert("全是字符");

  31.TEXTAREA自适应文字行数的多少
  <textarea  rows=1  name=s1  cols=27  onpropertychange="this.style.posHeight=this.scrollHeight">
  </textarea>

  32.  日期减去天数等于第二个日期
  <script  language=Javascript>
  function  cc(dd,dadd)
  {
  //可以加上错误处理
  var  a  =  new  Date(dd)
  a  =  a.valueOf()
  a  =  a  -  dadd  *  24  *  60  *  60  *  1000
  a  =  new  Date(a)
  alert(a.getFullYear()  +  "年"  +  (a.getMonth()  +  1)  +  "月"  +  a.getDate()  +  "日")
  }
  cc("12/23/2002",2)
  </script>

  33.  选择了哪一个Radio
  <HTML><script  language="vbscript">
  function  checkme()
  for  each  ob  in  radio1
  if  ob.checked  then  window.alert  ob.value
  next
  end  function
  </script><BODY>
  <INPUT  name="radio1"  type="radio"  value="style"  checked>Style
  <INPUT  name="radio1"  type="radio"  value="barcode">Barcode
  <INPUT  type="button"  value="check"  >
  </BODY></HTML>

  34.脚本永不出错
  <SCRIPT  LANGUAGE="JavaScript">
  
  </SCRIPT>

  35.ENTER键可以让光标移到下一个输入框
  <input  onkeydown="if(event.keyCode==13)event.keyCode=9">
36.  检测某个网站的链接速度：
  把如下代码加入<body>区域中:
  <script  language=Javascript>
  tim=1
  setInterval("tim++",100)
  b=1
  var  autourl=new  Array()
  autourl[1]="www.njcatv.net"
  autourl[2]="javacool.3322.net"
  autourl[3]="www.sina.com.cn"
  autourl[4]="www.nuaa.edu.cn"
  autourl[5]="www.cctv.com"
  function  butt(){
  document.write("<form  name=autof>")
  for(var  i=1;i<autourl.length;i++)
  document.write("<input  type=text  name=txt"+i+"  size=10  value="/blog/测试中......>"  =》<input  type=text
  name=url"+i+"  size=40>  =》<input  type=button  value=GO

  onclick=window.open(this.form.url"+i+".value)><br>")
  document.write("<input  type=submit  value=刷新></form>")
  }
  butt()
  function  auto(url)
  else

  b++
  }
function  run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+"  width=1  height=1

  onerror=auto("http://"+autourl+"")>")}
  run()</script>

  37.  各种样式的光标
  auto  ：标准光标
  default  ：标准箭头
  hand  ：手形光标
  wait  ：等待光标
  text  ：I形光标
  vertical-text  ：水平I形光标
  no-drop  ：不可拖动光标
  not-allowed  ：无效光标
  help  ：?帮助光标
  all-scroll  ：三角方向标
  move  ：移动标
  crosshair  ：十字标
  e-resize
  n-resize
  nw-resize
  w-resize
  s-resize
  se-resize
  sw-resize

  38.页面进入和退出的特效
  进入页面<meta  http-equiv="Page-Enter"  content="revealTrans(duration=x,  transition=y)">
  推出页面<meta  http-equiv="Page-Exit"  content="revealTrans(duration=x,  transition=y)">
  这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:
  　　0  矩形缩小
  　　1  矩形扩大
  　　2  圆形缩小
  　　3  圆形扩大
  　　4  下到上刷新
  　　5  上到下刷新
  　　6  左到右刷新
  　　7  右到左刷新
  　　8  竖百叶窗
  　　9  横百叶窗
  　　10  错位横百叶窗
  　　11  错位竖百叶窗
  　　12  点扩散
  　　13  左右到中间刷新
  　　14  中间到左右刷新
  　　15  中间到上下
  　　16  上下到中间
  　　17  右下到左上
  　　18  右上到左下
  　　19  左上到右下
  　　20  左下到右上
  　　21  横条
  　　22  竖条
  　　23  以上22种随机选择一种

  39.在规定时间内跳转
  <META  http-equiv=V="REFRESH"  content="5;URL=http://www.williamlong.info">

  40.网页是否被检索
  <meta  name="ROBOTS"  content="属性值">
  　　其中属性值有以下一些:
  　　属性值为"all":  文件将被检索，且页上链接可被查询；
  　　属性值为"none":  文件不被检索，而且不查询页上的链接；
  　　属性值为"index":  文件将被检索；
  　　属性值为"follow":  查询页上的链接；
  　　属性值为"noindex":  文件不检索，但可被查询链接；
  　　属性值为"nofollow":  文件不被检索，但可查询页上的链接。

  最大化窗口？
  <script  language="JavaScript">
  
  </script>

解决问题：由于层与下拉框之间的优先级是：下拉框  > 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的  z-index 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：

<div  id="menu"  style="position:absolute;  visibility:hidden; top:20px;  left:20px;  width:100px;  height:200px; background-color:#6699cc;">
  <table>
   <tr><td>item  1</td></tr>
   <tr><td>item  2</td></tr>
   <tr><td>item  3</td></tr>
   <tr><td>item  4</td></tr>
   <tr><td>item  5</td></tr>
   </table>
<iframe  src="/blog/javascript:false" style="position:absolute;  visibility:inherit;  top:0px;  left:0px; width:100px;  height:200px;  z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>
  </div>

  <a  href="#"  >menu</a>

  <form>
   <select><option>A  form  selection  list</option></select>
  </form>

  输入框也可以做的很漂亮了
  <div  align="center"><input  type="hidden"  name="hao"  value="yes">
                           外向数：<input
            name=answer
   style="color:  rgb(255,0,0);  border-left:  medium none;  border-right:  medium  none;  border-top:  medium  none; border-bottom:  1px  solid  rgb(192,192,192)">
                        　没回答的题数：<input
            name=unanswer  id="unanswer"
   style="color:  rgb(255,0,0);  border-left:  medium none;  border-right:  medium  none;  border-top:  medium  none; border-bottom:  1px  solid  rgb(192,192,192)">
                        <br>
                        总得分:
                        <input
            name=score  id="score"
   style="color:  rgb(255,0,0);  border-left:  medium none;  border-right:  medium  none;  border-top:  medium  none; border-bottom:  1px  solid  rgb(192,192,192)">
                        　结　　　　论:
                        <input
            name=xgjg  id="xgjg"
   style="color:  rgb(255,0,0);  border-left:  medium none;  border-right:  medium  none;  border-top:  medium  none; border-bottom:  1px  solid  rgb(192,192,192)">
                        <br>
                        <br>

         <input  onClick=processForm(this.form) style="FONT-FAMILY:  宋体;  FONT-SIZE:  9pt"  type=button value=查看结果  name="button">
                        <input  type="reset"  name="Submit"  value="重做">
                        </div>
  注意：修改<body>为<body  >即为打开最大

  化窗口，而如果改为<body  >就变为窗口一打开就最小化

  <object  id="min"  type="application/x-oleobject"  classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
                        <param  name="Command"  value="Minimize">
         </object>  <object  id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
                        <param  name="Command"  value="Maximize">
                  </object>
  </body>

  页面自动刷新（说明）

  当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

  1，页面自动刷新：把如下代码加入<head>区域中<meta  http-equiv="refresh"  content="20">,其中20指每隔20秒刷新一次页面.

2，页面自动跳转：把如下代码加入<head>区域中<meta  http-equiv="refresh" content="20;url=http://www.williamlong.info">,其中20指隔20秒后跳转到http://www.williamlong.info页面。

  页面自动关闭

  5000是指时间<body  >

  弹出窗口自动关闭

  10秒后弹出窗口自动关闭

  注意：在新的tan.htm的body中要加  <>
  head

  <script  language="JavaScript">

  

  </script>
  <body>注意：这段代码是在新建文件中的
  <script  language="JavaScript">

function  closeit()

</script>

  这个可不是<iframe>(引用）呀。是直接调用的。以下代码加入<body>区域

  <object  type="text/x-scriptlet"  width="800" height="1000"  data="../index.htm">
  </object>

		自动登录	找回密码
密码			立即注册