web开发常用js及html代码(转)

jiangm520

浏览: 1335704 次
性别:
来自: 成都

最近访客更多访客>>

pcdlrzxx

ringphone

304113037

zfl110

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

HTML Web JavaScript ASP.net 搜索引擎

本文出自:http://tb.blog.csdn.net/TrackBack.aspx?PostId=710544

css
创建CLASS并不是建立多种风格的唯一手段， ID也可以用来实现同一规则被应用到页面中不同的地方。
　　它的语法是：
　　#id名 {标志属性：属性值；标志属性：属性值；……标志属性：属性值}
　　如上面的例子，可以改写为：
　　 < style type="text/css">
　　< !--
　　#001 { font-size: 10pt; color: red}
　　#002 { font-size: 12pt; color: blue}
　　 -->
　　< /style>
　　引用的方法也相同：< 标志　ID＝"ID名">。

============================
javaScript取整：parseInt

通过传参使jsp和javascript通讯
============================
flash加载代码：

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 " width="768" height="100">
<param name="movie" value="images/log1.swf"></param>
<param name="quality" value="high"></param>
<embed src="images/log1.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi ?

P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="768" height="100"></embed>
</object>
============================
返回0到mod之间的随机数：

============================
逗号运算符：
var a=4;
var b;
b=(a=a+1,a*4);
最后结果b=20

============================

简易计算器

<html>
<head>
<title>计算器</title>
<script language="javascript">
function calculate(form){
form.expression.value=eval(form.expression.value);
}
function enter_expr(form,str){
form.expression.value+=str;
}
function clear_expr(form){
form.expression.value="";
}
</script>
</head>
<body>
<div align="center">
<center>
<table border="4" bgcolor="#c0c0c0">
<tr>
    <th><br><tt><h4 align="center"><font color="#000A0">计算器</font></h4></tt></th>
</tr>
<tr align="center">
    <th>
   <form name="form">
     <table border="1">
    <tr>
      <td colspan="4" align="center"><input type="text" name="expression" size="20"></td>
    </tr>
    <tr align="center">
      <td><input type="button" value="7" size="10" onClick="enter_expr(this.form,'7')"></td>
   <td><input type="button" value="8" onClick="enter_expr(this.form,'8')"></td>
   <td><input type="button" value="9" onClick="enter_expr(this.form,'9')"></td>
   <td><input type="button" value="/" onClick="enter_expr(this.form,'/')"></td>
    </tr>
    <tr align="center">
      <td><input type="button" value="4" onClick="enter_expr(this.form,'4')"></td>
      <td><input type="button" value="5" onClick="enter_expr(this.form,'5')"></td>
      <td><input type="button" value="6" onClick="enter_expr(this.form,'6')"></td>
      <td><input type="button" value="*" onClick="enter_expr(this.form,'*')"></td>
    </tr>
    <tr align="center">
      <td><input type="button" value="1" onClick="enter_expr(this.form,'1')"></td>
      <td><input type="button" value="2" onClick="enter_expr(this.form,'2')"></td>
      <td><input type="button" value="3" onClick="enter_expr(this.form,'3')"></td>
      <td><input type="button" value="-" onClick="enter_expr(this.form,'-')"></td>
    </tr>
    <tr align="center">
      <td><input type="button" value="0" onClick="enter_expr(this.form,'0')"></td>
      <td><input type="button" value="." onClick="enter_expr(this.form,'.')"></td>
      <td><input type="button" value="+" onClick="enter_expr(this.form,'+')"></td>
      <td><input type="button" value="%" onClick="enter_expr(this.form,'%')"></td>
    </tr>
    <tr align="center">
      <td colspan="2"><input type="button" value="   =   " onClick="calculate(this.form)"></td>
   <td colspan="2"><input type="button" value=" Clear " onClick="clear_expr(this.form)"></td>
    </tr>
  </table>
   </form>
</th>
</tr>
</table>
</center>
</div>
</body>
</html>

============================
escape(str)：将字符串转化为数字表示；
unescape(str)：将数字转化为字符串表示；
主要用于表单提交数据处理。

============================
with(MyHouse)
{
document.write("addr=",addr,"<br>");
document.write("host=",host,"<br>");
document.write("showHouse=",showHouse,"<br>");
}

============================
日期（每秒更新、包括状态栏时间）
<html><body onLoad="clock()">

