常用js代码大全(三)
时间：2008-04-22 来源：傲枭
九、从左到右的色彩变化——来自布拉格公园
常用js封装
<?php
//
// +----------------------------------------------------------------------+
// | JS javascript 类 |
// +----------------------------------------------------------------------+
// | Copyright (c) 2001 NetFish Software |
// | |
// | Author: whxbb([email protected]) |
// +----------------------------------------------------------------------+
//
// $Id: js.class.php,v 0.1 2001/8/5 18:48:33 yf Exp $
//
// 禁止直接访问该页面
if (basename($HTTP_SERVER_VARS['PHP_SELF']) == "js.class.php") {
header("HTTP/1.0 404 Not Found");
}
/**
* Purpose
* 封装了一些常用的Javascript代码，以便在PHP中快速调用
* @author : whxbb([email protected])
* @version : 0.1
* @date : 2001/8/5
*/
class JS
{
function JS(){}
/**
* 返回上页
* @param $step 返回的层数 默认为1
*/
function Back($step = -1)
{
$msg = "history.go(".$step.");";
JS::_Write($msg);
JS::FreeResource();
exit;
}
/**
* 弹出警告的窗口
* @param $msg 警告信息
*/
function Alert($msg)
{
$msg = "alert("".$msg."");";
JS::_Write($msg);
}
/**
* 写js
* @param $msg
*/
function _Write($msg)
{
echo "";
}
/**
* 刷新当前页
*/
function Reload()
{
$msg = "location.reload();";
JS::FreeResource();
JS::_Write($msg);
exit;
}
/**
* 刷新弹出父页
*/
function ReloadOpener()
{
$msg = "if (opener) opener.location.reload();";
JS::_Write($msg);
}
/**
* 跳转到url
* @param $url 目标页
*/
function Goto($url)
{
$msg = "location.href = '$url';";
JS::FreeResource();
JS::_Write($msg);
exit;
}
/**
* 关闭窗口
*/
function Close()
{
$msg = "window.close()";
JS::FreeResource();
JS::_Write($msg);
exit;
}
/**
* 提交表单
* @param $frm 表单名
*/
function Submit($frm)
{
$msg = $frm.".submit();";
JS::_Write($msg);
}
/**
* 关闭数据库连接
*/
function FreeResource()
{
// 数据库连接标志
global $conn;
if (is_resource($conn))
@mysql_close($conn);
}
}
?>
1．让文字不停地滚动
＜MARQUEE＞滚动文字＜/MARQUEE＞
2．记录并显示网页的最后修改时间
＜script language=javascript＞ document．write("最后更新时间: " + document．lastModified + "") ＜/script＞
3．关闭当前窗口
＜a href="/"onClick="javascript：window.close();return false;"＞关闭窗口＜/a＞
4．5秒后关闭当前页
＜script language="javascript"＞ ＜!-- setTimeout('window.close();',5000); --＞ ＜/script＞
5．2秒后载入指定网页
＜head＞ ＜meta http-equiv="refresh" content="2;URL=http://你的网址"＞ ＜/head＞
6．添加到收藏夹
＜Script Language="javascript"＞ function bookmarkit() { window.external.addFavorite('http://你的网址','你的网站名称') } if (document．all)document．write('＜a href="#" onClick="bookmarkit()"＞加入收藏夹＜/a＞') ＜/Script＞
7．让超链接不显示下划线
＜style type="text/css"＞ ＜!- a:link{text-decoration:none} a:hover{text-decoration:none} a:visited{text-decoration:none} -＞ ＜/style＞
8．禁止鼠标右键的动作
＜Script Language = "javascript"＞ function click() { if (event.button==2||event.button==3) { alert('禁止鼠标右键'); } document．onmousedown=click // --＞ ＜/Script＞
9．设置该页为首页
＜body bgcolor="#FFFFFF" text="#000000"＞ ＜!-- 网址：http://你的网址--＞ ＜a class="chlnk" style="cursor:hand" HREF onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('你的网站名称);"＞＜font color="000000" size="2" face="宋体"＞设为首页＜/font＞＜/a＞ ＜/body＞
10．节日倒计时
＜Script Language="javascript"＞ var timedate= new Date("December 25,2003"); var times="圣诞节"; var now = new Date(); var date = timedate.getTime() - now.getTime(); var time = Math.floor(date / (1000 * 60 * 60 * 24)); if (time ＞= 0) document．write("现在离"+times+"还有: "+time +"天")＜/Script＞
11．单击按钮打印出当前页
＜Script Language="javascript"＞ ＜!-- Begin if (window.print) { document．write('＜form＞' + '＜input type=button name=print value="打印本页" ' + 'onClick="javascript：window.print()"＞＜/form＞'); } // End --＞ ＜/Script＞
12．单击按钮‘另存为’当前页
＜input type="button" name="Button" value="保存本页" onClick="document．all.button.ExecWB(4,1)"＞ ＜object id="button" width=0 height=0 classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"＞ ＜embed width="0" height="0"＞＜/embed＞ ＜/object＞
13．显示系统当前日期
＜script language=javascript＞ today=new Date(); function date(){ this.length=date.arguments.length for(var i=0;i＜this.length;i++) this[i+1]=date.arguments } var d=new date("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); document．write( "＜font color=##000000 style='font-size:9pt;font-family: 宋体'＞ ", today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日", d[today.getDay()+1],"＜/font＞" ); ＜/script＞
14．不同时间段显示不同问候语
＜Script Language="javascript"＞ ＜!-- var text=""; day = new Date( ); time = day.getHours( ); if (( time＞=0) && (time ＜ 7 )) text="夜猫子，要注意身体哦！ " if (( time ＞= 7 ) && (time ＜ 12)) text="今天天气……哈哈哈，不去玩吗？" if (( time ＞= 12) && (time ＜ 14)) text="午休时间哦，朋友一定是不习惯午睡的吧？！" if (( time ＞=14) && (time ＜ 18)) text="下午茶的时间到了，休息一下吧！ " if ((time ＞= 18) && (time ＜= 22)) text="您又来了，可别和MM聊太久哦！" if ((time ＞= 22) && (time ＜ 24)) text="很晚了哦，注意休息呀！" document．write(text) //---＞ ＜/Script＞
15．水中倒影效果
＜img id="reflect" src="你自己的图片文件名" width="175" height="59"＞ ＜script language="javascript"＞ function f1() { setInterval("mdiv.filters.wave.phase+=10",100); } if (document．all) { document．write('＜img id=mdiv src="'+document．all.reflect.src+'" style="filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()"＞') window.onload=f1 } ＜/script＞
16．慢慢变大的窗口
＜Script Language="javascript"＞ ＜!-- var Windowsheight=100 var Windowswidth=100 var numx=5 function openwindow(thelocation){ temploc=thelocation if (!(window.resizeTo&&document．all)&&!(window.resizeTo&&document．getElementById)) { window.open(thelocation) return } windowsize=window.open("","","scrollbars") windowsize.moveTo(0,0) windowsize.resizeTo(100,100) tenumxt() } function tenumxt(){ if (Windowsheight＞=screen.availHeight-3) numx=0 windowsize.resizeBy(5,numx) Windowsheight+=5 Windowswidth+=5 if (Windowswidth＞=screen.width-5) { windowsize.location=temploc Windowsheight=100 Windowswidth=100 numx=5 return } setTimeout("tenumxt()",50) } //--＞ ＜/script＞ ＜p＞＜a href="javascript：openwindow(http://www.xxx.com)"＞进入＜/a＞
17．改变IE地址栏的IE图标
我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码： ＜link REL = "Shortcut Icon" href="index.ico"＞
55种常用javascript使用技巧
大 | 中 | 小
. 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. 永远都会带着框架
9. 防止被人frame
10. 网页将不能被另存为
<noscript><iframe src="/*.html>";</iframe></noscript>
11. <input type=button value=查看网页源代码
onclick="window.location = "view-source:"+ "http://www.pconline.com.cn...
12.删除时确认
<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>
13. 取得控件的绝对位置
//Javascript
//VBScript
14. 光标是停在文本框文字的最后
<input type=text name=text1 value="123" onfocus="cc()">
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
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 onblur="this.focus();">
22.不要滚动条?
让竖条没有:
<body style="overflow:scroll;overflow-y:hidden">
</body>
让横条没有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
两个都去掉？更简单了
<body scroll="no">
</body>
23.怎样去掉图片链接点击后，图片周围的虚线？
<a href="#" onFocus="this.blur()"><img src="/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 onload="top.resizeTo(300,200);">
打开页面的位置<body onload="top.moveBy(300,200);">
27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
<STYLE>
body
{background-image:url(/logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>
28. 检查一段字符串是否全由数字组成
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. 日期减去天数等于第二个日期
33. 选择了哪一个Radio
<HTML><BODY>
<INPUT name="radio1" type="radio" value="style" checked>Style
<INPUT name="radio1" type="radio" value="barcode">Barcode
<INPUT type="button" value="check" onclick="checkme()">
</BODY></HTML>
34.脚本永不出错
35.ENTER键可以让光标移到下一个输入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9">
36. 检测某个网站的链接速度：
把如下代码加入<body>区域中:
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.51js.com">
40.网页是否被检索
<meta name="ROBOTS" content="属性值">
其中属性值有以下一些:
属性值为"all": 文件将被检索，且页上链接可被查询；
属性值为"none": 文件不被检索，而且不查询页上的链接；
属性值为"index": 文件将被检索；
属性值为"follow": 查询页上的链接；
属性值为"noindex": 文件不检索，但可被查询链接；
属性值为"nofollow": 文件不被检索，但可查询页上的链接。
41、email地址的分割
把如下代码加入<body>区域中
<a href="mailto:[email protected]">[email protected]</a>
42、流动边框效果的表格
把如下代码加入<body>区域中
43、JavaScript主页弹出窗口技巧
窗口中间弹出
============
<html>
<head>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
==============
一、在下面的代码中，你只要单击打开一个窗口，即可链接到赛迪网。而当你想关闭时，只要单击一下即可关闭刚才打开的窗口。
代码如下：
<FORM>
<INPUT TYPE="BUTTON" NAME="open" value="打开一个窗口" onClick="openclk()">
<BR>
<INPUT TYPE="BUTTON" NAME="close" value="关闭这个窗口" onClick="closeclk()">
</FORM>
二、上面的代码也太静了，为何不来点动感呢？如果能给页面来个降落效果那该多好啊！
代码如下：
<body onLoad="drop(300)">
三、讨厌很多网站总是按照默认窗口打开，如果你能随心所欲控制打开的窗口那该多好。
代码如下:
<table>
<tr>
<td>
<form name=popupform>
<pre>
打开页面的参数<br>
离开左边的距离: <input type=text name=left size=2 maxlength=4> pixels
离开右边的距离: <input type=text name=top size=2 maxlength=4> pixels
窗口的宽度: <input type=text name=width size=2 maxlength=4> pixels
窗口的高度: <input type=text name=height size=2 maxlength=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>区域中
45、显示个人客户端机器的日期和时间
46、自动的为你每次产生最後修改的日期了：
<html>
<body>
This is a simple HTML- page.
<br>
Last changes:
</body>
</html>
47、不能为空和邮件地址的约束：
<html>
<head>
</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>
</head>
<body onLoad="scroll();return true;">
这里可显示您的网页 !
</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>区域中
输入要查看源代码的URL地址:
<FORM><input type="text" name="luxiaoqing" size=40 value="http://"></FORM...
<FORM><br>
<INPUT type="button" value="查看源代码" onClick=add()>
</FORM>
51、title显示日期
把如下代码加入<body>区域中:
52、显示所有链接
把如下代码加入<body>区域中
<input type="button" onClick="extractlinks()" value="显示所有的连接">
53、回车键换行
把如下代码加入<body>区域中
<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea>回车换行
54、确认后提交
把如下代码加入<body>区域中
<form name="lnman" method="post" action="">
<p>
<input type="text" name="textfield" value="确认后提交">
</p>
<p>
<input type="button" name="Submit" value="提交" onclick="msg();">
</p>
</form>
55、改变表格的内容
把如下代码加入<body>区域中
<select onchange="zz.cells[this.selectedIndex].innerHTML=arr[this.selectedIndex]">
<option value=a>改变第一格</option>
<option value=a>改变第二格</option>
<option value=a>改变第三格</option>
</select>
<table id=zz border=1>
<tr height=20>
<td width=150>第一格</td>
<td width=150>第二格</td>
<td width=150>第三格</td>
</tr>
</table>
<a href="javascript:history.back(-1)">返回</a>
HTML文档中小meta的大作用
|
作者：佚名 责任编辑：达摩克利斯之剑 |
Meta是用来在HTML文档中模拟HTTP协议的响应头报文，用于网页的<head>与</head>中，其属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：
name 属性
<meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；
<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；
<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；
<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">其中的属性说明如下：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv属性
<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80">
和
<meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
<meta http-equiv="Refresh" contect="n;url=http://yourlink" >定时让网页在指定的时间n内，跳转到页面http;//yourlink；
<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
<meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion=50)">和<meta http-equiv="Page-Exit"contect="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。
代替submit按钮的图片代码格式是
＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞
代替reset按钮的代码图片格式是
<a href="javascript :document.formName.reset();">＜img border=0 src="..."＞</a>
注：这里的formName是表单的name属性值
onClick="GP_popupConfirmMsg('您确定要删除吗？');return document.MM_returnValue"
相关阅读 更多 +
