Javascript中最常用的55个经典技巧（3）

于 2014-01-22 00:29:07 发布
阅读量633 收藏
点赞数
分类专栏： 各种小技巧
41、email地址的分割
把如下代码加入 <body>区域中
<ahref="mailto:webmaster@sina.com">webmaster@sina.com</a>


42、流动边框效果的表格
把如下代码加入 <body>区域中
<SCRIPT>
l=Array(6,7,8,9,'a','b','b','c','d','e','f')
Nx=5;Ny=35
t=" <table border=0 cellspacing=0 cellpadding=0height="+((Nx+2)*16)+"><tr>"
for(x=Nx;x <Nx+Ny;x++)
t+=" <td width=16 id=a_mo"+x+">　</td>"
t+=" </tr><tr> <td width=10id=a_mo"+(Nx-1)+">　</td> <tdcolspan="+(Ny-2)+" rowspan="+(Nx)+">　</td> <td width=16id=a_mo"+(Nx+Ny)+"></td></tr>"
for(x=2;x <=Nx;x++)
t+=" <tr> <td width=16id=a_mo"+(Nx-x)+">　</td> <td width=16id=a_mo"+(Ny+Nx+x-1)+">　</td></tr>"
t+=" <tr>"
for(x=Ny;x>0;x--)
t+=" <td width=16id=a_mo"+(x+Nx*2+Ny-1)+">　</td>"
***(t+" </tr></table>")
var N=Nx*2+Ny*2
function f1(y){
for(i=0;i <N;i++){
c=(i+y) ;if(c>10)c=20-c
document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"'"}
y++
setTimeout('f1('+y+')','1')}
f1(1)
</SCRIPT>
43、JavaScript主页弹出窗口技巧
窗口中间弹出
<script>
window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth-400)/2);
</script>
============
<html>
<head>
<script language="LiveScript">
function WinOpen() {
    msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
    msg.***("<HEAD><TITLE>哈 罗!</TITLE></HEAD>");
    msg.***("<CENTER><H1>酷 毙 了!</H1><h2>这 是<B>JavaScript</B>所 开 的 视 窗!</h2></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me"οnclick="WinOpen()">
</form>
</body>
</html>
==============
一、在下面的代码中，你只要单击打开一个窗口，即可链接到赛迪网。而当你想关闭时，只要单击一下即可关闭刚才打开的窗口。
　　代码如下：
　　 <SCRIPTlanguage="JavaScript">
　　 <！--
　　function openclk() {
　　another=open('1000){this.resized=true;this.style.width=1000;}"align=absMiddleborder=0>http://www.ccidnet.com'，'NewWindow');
　　}
　　function closeclk() {
　　another.close();
　　}
　　//-->
　　 </SCRIPT>
　　 <FORM>
　　 <INPUT TYPE="BUTTON" NAME="open" value="/打开一个窗口"onClick="openclk()">
　　 <BR>
　　 <INPUT TYPE="BUTTON" NAME="close"value="/blog/关闭这个窗口" onClick="closeclk()">
　　 </FORM>
　　二、上面的代码也太静了，为何不来点动感呢？如果能给页面来个降落效果那该多好啊！
　　代码如下：
　　 <script>
　　function drop(n) {
　　if(self.moveBy){
　　self.moveBy (0，-900);
　　for(i = n; i > 0; i--){
　　self.moveBy(0，3);
　　}
　　for(j = 8; j > 0; j--){
　　self.moveBy(0，j);
　　self.moveBy(j，0);
　　self.moveBy(0，-j);
　　self.moveBy(-j，0);
　　}
　　}
　　}
　　 </script>
　　 <body onLoad="drop(300)">
　　三、讨厌很多网站总是按照默认窗口打开，如果你能随心所欲控制打开的窗口那该多好。
　　代码如下:
　　 <SCRIPTLANGUAGE="JavaScript">
　　 <！-- Begin
　　function popupPage(l， t， w， h) {
　　var windowprops ="location=no，scrollbars=no，menubars=no，toolbars=no，resizable=yes"+
　　"，left=" + l + "，top=" + t + "，width=" + w + "，height=" +h;
　　var URL = "http://www.80cn.com";
　　popup = window.open(URL，"MenuPopup"，windowprops);
　　}
　　// End -->
　　 </script>
　　 <table>
　　 <tr>
　　 <td>
　　 <form name=popupform>
　　 <pre>
　　打开页面的参数 <br>
　　离开左边的距离: <input type=text name=left size=2maxlength=4> pixels
　　离开右边的距离: <input type=text name=top size=2maxlength=4> pixels
　　窗口的宽度: <input type=text name=width size=2maxlength=4> pixels
　　窗口的高度: <input type=text name=height size=2maxlength=4> pixels
　　 </pre>
　　 <center>
　　 <input type=button value="打开这个窗口！"onClick="popupPage(this.form.left.value， this.form.top.value，this.form.width.value，
this.form.height.value)">
　　 </center>
　　 </form>
　　 </td>
　　 </tr>
　　</table>你只要在相对应的对话框中输入一个数值即可，将要打开的页面的窗口控制得很好。
44、页面的打开移动
把如下代码加入 <body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
for (t = 2; t > 0; t--) {
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(0,-x);
  }
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(0,x);
  }
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(x,0);
  }
}
for (x = 20; x > 0; x--) {
for (y = 10; y > 0; y--) {
parent.moveBy(-x,0);
    }
  }
}
//-->
//  End -->
</script>