<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td id="timeDisp"></td></tr>
</table>
<script language="javascript">
function clock()
{
var digital=new Date();
var year=digital.getYear();
var month=digital.getMonth()+1;
var day=digital.getDate();

var hours=digital.getHours();
var minutes=digital.getMinutes();
var seconds=digital.getSeconds();
if(minutes<=9)minutes="0"+minutes;
if(seconds<=9)seconds="0"+seconds;
dispTime=year+"."+month+"."+day+"<br>"+hours+":"+minutes+":<font color=red>"+seconds+"<font>";
dispTime2=year+"."+month+"."+day+" "+hours+":"+minutes+":"+seconds;
timeDisp.innerHTML=dispTime;
status=dispTime2;
setTimeout("clock()",1000);
}
</script>
</body></html>
============================
打开关闭新窗口
<html><body>
<script language="javascript">
var newwin;
function openNewwin()
{
newwin=open

('0503.htm','myWindow','height=100,width=100,top=200,left=400,toolbar=no,menubar=no,scrollbars=no,resizeable=no,location=no,s

tatus=0');
}
function closeNewwin()
{
newwin.close();
}
</script>
<a href="javascript:openNewwin()">打开新窗口</a>
<a href="javascript:closeNewwin()">关闭新窗口</a>
<a href="javascript:close()">关闭本窗口</a>
</body></html>

============================
status="此字符串显示在状态栏中"
self.moveTo(x,y)
self.moveBy(x,y)
self.resizeTo(x,y)

============================
页面滚动scrollTo
<html>
<head>
<script language="javascript">
n=700;
function scrolldown()
{
for(i=1;i<=n;i++)
{
scrollTo(1,i);
}
}
function scrollup()
{
for(i=n;i>=1;i--)
{
scrollTo(n,i);
}
}
</script>
</head>
<body>
<form><input type="button" value="向下滚动" onClick="scrolldown()"></form>
<form><input type="button" value="向上滚动" onClick="scrollup()"></form>
</body>
</html>

============================
定时执行程序setTimeout()、clearTimeout()、 setInterval()、clearInterval()
计时：
<html>
<body>
<center>
<form name="time">
<input type="text" name="clock" size="20" value="" onFocus="document.time.clock.blur()"><p> </p>
<input type="button" name="sc" value="计时" onClick="stopOrCoutinue()">
</form>
</center>
<script language="javascript">
var sec=0;
var min=0;
var hou=0;
var timeout=0;
function countTime()
{
    sec++;
if(sec==60)
{
   sec=0;min+=1;
}
if(min==60)
{
   min=0;hou+=1;
}
document.time.clock.value=hou+"时"+min+"分"+sec+" 秒";
timeout=setTimeout("countTime()",1000);
}
function stopOrCoutinue()
{
    if(timeout==0)
{
   countTime();
   document.time.sc.value=" 暂停 ";
}
else
{
   clearTimeout(timeout);
   timeout=0;
   document.time.sc.value=" 计时 ";
}
}
</script>
</body>
</html>

============================
接受用户输入:
<html>
<body>
<script language="javascript">
function inputName()
{
var name;
name=prompt("请输入你的姓名：","您的姓名");
document.form.name.value=name;
}
</script>
<form name="form">
<input type="text" name="name" size="20"><p> </p>
<input type="button" value="请输入你的姓名" onClick="inputName()">
</form>
</body>
</html>

============================
确认框：(测试不管用)
<form onsubmit="confirm('确实要提交表单吗？')>

============================
获得按钮名字：
document.form.buttonname

============================
背景颜色：bgColor
<form>
<select size=3 name="color" onChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="blue">blue</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
</select><br>
<input type="button" value="black" onClick="document.bgColor='black'">
<input type="button" value="white" onClick="document.bgColor='white'">
</form>

============================
document对象的方法：
open()、close()、 clear()、write()、writeln()

============================
防止被框架引用：
<script language="javascript">
if(self!=top){top.location=self.location;}
或：if(top.frames.length!=0){top.location=self.location;}
</script>
只在框架中打开，防止在新窗口打开：
if(self==top){selft.location.href="url";}

============================
同时提交两个表单：
function submitall()
{
document.form1.submit();
document.form2.submit();
return true;
}

============================
关于文本框输入：
<form>
<input type="text" name="name" onFocus="this.value=''" value="Email Address">
<input type="text" name="adress" onClick="this.value=''" value="your name">
<input type="text" name="age" onMouseOver="this.select()" onClick="this.value=''" value="your age">
</form>

<body onload="document.form.logname.select()">也可调用函数

============================
全选checkbox

<html>
<head>
<title>全选</title>
<script language="javascript">
function checkall(form)
{
for(var i=0;i<form.elements.length;i++)
{
var e=form.elements[i];
if(e.type=='checkbox')
e.checked=form.radio[0].checked;
}
}
</script>
</head>
<body>
<center>
<form name="myForm">
<input type="checkbox" name="box1" value="1">1
<input type="checkbox" name="box2" value="2">2
<input type="checkbox" name="box3" value="3">3
<input type="checkbox" name="box4" value="4">4
<input type="checkbox" name="box5" value="5">5
<p> </p>
<input type="radio" name="radio" value="1" onClick="checkall(this.form)">全选
<input type="radio" name="radio" value="2" onClick="checkall(this.form)">重置
</form>
</center>
</body>
</html>

============================
history:

============================
用JS操作COOKIE

1、设置COOKIE数据：

最基本的COOKIE只包括COOKIE名和它的值，语法如下

document.cookie="Cookie_name=Cookie_value"

警告不要在cookie名或值中使用如分号（；）、逗号（，）或者空格等特殊字符。

但是，假设我们需要保存的名或值有这些符号，怎么办呢？最简单的办法就是使用escape(string)方法，这个方法是用一个字符串参数，把其

中的非字母或数字字符转换为等价的数值（16进制），然后在前面加上百分号。

如：document.cookie="book_name="+escape("Special Edition Using JavaScript")

结果为：Special%20Edition%20Using%20JavaScrpit

2、获取COOKIE值：

获取cookie的值要稍微麻烦一点，首先要把cookie属性保存到一个变量：cookie_string=document.cookie 从而得到一个形如

cookie_name=cookie_value 的字符串。然后取等号的索引位置，再使用String对象的substring()方法抽取值，如果值使用了escape()方法编

码，还要用 unescape() 进行解码。cookie_string=unescape(document.cookie)

（注：大哥大姐，看文章时别忘记关注我哟，嘿嘿）
3、处理多个COOKIE:

定义多个COOKIE documet.cookie="name1=value1; name2=value2" 每个cookie之间用分号和一个空格分开

处理用 split() 方法，如： var cookie_array = document.cookie.split(";")

即 cookie_arrar[0]和[1]各为上面的COOKIE字符串。

4、终止日期：

var days=30;

var expire_date=new Date();

var ms_from_now=days*24*60*60*1000;

expire_date.setTime(expire_date.getTime()+ms_from_now);

var expire_string=expire_date.toGMTString();//转为GMT格式的String

document.cookie="count_cookie=visit_number; expires="+expire_string;

5、其他参数：

document.cookie="name=value; path=cookie_dir";//指定访问的目录，所有页面访问，则把path设为根目录（/）。

参数domain用于指定站点上可以访问cookie的主机名，如果没有指定，则默认为站点所在的WEB服务器的主机名。如果服务器只有一个主机名，

则不需要考虑这个参数。如：domain=.domain.com

secure，这是一个boolean值。如果为真，则该cookie只发往使用HTTPS（安全）协议连接的浏览器；如果为假（或忽略）则发给所有的浏览器

，即使使用了不安全的HTTP协议。如：document.cookie="name1=value1; true"。

（文章看完了，还不错吧！）请点下面的广告吧！

6、删除COOKIE:

可以通过其过期日期设为过去的某个时间来删除，这将使得浏览器立即删除该cookie。为了简化，可以使用set_cookie()并参数赋一个负值，

删除时必须指定与创建时相同的参数。如指定了 path 哪么例为：set_cookie("bgcolor_cookie","",-1,"/"); 如果要删除站点上所有的

cookie 重新开始，则不用指定 path。

另外cookie还有一些高级操作，我们留由下次再讲。如果大家认为好的话，请点一下上面的广告吧。

============================
web开发常用js功能：
============================

Javascript:将人民币数字转换成大写形式

用JavaScript编写了一功能函数，完成如下功能：

1、对一给定字符串，如：1234.55，转换成正确的中文货币描述：如：人民币壹仟贰佰叁拾四元五角五分

2、输入的字符串形式可以是以下几种：带分隔符的，如：123,456,789.00；不带分隔符的，如：123456789

3、输出的中文货币描述要符合规范，如：0.3----人民币三角；0.33----人民币三角三分；1----人民币壹元整
100---- 人民币壹佰元整；1001----人民币壹仟零壹元整；10000001----人民币壹仟万零壹元整；
1001001----人民币壹仟零壹万零壹元整，等

4、最大转换能到百亿

具体的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="jscript">
function convertCurrency(currencyDigits) {
// Constants:
var MAXIMUM_NUMBER = 99999999999.99;
// Predefine the radix characters and currency symbols for output:
var CN_ZERO = "零";
var CN_ONE = "壹";
var CN_TWO = "贰";
var CN_THREE = "叁";
var CN_FOUR = "肆";
var CN_FIVE = "伍";
var CN_SIX = "陆";
var CN_SEVEN = "柒";
var CN_EIGHT = "捌";
var CN_NINE = "玖";
var CN_TEN = "拾";
var CN_HUNDRED = "佰";
var CN_THOUSAND = "仟";
var CN_TEN_THOUSAND = "万";
var CN_HUNDRED_MILLION = "亿";
var CN_SYMBOL = "人民币";
var CN_DOLLAR = "元";
var CN_TEN_CENT = "角";
var CN_CENT = "分";
var CN_INTEGER = "整";

// Variables:
var integral; // Represent integral part of digit number.
var decimal; // Represent decimal part of digit number.
var outputCharacters; // The output result.
var parts;
var digits, radices, bigRadices, decimals;
var zeroCount;
var i, p, d;
var quotient, modulus;

// Validate input string:
currencyDigits = currencyDigits.toString();
if (currencyDigits == "") {
alert("Empty input!");
return "";
}
if (currencyDigits.match(/[^,.\d]/) != null) {
alert("Invalid characters in the input string!");
return "";
}
if ((currencyDigits).match(/^((\d{1,3}(,\d{3})*(.((\d{3},)*\d{1,3}))?)|(\d+(.\d+)?))$/) == null) {
alert("Illegal format of digit number!");
return "";
}

// Normalize the format of input digits:
currencyDigits = currencyDigits.replace(/,/g, ""); // Remove comma delimiters.
currencyDigits = currencyDigits.replace(/^0+/, ""); // Trim zeros at the beginning.
// Assert the number is not greater than the maximum number.
if (Number(currencyDigits) > MAXIMUM_NUMBER) {
alert("Too large a number to convert!");
return "";
}

// Process the coversion from currency digits to characters:
// Separate integral and decimal parts before processing coversion:
parts = currencyDigits.split(".");
if (parts.length > 1) {
integral = parts[0];
decimal = parts[1];
// Cut down redundant decimal digits that are after the second.
decimal = decimal.substr(0, 2);
}
else {
integral = parts[0];
decimal = "";
}
// Prepare the characters corresponding to the digits:
digits = new Array(CN_ZERO, CN_ONE, CN_TWO, CN_THREE, CN_FOUR, CN_FIVE, CN_SIX, CN_SEVEN, CN_EIGHT, CN_NINE);
radices = new Array("", CN_TEN, CN_HUNDRED, CN_THOUSAND);
bigRadices = new Array("", CN_TEN_THOUSAND, CN_HUNDRED_MILLION);
decimals = new Array(CN_TEN_CENT, CN_CENT);
// Start processing:
outputCharacters = "";
// Process integral part if it is larger than 0:
if (Number(integral) > 0) {
zeroCount = 0;
for (i = 0; i < integral.length; i++) {
p = integral.length - i - 1;
d = integral.substr(i, 1);
quotient = p / 4;
modulus = p % 4;
if (d == "0") {
zeroCount++;
}
else {
if (zeroCount > 0)
{
outputCharacters += digits[0];
}
zeroCount = 0;
outputCharacters += digits[Number(d)] + radices[modulus];
}
if (modulus == 0 && zeroCount < 4) {
outputCharacters += bigRadices[quotient];
}
}
outputCharacters += CN_DOLLAR;
}
// Process decimal part if there is:
if (decimal != "") {
for (i = 0; i < decimal.length; i++) {
d = decimal.substr(i, 1);
if (d != "0") {
outputCharacters += digits[Number(d)] + decimals[i];
}
}
}
// Confirm and return the final output string:
if (outputCharacters == "") {
outputCharacters = CN_ZERO + CN_DOLLAR;
}
if (decimal == "") {
outputCharacters += CN_INTEGER;
}
outputCharacters = CN_SYMBOL + outputCharacters;
return outputCharacters;
}
</script>
</head>
<body>
<INPUT id="Digits" type="text" name="Digits" size=20>
<INPUT id="Convert" type="button" value="Convert" name="Convert" onclick="Result.value = convertCurrency(Digits.value);">
<INPUT id="Result" type="text" name="Result" size=60>
</body>
</html>

以上代码运用了正则表达式的功能，除了可以正确的转换成人民币的大写形式以外，还可以判断输入的形式是否正确有效。

============================

禁止粘贴：
<input onpaste="return false;" type="text" name="textfield" style="width:400px; ime-mode:disabled" value=" English only">

页面右键屏蔽
<body oncontextmenu="return false">

oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键
<table border oncontextmenu=return(false)><td>no</table> 可用于Table

禁止选择
<body onselectstart="return false">

============================
超链接提交表单
<script LANGUAGE="JavaScript">
function checkvalue()
{
if(document.welcomeform.nickname.value=="")
{
alert("昵称不能为空！");
return(false);
}
if(document.welcomeform.password.value=="")
{
alert("密码不能为空！");
return(false);
}
document.welcomeform.submit();
return(true);
}
</script>

在<body>...</body>之间加入如下代码：
<form name="welcomeform" method="post" action="welcome.asp">
<a href="#" onclick="javascript:checkvalue();return false:">登录</a>

============================
页面跳转：
<script language="javaScript">

</script>

<form name="jumpForm">
<select name="menu" onchange="gotoURL()">
    <option value="" selected>请选择您要转向的地址</option>
    <option value="main.jsp">总版</option>
    <option value="subject.jsp?subject=pic">栏目</option>
</select>
</form>

============================
获得提交图片的尺寸，非图片格式禁止提交。
<script language="JavaScript">

var oimg=new Image();
oimg.onload=ok;
oimg.onerror=no;

function load(){
thisform.button.disabled=true;
oimg.src=thisform.file.value;
}

function ok(){
thisform.width.value=oimg.width;
thisform.height.value=oimg.height;
thisform.button.disabled=false;
}

function no(){
thisform.button.disabled=true;
}

function up(){
if(thisform.button.disabled) event.returnValue=false;
}

</script>
<form name="thisform" action="upImage.jsp" method="POST" onsubmit="javascript:up();" enctype="multipart/form-data">
<input type="file" size="20" name="file" onpropertychange="javascript:load();">
<input type="hidden" name="width" value="0">
<input type="hidden" name="height" value="0">
<input type="submit" name="button" value="上传" disabled>
</form>

============================
获得当前页面的URL
<script language="javascript">

</script>
<body onload="url()">
<form name=form1><input type="hidden" name="url"></form>

============================
两级联动菜单
<script language="JavaScript" type="text/javascript">
<!--
var province_ar=new Array("","学历文凭|旅游管理,工商企业管理,文秘,金融,国际贸易,会计,英语,计算机应用,法律,艺术设计","成人高教

|工商企业管理,国际经济与贸易,外贸英语,计算机应用与管理,艺术设计","高教自考|饭店管理,工商企业管理,中英合作商务管理,保险,国际贸

易,英语,电子商务,计算机及应用,法律,广告");

function show_province()
{
var pro_tmp=document.all.province;
for (m=pro_tmp.options.length-1;m>0;m--)
pro_tmp.options[m]=null;

for(i=0;i<province_ar.length;i++)
{
if(province_ar[i]!="")
{
tmp=province_ar[i].split("|");
pro_tmp.options[i]=new Option(tmp[0],tmp[0]);
}
}
}
function show_city(sc)
{
var temp=document.all.city;
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null;

if(province_ar[sc]!="")
{
tmp=province_ar[sc].split("|");
tmp=tmp[1];
tmp=tmp.split(",");
for(i=0;i<tmp.length;i++)
{
temp.options[i]=new Option(tmp[i],tmp[i]);
}
}
}
setTimeout("show_province();",20);// 第一个搜索中省份城市对应
-->
</script>
</HEAD>

<BODY>
<FORM name="testform" id="testform">
<select id=province
onchange=show_city(this.options.selectedIndex)>
<OPTION value="" selected>请选择类别</option>
</select>
<select id=city>
<OPTION value="" selected>请选择专业</OPTION>
</select>

============================
一个表单，一个按钮，提交到两个页面
<script>
function as(){
aa.action="a.asp"
aa.submit();
aa.action="b.asp"
aa.submit();
}
</script>

============================

function isTimeValid(year,month,day,hour){
if ((year == "") || (month == "") || (day ==""))
return 0;
varyearStr = new String(year);
varmonthStr = new String(month);
vardayStr = new String(day);
varhourStr = new String(hour);
varintYear,intMonth,intDay,intHour;
if(isNaN(year) || isNaN(month) || isNaN(day) || isNaN(hour))
return 0;
intYear = parseInt(year,10);
intMonth = parseInt(month,10);
intDay = parseInt(day,10);
intHour = parseInt(hour,10);

if(isNaN(intYear) || isNaN(intMonth) || isNaN(intDay) || isNaN(intHour))
return 0;

if(yearStr.length != 4)
return 0;
if(intYear < 1800)
return 0;
if((monthStr.length > 2) || (dayStr.length > 2) ||( hourStr.length > 2))
return 0;
if((intMonth > 12) || (intMonth < 1))
return 0;
if(intDay > maxMonthDay(intYear,intMonth) || intDay < 1) {
return 0;
}
if((intHour > 24) || (intHour < 0))
return 0;

return 1;
}
function isLeapYear(year){
if ((year%4 == 0 && year%100 != 0) || (year%400 == 0))
return 1;
else
return 0;
}

============================
全屏打开页面，只有滚动条
window.open('http://www.baidu.com','','fullscreen');
在被打开的页面设置不显示滚动条
<body style="overflow-y:hidden">

============================
滚屏到页面某一位置

for (i=1;i<=445; i++)
  {
  parent.scroll(1,i)
  }
//}
}
*/
//window.onload=scrollit;
window.onload=scroller;
///*
locate = 0;
function scroller() {
if (locate !=445 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
//*/
</script>

============================
40种网页常用小技巧

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=*.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
<script language="Javascript">
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
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" 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
<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 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. 检查一段字符串是否全由数字组成
<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" onclick="checkme()">
</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=测试中……> =》<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){
document.forms[0]["url"+b].value=url
if(tim>200)
{document.forms[0] ["txt"+b].value="链接超时"}
else
{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}
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.51js.com">

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

============================
“下一页”自动获得焦点：
<a href="message.jsp" id="next">下一页</a>
<script>
document.getElementById('next').focus();
</script>

============================
<a href="mailto:service@cmpbook.com?subject = 我要订购图书!&body= 姓名联系地址电话书名书号订购图书数量 "

target="_blank">

============================
1.-----------------------------------------------------
<SCRIPT language="JavaScript">

</SCRIPT>

2.-------------------------------------------------------

3.--------------------------------------------------------

javascript:this.location.reload()

4.--------------------------------------------------------

bg="#383400"

5.--------------------------------------------------------

<div id="zoom"></div>
7.--------------------------------------------------------

<a href=javascript:HighlightAll('FORM.inpost')>复制到剪贴板</a>
<a href=javascript:checklength(document.FORM);>查看文章长度</a>

8.--------------------------------------------------------

窗口最大化脚本
<script language="JavaScript">

</script>

============================
<IMG border=0 onclick=window.open(this.src) src="http://eat.beelink.com.cn/UpImages/2003-07/28/140700260662.jpg "

style="CURSOR: hand">

============================
<script>

</script>

============================================

============================================
css不同颜色的连接：
a.white:link {
color: #FFFFFF;
text-decoration: none;
}
============================================
name 语法运用和http-equiv的语法运用小小meta发挥大作用

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的＜head＞与＜/head＞中，meta 标签的用处很多。meta 的属性有

两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜

索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和 keywords（分类关键

词），所以应该给每页加一个meta值。比较常用的有以下几个：

name 属性

1、＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；

2、＜meta name="KEYWords" contect=""＞向搜索引擎说明你的网页的关键词；

3、＜meta name="DEscription" contect=""＞告诉搜索引擎你的站点的主要内容；

4、＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；

5、＜meta name="Robots" contect=

其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性

1、＜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等字符集；

2、＜meta http-equiv="Refresh" contect="n;url=http://yourlink"＞定时让网页在指定的时间n内，跳转到页面http;//yourlink；

3、＜meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"＞可以用于设定网页的到期时间，一旦过期则必须到服务器上重

新调用。需要注意的是必须使用GMT时间格式；

4、＜meta http-equiv="Pragma" contect="no-cache"＞是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法

从Cache中再调出；

5、＜meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"＞cookie设定，如果网页过期，存盘的cookie将被删除。需

要注意的也是必须使用GMT时间格式；

6、＜meta http-equiv="Pics-label" contect=""＞网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站

，而网站的限制级别就是通过meta属性来设置的；

7、＜meta http-equiv="windows-Target" contect="_top"＞强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个

frame页调用；

8、＜meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion=

50)"＞和＜meta http-equiv="Page-Exit"

contect="revealTrans(duration=20，transtion

=6)"＞设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

以上是常用的几个meta属性，有个人主页的朋友不妨在你的主页中加上它，效果可是不一样的哦：）。

============================

============================
网页播放器大全
<embed src="http://wmt2.aboutmedia.com.tw/Aboutmedia/warner/mtv/naying-021011_01v_120k.wmv "
autostart="true" loop="true" width="200" height="150" >
把这个网址http://wmt2.aboutmedia.com.tw/Aboutmedia/warner/mtv/naying-021011_01v_120k.wmv 换成你要看的电影就行了

有图像的rm格式：
<OBJECT classid='clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA' height=288 id=video1 width=305 VIEWASTEXT>
<param name='_ExtentX' value='5503'>
<param name='_ExtentY' value='1588'>
<param name='AUTOSTART' value='-1'>
<param name='SHUFFLE' value='0'>
<param name='PREFETCH' value='0'>
<param name='NOLABELS' value='0'>
<param name='SRC' value='http://media.cdut.edu.cn/ram/new/xiaoxin1.ram'>
<param name='CONTROLS' value='Imagewindow,StatusBar,ControlPanel'>
<param name='CONSOLE' value='RAPLAYER'>
<param name='LOOP' value='0'>
<param name='NUMLOOP' value='0'>
<param name='CENTER' value='0'>
<param name='MAINTAINASPECT' value='0'>
<param name='BACKGROUNDCOLOR' value='#000000'>
</OBJECT>
无图像的rm格式：如相声，歌曲。。。
<object ID='video2' WIDTH='300' HEIGHT='62' CLASSID='CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA'>
<param name='_ExtentX' value='9657'>
<param name='_ExtentY' value='847'>
<param name='AUTOSTART' value='-1'>
<param name='SHUFFLE' value='0'>
<param name='PREFETCH' value='0'>
<param name='NOLABELS' value='0'>
<param name='SRC' value='http://210.242.69.206/ramgen/broadcast/BCC/encoder/hipop.rm'>
<param name='CONTROLS' value='StatusBar,controlpanel'>
<param name='CONSOLE' value='Clip1'>
<param name='LOOP' value='0'>
<param name='NUMLOOP' value='0'>
<param name='CENTER' value='0'>
<param name='MAINTAINASPECT' value='0'>
<param name='BACKGROUNDCOLOR' value='#000000'>
</object>
最简单的media格式的播放器。。自动识别有无图像，但是版本是你机器的！
<embed src='mms://61.175.132.221/tv/mtv/f4/makeawish.wmv' width=200 height=200 autostart=true loop=true></embed>
有图像的 media播放器，自动调用网上的插件。
<object id=nstv classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' width=280 height=265

codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft?

Windows Media? Player components... type=application/x-oleobject>
<param name='URL' value='http://202.99.11.42/xiangsheng/ymjr.wma'>
<PARAM NAME='UIMode' VALUE='full'><PARAM NAME='AutoStart' VALUE='true'>
<PARAM NAME='Enabled' VALUE='true'>
<PARAM NAME='enableContextMenu' VALUE='false'>
<param name='WindowlessVideo' VALUE='true'></object>
无图像的media播放器。。。同上。
<object id=nstv classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6' width=280 height=60

codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft?

Windows Media? Player components... type=application/x-oleobject>
<param name='URL' value='http://202.99.11.42/xiangsheng/ymjr.wma'>
<PARAM NAME='UIMode' VALUE='full'><PARAM NAME='AutoStart' VALUE='true'>
<PARAM NAME='Enabled' VALUE='true'>
<PARAM NAME='enableContextMenu' VALUE='false'>
</object>
只是界面不同的media的调插件播放器。。建议不用这个，，你可以看！
<embed src='http://av.wanwa.com/fileroot/AV/Ramfiles/23809.ram' type='audio/x-pn-realaudio-plugin' console='Clip1'

controls='ControlPanel,StatusBar' height='60' width='275' autostart='true'></embed>
※※※※※※
rm文件在线播放
<embed height=25 src=www.xiakedao.com/biyun/ren/a.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false"

controls="PlayButton">
autostart="false" 打开页面时处于候命状态，autostart="true" 打开页面时马上听声音 height=25 width=50 有不同数值，播放器面板有些

不同
midi、au、avi文件在线播放
<EMBED SRC="http://www.shunde.net.cn/~biyun/wlsd/wy/yinyue/H/1.mid "; width="47" height="24" AUTOSTART=TRUE>autostart="false"

打开页面时处于候命状态，autostart="true" 打开页面时马上听声音 height=25 width=50 有不同数值，播放器面板有些不同
asf文件在线播放
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body topmargin="0" leftmargin="0">
<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95

codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=7.0 height=53 id=NSPlay0 name=NSPlay

type=application/x-oleobject width=87 VIEWASTEXT standby="Loading Microsoft Windows Media Player components..."

border="0"><param name="AudioStream" value="-1">
<param name="AutoSize" value="0">
<param name="AutoStart" value="1">
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">
<param name="Balance" value="0">
<param name="BaseURL" value>
<param name="BufferingTime" value="10">
<param name="CaptioningID" value>
<param name="ClickToPlay" value="-1">
<param name="CursorType" value="0">
<param name="CurrentPosition" value="-1">
<param name="CurrentMarker" value="0">
<param name="DefaultFrame" value>
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="65280">
<param name="DisplayMode" value="0">
<param name="DisplaySize" value="1">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableFullScreenControls" value="-1">
<param name="EnableTracker" value="-1">
<param name="Filename" value="http://music.sdcatv.net/biyun/wlsd/down/yin/gequ/asf/5.asf ";>
<param name="InvokeURLs" value="-1">
<param name="Language" value="-1">
<param name="Mute" value="0">
<param name="PlayCount" value="1">
<param name="PreviewMode" value="0">
<param name="Rate" value="1">
<param name="SAMILang" value>
<param name="SAMIstyle" value>
<param name="SAMIFileName" value>
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="SendOpenStateChangeEvents" value="-1">
<param name="SendWarningEvents" value="-1">
<param name="SendErrorEvents" value="-1">
<param name="SendKeyboardEvents" value="0">
<param name="SendMouseClickEvents" value="0">
<param name="SendMouseMoveEvents" value="0">
<param name="SendPlayStateChangeEvents" value="-1">
<param name="ShowCaptioning" value="0">
<param name="ShowControls" value="-1">
<param name="ShowAudioControls" value="0">
<param name="ShowDisplay" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowPositionControls" value="-1">
<param name="ShowStatusBar" value="-1">
<param name="ShowTracker" value="-1">
<param name="TransparentAtStart" value="-1">
<param name="VideoBorderWidth" value="0">
<param name="VideoBorderColor" value="0">
<param name="VideoBorder3D" value="-1">
<param name="Volume" value="0">
<param name="WindowlessVideo" value="0">
</object>
其中<param name="AutoStart" value="0"> 0为打开页面处于待命状态，为1时打开页面直接播放 </body>
</html>

流式收听mp3方法：
http://*.mp3 ，http://*.mp3 ，http://...琱ttp://*.mp3，
把上面的的文件另存为*.m3u,就可实现在线播放*.mp3（支持连续播放）

mpeg影象在线播放：
等等，让它下载<img border="0" dynsrc="http://music.cnvnet.com/video/0321.mpeg ;
" start="fileopen">

rm影像在线播放代码：
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=114 height=100>
<param name="_ExtentX" value="3016">
<param name="_ExtentY" value="2646">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/002.ram ";>
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>

加几个控制器
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=300>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="7938">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/001.ram ";>
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object> <object id="vid2" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=30>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="794">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://music.cnvnet.com/mtv/20010618/001.ram ";>
<param name="CONTROLS" value="ControlPanel">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>

连续播放歌曲
--------------------------------------------------------------------------------
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="286" height="225">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="-1">
<param name="AutoStart" value="-1">
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="Allo

分享到：

页面登录进度条 | 精妙javascript图片大小处理函数

2010-03-24 12:11
浏览 5556
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论