45、显示个人客户端机器的日期和时间
<script language="LiveScript">
<!-- Hiding
  today = new Date()
  ***("现 在 时 间 是：",today.getHours(),":",today.getMinutes())
  ***(" <br>今 天 日 期为： ",today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>


46、自动的为你每次产生最後修改的日期了：
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
  <scriptlanguage="LiveScript">
  <!--  hidescript from old browsers
    ***(document.lastModified)
  // end hiding contents -->
  </script>
</body>
</html>


47、不能为空和邮件地址的约束：
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
  if (form.text1.value == "")
    alert("您 没 写 上 任 何 东 西， 请 再 输入 一 次 !")
  else {
    alert("嗨"+form.text1.value+"! 您 已 输 入 完 成 !");
  }
}
function test2(form) {
  if (form.text2.value == "" ||
      form.text2.value.indexOf('@', 0) == -1)
        alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次!");
  else alert("您 已 输 入 完 成 !");
}
// -->
</script>
</head>
<body>
<form name="first">
Enter your name: <br>
<input type="text"name="text1">
<input type="button" name="button1" value="输 入 测 试"onClick="test1(this.form)">
<P>
Enter your e-mail address: <br>
<input type="text"name="text2">
<input type="button" name="button2" value="输 入 测 试"onClick="test2(this.form)">
</body>


48、跑马灯
<html>
<head>
<script language="JavaScript">
<!-- Hide
var scrtxt="怎麽样 ! 很酷吧 ! 您也可以试试."+"Here goes your message thevisitors to your
page will "+"look at for hours in pure fascination...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
  pos++;
  var scroller="";
  if (pos==lentxt) {
    pos=1-width;
  }
  if (pos <0) {
    for (var i=1; i<=Math.abs(pos); i++) {
      scroller=scroller+" ";}
    scroller=scroller+scrtxt.substring(0,width-i+1);
  }
  else {
    scroller=scroller+scrtxt.substring(pos,width+pos);
  }
  window.status = scroller;
  setTimeout("scroll()",150);
  }
//-->
</script>
</head>
<body onLoad="scroll();returntrue;">
这里可显示您的网页 !
</body>
</html>


49、在网页中用按钮来控制前页，后页和主页的显示。
<html>
<body>
<FORM NAME="buttonbar">
      <INPUT TYPE="button" VALUE="Back"onClick="history.back()">
      <INPUT TYPE="button" VALUE="JS- Home"onClick="location='script.html'">
      <INPUT TYPE="button" VALUE="Next"onCLick="history.forward()">
</FORM>
</body>
</html>
50、查看某网址的源代码
把如下代码加入 <body>区域中
<SCRIPT>
function add()
{
var ress=document.forms[0].luxiaoqing.value
window.location="view-source:"+ress;
}
</SCRIPT>
输入要查看源代码的URL地址:
<FORM> <inputtype="text" name="luxiaoqing" size=40value="http://"></FORM>
<FORM><br>
<INPUT type="button" value="查看源代码"onClick=add()>
</FORM>


51、title显示日期
把如下代码加入 <body>区域中:
<scriptlanguage="JavaScript1.2">
<!--hide
var isnMonth = new
Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
var isnDay = new
Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六","星期日");
today = new Date () ;
Year=today.getYear();
Date=today.getDate();
if (document.all)
document.title="今天是:"+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]
//--hide-->
</script>


52、显示所有链接
把如下代码加入 <body>区域中
<scriptlanguage="JavaScript1.2">
<!--
function extractlinks(){
var links=document.all.tags("A")
var total=links.length
var win2=window.open("","","menubar,scrollbars,toolbar")
win2.***(" <fontsize='2'>一共有"+total+"个连接</font><br>")
for (i=0;i <total;i++){
win2.***(" <fontsize='2'>"+links[i].outerHTML+"</font><br>")
}
}
//-->
</script>
<input type="button" onClick="extractlinks()"value="显示所有的连接">


53、回车键换行
把如下代码加入 <body>区域中
<scripttype="text/javascript">               
function handleEnter (field, event) {
  var keyCode = event.keyCode ? event.keyCode :event.which ?
event.which : event.charCode;
  if (keyCode == 13) {
    var i;
    for (i = 0; i< field.form.elements.length; i++)
    if (field ==field.form.elements[i])
      break;
    i = (i + 1) %field.form.elements.length;
    field.form.elements[i].focus();
    return false;
  }
  else
  return true;
}     
</script>
<form>
<input type="text" οnkeypress="returnhandleEnter(this, event)"><br>
<input type="text" οnkeypress="returnhandleEnter(this, event)"><br>
<textarea>回车换行


54、确认后提交
把如下代码加入 <body>区域中
<SCRIPT LANGUAGE="JavaScript">
<!--
function msg(){
if (confirm("你确认要提交嘛！"))
document.lnman.submit()
}
//-->
</SCRIPT>
<form name="lnman" method="post"action="">
  <p>
    <inputtype="text" name="textfield" value="确认后提交">
  </p>
  <p>
    <inputtype="button" name="Submit" value="提交"οnclick="msg();">
  </p>
</form>


55、改变表格的内容
把如下代码加入 <body>区域中
<script ***script>
var arr=new Array()
arr[0]="一一一一一";
arr[1]="二二二二二";
arr[2]="三三三三三";
</script>
<selectοnchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
  <optionvalue=a>改变第一格</option>
  <optionvalue=a>改变第二格</option>
  <optionvalue=a>改变第三格</option>
</select>
<table id=zz border=1>
  <trheight=20>
    <tdwidth=150>第一格</td>
<td width=150>第二格</td>
<td width=150>第三格</td>
  </tr>
</table>

张小牙
关注
专栏目录
收藏Javascript中常用的55个经典技巧
10-30
### 收藏Javascript中常用的55个经典技巧详解 #### 1. 屏蔽鼠标右键：`oncontextmenu="window.event.returnValue=false"` 通过在HTML元素上设置`oncontextmenu="window.event.returnValue=false"`属性，可以禁止...
分享Javascript中最常用的55个经典小技巧
10-26
以下就是55个JavaScript中的常用技巧： 1. `oncontextmenu` 事件：通过设置 `window.event.returnValue=false` 可以阻止鼠标右键菜单的显示，例如在表格元素 `<table>` 中应用。 2. `onselectstart` 事件：通过...
Amazon S3：S3静态网站托管教程.docx
11-12
Amazon S3：S3静态网站托管教程.docx
基于支持向量机SVM-Adaboost的风电场预测研究附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于花朵授粉优化算法FPA优化TCN-BiGRU-Attention实现光伏数据回归预测附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
【粗糙面】基于matlab一维介质粗糙面双站散射系数计算【含Matlab源码 9130期】.mp4
11-12
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
CPPC++_半透明效果，大多数的win32飞出.zip
11-12
CPPC++_半透明效果，大多数的win32飞出
mondo rescue离线安装及系统恢复并且问题解决参考
11-12
mondo离线包
VID_20241112_234319.mp4
最新发布
11-12
VID_20241112_234319.mp4
【SCI2区】基于凌日优化算法TSOA优化TCN锂电池健康寿命预测算法研究Matlab实现.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档（毕业设计&课程设计&项目开发）
11-12
基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 基于C/C++实现根据人类手写汉字图片-使用机械臂复写汉字+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 项目简介： 实现根据人类手写汉字，使用机械臂复写汉字 项目目的 完成将相机拍摄的人类手写汉字图像； 通过halcon处理为骨架图片； 再将其剪枝、转换为矢量图； 最后使用UR3机械臂抓握笔将其复写出。
mysql5.7 win版本压缩包
11-12
mysql5.7 win版本压缩包
CatBoost使用示例
11-12
CatBoost使用的一个小例子，包含代码和数据。 代码解释的博文为：https://blog.csdn.net/u013172930/article/details/143723670
CPPC++_一个现代C库的集合包括coro_rpc struct_pack struct_json struct_x.zip
11-12
cppc++
CPPC++_基于ImGui和OpenGL的桌面GUI开发框架 很遗憾项目已荒废.zip
11-12
CPPC++_基于ImGui和OpenGL的桌面GUI开发框架 很遗憾项目已荒废
Python小项目之皮卡丘
11-12
Python小项目之皮卡丘
使用springboot搭建的音乐，电影，书栈，视频教程app的后台项目.zip
11-12
使用springboot搭建的音乐，电影，书栈，视频教程app的后台项目，所有数据来自互联网，使用python爬虫抓取，涉及，负载
【V2G】电动汽车接入电网优化调度研究Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
JavaScript 实用技巧大全：55 个经典技巧
Javascript 中常用的 55 个经典技巧 在本文中，我们将对 Javascript 中常用的 55 个经典技巧进行总结和分析，这些技巧涵盖了防止复制、取消选取、防止粘贴、屏蔽鼠标右键、将 IE 地址栏前换成自己的图标、关闭...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值