BlogJava-DreamAngel-随笔分类-javascripthttp://www.blogjava.net/DreamAngel/category/37237.html如果你希望成功，以恒心为良友，以经验为参谋，以小心为兄弟，以希望为哨兵。zh-cnFri, 20 Jul 2012 14:43:02 GMTFri, 20 Jul 2012 14:43:02 GMT60Javascript+CSS实现Flash动态新闻效果http://www.blogjava.net/DreamAngel/archive/2011/11/03/362633.html飞翔天使飞翔天使Thu, 03 Nov 2011 12:43:00 GMThttp://www.blogjava.net/DreamAngel/archive/2011/11/03/362633.htmlhttp://www.blogjava.net/DreamAngel/comments/362633.htmlhttp://www.blogjava.net/DreamAngel/archive/2011/11/03/362633.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/362633.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/362633.html<style type="text/css"> /**//* 图片新闻大小可以更改此样式 */ .pp_portal_imgNews ...  阅读全文

飞翔天使 2011-11-03 20:43 发表评论
]]>网页的复制和防复制http://www.blogjava.net/DreamAngel/archive/2009/10/23/299453.html飞翔天使飞翔天使Fri, 23 Oct 2009 02:38:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/10/23/299453.htmlhttp://www.blogjava.net/DreamAngel/comments/299453.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/10/23/299453.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/299453.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/299453.html网页复制代码
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复制 我的内容</title> 

<script type="text/javascript" language="javascript">
    function copy(o)
    {
        var text=document.getElementById(o).innerText;
        window.clipboardData.setData("text",text);
        alert("复制成功");
    }
</script>
</head> 

<body>
<a href="javascript:copy('span1');">复制</a>
<span id="span1">
    我的内容
</span>
</body> 

 

网页防复制代码


插入网页即可。
<body leftmargin="2" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()">
<noscript><iframe src="/blog/*>";</iframe></noscript>
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. //防止被人frame
<SCRIPT LANGUAGE=javascript><!--
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>
------------------------------------------------------------------------------------------------------
6. <noscript><iframe src="/blog/*.html>";</iframe></noscript> //网页将不能被另存为
------------------------------------------------------------------------------------------------------
7. //改变连接是状态栏的显示内容
〈a href="http://v.2best.cc/" onMo ... ;window.status='输入连接状态栏显示内容’；return true">
------------------------------------------------------------------------------------------------------
8. //禁止网页中目标对象被下载(如图片)
下面的代码将帮助你禁止网页中目标对象被下载：
<a href="javascript:void(0)" onMouseDown="alert('对不起!图片不能下载！')">
</a>
------------------------------------------------------------------------------------------------------
9. //页面禁止刷新完全
最好在pop出来的窗口里用,没工具栏的

<body onkeydown="KeyDown()" onbeforeunload="location=location"
oncontextmenu="event.returnValue=false">
<script language="Javascript"><!--
function KeyDown(){
if ((window.event.altKey)&&
((window.event.keyCode==37)||
(window.event.keyCode==39))){ alert("请访问我的主页");
event.returnValue=false;
}
if ((event.keyCode==8)|| (event.keyCode==116)){ //屏蔽 F5 刷新键
event.keyCode=0;
event.returnValue=false;
}
if ((event.ctrlKey)&&(event.keyCode==78)){ //屏蔽 Ctrl+n
event.returnValue=false;
}
if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10
event.returnValue=false;
}
}
</script>
</body>


飞翔天使 2009-10-23 10:38 发表评论
]]>js获得table单元格的信息http://www.blogjava.net/DreamAngel/archive/2009/08/30/293160.html飞翔天使飞翔天使Sun, 30 Aug 2009 02:30:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/08/30/293160.htmlhttp://www.blogjava.net/DreamAngel/comments/293160.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/08/30/293160.html#Feedback1http://www.blogjava.net/DreamAngel/comments/commentRss/293160.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/293160.html获取表格中的某个单元格的内容
var tid=listFrame.now.rows[1].cells[2].innerHTML;
listFrame是指某一窗口或者frame
now是指表格的id
rows[i]是指某一行，比如属性:length
cells[j]是指某一个单元格rows[i].cells[j]表示第i行第j列
innerHTML是指单元格的值

例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY onload="getTableValue()">
<script language="javascript">
    function getTableValue(){
    alert(document.getElementById('table1').rows[0].cells[0].innerHTML);
         //or
    alert(document.getElementById('table1').rows.item(0).cells.item(0).innerHTML);
    }
</script>
<table id="table1">
     <tr>
         <td>1</td>
         <td>2</td>
      </tr>
     <tr>
         <td>3</td>
         <td>2</td>
      </tr>
</table>
</BODY>
</HTML>
注意：为了兼容IE跟FireFox，不要用 innerText。

飞翔天使 2009-08-30 10:30 发表评论
]]>图片上传的综合操作http://www.blogjava.net/DreamAngel/archive/2009/07/26/288465.html飞翔天使飞翔天使Sun, 26 Jul 2009 12:05:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/07/26/288465.htmlhttp://www.blogjava.net/DreamAngel/comments/288465.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/07/26/288465.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/288465.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/288465.html<script type="text/javascript">
// 预览图片
function showimg() {
    document.form1.myimg.src = document.form1.filename.value;
}

// 清空input type=file的value值
function refreshUploader(who) {
    var who2 = who.cloneNode(false);
    who2.onchange = who.onchange;// events are not cloned
    who.parentNode.replaceChild(who2, who);
}

// 把file文件上传域清空
function reset_file(){
    document.form1.filename.select();
    document.selection.clear();
    refreshUploader(document.form1.filename);
    setTimeout('showimg()', 500);
}

// 读取上传文件的后缀名
function Check_FileType() {
    var str = document.form1.filename.value;
    var pos = str.lastIndexOf(".");
    var lastname = str.substring(pos, str.length) // 此处文件后缀名也可用数组方式获得str.split(".")
    if (lastname.toLowerCase() != ".jpg") {
        alert("您上传的文件类型为" + lastname + "，图片必须为.jpg类型");
        reset_file();
        return false;
    } else {
        //判断图片尺寸
        var img=null;
        img=document.createElement("img");
        document.body.insertAdjacentElement("beforeend",img);
        img.style.visibility="hidden"; 
        img.src=str;
        var imgwidth=img.offsetWidth;
        var imgheight=img.offsetHeight;
        if(imgwidth>600 || imgheight>800){
            alert("图片不符合规格！");
            reset_file();
            return false;
        }
        if(imgwidth>600 || imgheight>800){
            alert("图片不符合规格！");
            reset_file();
            return false;
        }
        setTimeout('showimg()', 500);
        return true;
    }
}
</script>

<form method="post" action="" name="form1">
<input name="filename" type="file"onchange="return Check_FileType()">
<img name="myimg" src="" border="0">
</form>

飞翔天使 2009-07-26 20:05 发表评论
]]>单击放回上页的按钮或使用window.history.go(-1)返回上页的同时刷新"上页"技术http://www.blogjava.net/DreamAngel/archive/2009/07/09/286094.html飞翔天使飞翔天使Thu, 09 Jul 2009 07:41:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/07/09/286094.htmlhttp://www.blogjava.net/DreamAngel/comments/286094.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/07/09/286094.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/286094.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/286094.html
<script>
if(window.name != "bencalie"){
    location.reload();
    window.name = "bencalie";
}
else{
    window.name = "";
}
</script>

也可禁止缓存，重新进入页面
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

返回上一页代码
<a href="Javascript:window.history.go(-1)">返回上一页</a>


飞翔天使 2009-07-09 15:41 发表评论
]]>模态窗口window.showModalDialoghttp://www.blogjava.net/DreamAngel/archive/2009/06/22/283646.html飞翔天使飞翔天使Mon, 22 Jun 2009 12:55:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/06/22/283646.htmlhttp://www.blogjava.net/DreamAngel/comments/283646.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/06/22/283646.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/283646.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/283646.html showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

    2、使用方法
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures]);
vReturnValue=window.showModelessDialog(sURL[,vArguments][,sFeatures]);


    3、参数说明
 参数名称  性质  类型  作用
 sURL  必选  字符串  用来指定对话框要显示的网页的URL。
 vArguments  可选  变体  用来向对话框传递参数。参数类型不限。
对话框通过window.dialogArguments来取得传递进来的参数。
 sFeatures  可选  字符串  用来描述对话框的外观等信息

    4、sFeatures参数说明
 参数名称  参数属性  说明
 dialogHeight  npx  对话框高度，不小于100px
 dialogWidth  npx  对话框宽度
 dialogLeft  npx  离主窗口左的距离
 dialogTop  npx  离主窗口上的距离
 center  {yes | no | 1 | 0 }  窗口是否居中，默认yes
 help  {yes | no | 1 | 0 }  是否显示帮助按钮，默认yes
 resizable  {yes | no | 1 | 0 }  是否可改变大小，默认no
 status  {yes | no | 1 | 0 }  是否显示状态栏，默认为yes[ Modeless]或no[Modal]
 dialogHide  { yes | no | 1 | 0 | on | off }  在打印或者打印预览时对话框是否隐藏，默认为no
 scroll  { yes | no | 1 | 0 | on | off }  指明对话框是否显示滚动条，默认为yes
 edge  { sunken | raised }  指明对话框的边框样式，默认为raised
 unadorned  { yes | no | 1 | 0 | on | off }  默认为no
 注意：dialogHide，edge，unadorned这三个属性是用在HTA（HTML Aplication）中的，一般网页上用不到。


    5、参数传递 通过vArguments来传递参数，类型不限制，对于字符串类型，最大为4096个字符，也可以传递对象，例如：
parent.htm
<script>
window.showModalDialog("sun.htm","传递进去的参数","help:no;scroll:no");
</script>
sun.htm
<script>
alert("传来的参数：" + window.dialogArguments);
</script>


    6、返回值 通过window.returnValue向打开对话框的窗口返回信息，也可以是对象。例如：
parent.htm
<script>
result=window.showModalDialog("son.htm","","help:no;scroll:no");
alert(result);
</script>
son.htm
<script>
window.returnValue="这里存放返回的结果";
</script>


    7、防止在模态窗口中提交后新开一窗口
   在页面的 <body>前加入<base target="_self">

    8、调用父窗口的方法同时传递参数
parent.htm
<script>
function show(){//父窗口的方法
 alert("show");
}
var arg=new Object();//传递进去的参数
arg.win=window;//把当前窗口的引用当参数传进去
arg.str="argument";//要传进去的其他参数
window.showModalDialog("son.htm",arg,'help:no');
</script>
son.htm
<script>
var arg=window.dialogArguments;
alert(arg.str);
arg.win.show();//调用父窗口的方法
</script>


飞翔天使 2009-06-22 20:55 发表评论
]]>三种弹出对话框的用法实例http://www.blogjava.net/DreamAngel/archive/2009/06/17/282853.html飞翔天使飞翔天使Wed, 17 Jun 2009 06:50:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/06/17/282853.htmlhttp://www.blogjava.net/DreamAngel/comments/282853.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/06/17/282853.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/282853.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/282853.html对话框有三种

1：只是提醒，不能对脚本产生任何改变；

2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 if...else...判断

3： 一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片

下面我们分别演示：

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三种弹出对话框的用法实例</title>
<script language="javascript">
function ale()
{//这个基本没有什么说的，就是弹出一个提醒的对话框
    alert("我敢保证，你现在用的是演示一");
}
function firm()
{//利用对话框返回的值 （true 或者 false）
    if(confirm("你确信要转去 天轰穿的博客？"))
    {//如果是true ，那么就把页面转向thcjp.cnblogs.com
        location.href="http://thcjp.cnblogs.com";
    }
    else
    {//否则说明下了，赫赫
        alert("你按了取消，那就是返回false");
    }
}
function prom()
{
    var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ，
    //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值
    if(name)//如果返回的有内容
    {
        alert("欢迎您："+ name)
    }
}
</script>
</head>

<body>
<p>对话框有三种</p>
<p>1：只是提醒，不能对脚本产生任何改变；</p>
<p>2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 ifelse判断 </p>
<p>3： 一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片 </p>
<p>下面我们分别演示：</p>
<p>演示一：提醒 对话框</p>
<p>
  <input type="submit" name="Submit" value="提交" onclick="ale()" />
</p>
<p>演示二 ：确认对话框 </p>
<p>
  <input type="submit" name="Submit2" value="提交" onclick="firm()" />
</p>
<p>演示三 ：要求用户输入，然后给个结果</p>
<p>
  <input type="submit" name="Submit3" value="提交" onclick="prom()" />
</p>
</body>
</html>


飞翔天使 2009-06-17 14:50 发表评论
]]>window.open教程http://www.blogjava.net/DreamAngel/archive/2009/06/15/282451.html飞翔天使飞翔天使Mon, 15 Jun 2009 13:23:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/06/15/282451.htmlhttp://www.blogjava.net/DreamAngel/comments/282451.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/06/15/282451.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/282451.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/282451.html1，基本描述

1.1 方法签名：oNewWindow = window.open( sURL , sName , sFeatures, bReplace)
通过方法签名可以看出，window.open在打开一个窗口(其url为sURL)后，将返回一个代表该窗口对象的一个变量
oNewWindow，如果打开不成功，则oNewWindow的值为null。同时为了对打开的窗口预先做一些控制，提供了
其他一些参数（sName、sFeatures、bReplace）可供选择配置，下面将具体说明每个参数的含义

1.2 各参数的含义

  • oNewWindow：被打开的窗口的对象
  • sUrl：被打开窗口的url
  • sName：在哪个窗口打开新的url链接，例如可以为_blank（新窗口）、_top（最外层窗口）等等
  • sFeatures：对窗口的一些控制属性
    • fullscreen：是否为全屏模式（相当于F11的效果），可取值：yes/1、no/0
    • directories：是否带有目录按钮（例如收藏夹中的'链接'目录），可取值同上
    • location：是否带有地址栏，可取值同上
    • channelmode：是否为影院模式，可取值同上
    • menubar：是否带有菜单条，可取值同上
    • resizable：是否可以改变窗口的尺寸，可取值同上
    • scrollbars：是否带有滚动条，可取值同上
    • status：是否带有状态栏，可取值同上
    • titlebar：是否带有标题栏，可取值同上
    • toolbar：是否带有快捷工具栏，可取值同上
    • height：窗口高度
    • width：窗口宽度
    • top：距屏幕上边缘的距离
    • left：距屏幕左边缘的距离
  • bReplace：如果在同一窗口打开新窗口，该值用于指定是否在history中替换原窗口的url链接，可取值：true/false

 

2，基本使用

  • 在一个新窗口中打开某个链接link(/myoa/admin/manage.jsp)

     window.open ( "/myoa/admin/manage.jsp" ) ;
     或者
     window.open ( "/myoa/admin/manage.jsp" , "_blank" ) ;
     注意：这样的话，每次执行都会打开一个新窗口，即使上次打开的新窗口未关闭，仍然会弹出新的
  • 在指定的某个窗口中打开某个链接link（/myoa/admin/manage.jsp）

     window.open ( "/myoa/admin/manage.jsp" , "myWiddown" ) ; //myWindow即为窗口的名称
     注意：如果myWindow窗口不存在，那么将会新弹出一个窗口，并将新窗口命名为myWindow，只要该窗口
      不关闭，那么以后执行该open，弹出窗口均为这个已经存在的myWindow
    另外，有一些窗口名称已经被浏览器使用，具有特殊的含义，例如：_blank、_top、_parent、_self等
  • 打开一个新窗口，要求窗口高度300px、宽度500px、不带滚动条、不带地址栏（/myoa/admin/manage.jsp）

    window.open ( "/myoa/admin/manage.jsp" , "_blank" , "height=300,width=500,scrollbars=no,location=no" ) ;
    注意：sFeatures这些参数之间是用逗号分隔的，而在window.showModalDialog中，是用分号进行分隔的，一定要注意！

 

3，高级部分

  • 原窗口与弹出窗口之间的对象定位
    • 概述：弹出窗口是我们在页面编程中经常使用的一种方式，从互动角度分析，弹出窗口主要有两种类型，一种是信息显示窗口，例如人员信息、文章信息等等；另外一种是继续处理窗口，例如有些项目中，新建文章就是弹出窗口来完成的。对于信息显示窗口，用户看完之后关闭就可以了，但是对于继续处理窗口，在用户继续处理之后，往往需要与原窗口进行户动，例如当在新窗口中创建一篇文章提交后，希望在弹出窗口关闭的同时，原窗口能够刷新等等。
    • 解决方式：上面方式的一个关键就是，如何获取原窗口与弹出窗口对象，在DOM模型中我们可以明确的看到：
      • 原窗口中获取弹出窗口对象：

    var infoWindow=window.open ( "create.jsp" , "_blank" , "width=500,height=400" ) ;
    //infoWindow即代表了弹出窗口的window对象，例如在弹出窗口中有一个表单(myForm)和表单中的一个输入控件(username)，我们可以这样操作：
    infoWindow.document.myForm.username.value= "lisi" ;
    • 弹出窗口中获取原窗口对象：

    如上例，在create.jsp中，我们可以如下操作来刷新原窗口
    opener.location.reload () ;
   //opener是DOM中提供的一个默认对象，表示的就是某个窗口的原窗口。
  • wondow.open的缓存处理
    • 概述：如果window.open链接的target指定的是一个已经存在了的窗口，尤其是原页面中的一个frame和iframe的话，此时window.open打开的链接页面将不会从服务器重新请求，而是使用浏览器中相应的缓存页面，至少ie给人的感觉就是这样的，例如：

    <input type= "button"  value= "显示列表"  onclick= "window.open('/myoa/users/list.jsp','main','')" />
    <hr>
    <iframe name= "main"  src= "/myoa/users/list.jsp"  width= "100%"  height= "600"  frameborder= "0" ></iframe>
    第一次方式该页面是可以看到一个列表，那么此时即使新创建一条记录，那么再点击“显示列表”按钮时，会发现列表没有发生变化，此时关闭浏览器重新进行发现列表出现了刚创建的那条记录，可见缓存起了作用。
    • 解决办法：实验中我们发现，中导向链接不会发生上面的现象，每次都是重新请求，同样是上面的例子，使用下面的方式就是可以的：

    <a href= "/myoa/users/list.jsp"  target= "main" >显示列表</a>
    <hr>
    <iframe name= "main"  src= "/myoa/users/list.jsp"  width= "100%"  height= "600"  frameborder= "0" ></iframe>

不过有许多时候，我们不的不使用window.open到本页面某个iframe的方式（以后你可能会碰到的），那么可以类这样解决：
    <input type= "button"  value= "显示列表"  onclick= "document.getElementById('showlist').click()" />
    <a href= "/myoa/users/list.jsp"  target= "main"  id= "showlist"  style= "display:none" >显示列表</a>
    <hr>
    <iframe name= "main"  src= "/myoa/users/list.jsp"  width= "100%"  height= "600"  frameborder= "0" ></iframe>
    上面的找个例子比较简单，在实际的项目中，在隐藏的link被触发之前，还需要做许多的javascipt工作。



飞翔天使 2009-06-15 21:23 发表评论
]]>js常用技巧（2012.7.16更新）http://www.blogjava.net/DreamAngel/archive/2009/04/07/264210.html飞翔天使飞翔天使Tue, 07 Apr 2009 02:28:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/04/07/264210.htmlhttp://www.blogjava.net/DreamAngel/comments/264210.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/04/07/264210.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/264210.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/264210.html实时显示时间

方法一：

var OA_TIME = new Date();
function timeview() {
    timestr = OA_TIME.toLocaleString();
    timestr = timestr.substr(timestr.indexOf(" "));
    time_area.innerHTML = timestr;
    OA_TIME.setSeconds(OA_TIME.getSeconds() + 1);
    window.setTimeout("timeview()", 1000);
}
<body onLoad="timeview();">
<span id="time_area"></span>

方法二：

setInterval("time_area.innerHTML=new Date().toLocaleString()",1000);


控制前进和后退：使用history对象

history对象同样是Window对象的一个子对象，它对应于浏览器的历史记录功能。例如使用后退按钮可以使浏览器导航到上一个页面，而使用前进按钮则使用户导航至下一页面，利用　前进或　后退按钮旁的下拉列表框，还可以任意跳转到指定的页面。当然，这些页面都是用户访问过的，它们以栈的形式存储于浏览器的内部。
在javascript中，浏览器的这个功能以history对象的形式提供给用户，用于使用代码控制这些操作。对应于前进，后退，访问任意页面，history也提供了不相涉个方法：back(),forword(),go().例如：
history.back();//相当于用户单击“后退”按钮
history.forward();//相当于用户单击“前进”按钮
history.go(-2);//相当于用户单击两次“后退”按钮
注意：history.go()方法，当参数为正时，相当于前进功能；当参数为负时相当于后退功能。当参数为０时，表示刷新当前页面，用户已经输入的表单数据改变。

如何使用escape()函数

功能：返回经过重新编码过的字符串。
格式：escape(String)
参数：String 必填。String 对象或文字。
注意：escape()只编译符号和中文 英文则原样输出
测试代码：

<script type="text/javascript">
 document.write("测试字符串<font color=\"#FF0000\">Javascript escape函数</font> 编码后<font color=\"#FF0000\">");
 document.write(escape("Javascript escape函数"));
 document.write("</font><br>");
</script>

运行结果：测试字符串Javascript escape函数 编码后Javascript%20escape%u51FD%u6570

获取上传文件的文件名及扩展名

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>获取上传文件的文件名及扩展名</title>
</head>
<body>
<script language="javascript">
<!--
function getFileName(obj)
{
    var pos = obj.value.lastIndexOf("/")*1;
    return obj.value.substring(pos+1);
}

function getFileExt(obj)
{
    return obj.value.replace(/.+./,"");
}

function showInfo(obj)
{
    var filename = "文件名：" + getFileName(obj);
    var fileext = "扩展名：" + getFileExt(obj);
    document.getElementById("filename").innerText = filename;
    document.getElementById("fileext").innerText = fileext;
}
-->
</script>
<div id="filename" style="font-size:12px; "></div><br>
<div id="fileext" style="font-size:12px; "></div><br>
<input type="file" name="file1" onChange="showInfo(this);">
</body>
</html>


form表单高度控制

<form style="margin:0 ">

文字环绕图片

<img src="images/news.jpg" style="FLOAT: left; MARGIN-BOTTOM: 10px; MARGIN-RIGHT: 20px" alt="">

其中:
FLOAT: left 图片在文字左边.
FLOAT: left 图片在文字右边.
MARGIN-BOTTON控制图片底部与文字的距离；
MARGIN-RIGHT控制图片右边与文字的距离。
margin-left:15px控制图片左边与文字的距离。

 



飞翔天使 2009-04-07 10:28 发表评论
]]>javascript实现日期星期的显示http://www.blogjava.net/DreamAngel/archive/2009/04/06/264063.html飞翔天使飞翔天使Mon, 06 Apr 2009 02:45:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/04/06/264063.htmlhttp://www.blogjava.net/DreamAngel/comments/264063.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/04/06/264063.html#Feedback2http://www.blogjava.net/DreamAngel/comments/commentRss/264063.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/264063.html<html>
<body>
<script language=javascript>
<!--
todayDate = new Date();
date = todayDate.getDate();
month= todayDate.getMonth() +1;
year= todayDate.getYear();
document.write("今天是")
document.write("<br>")
if(navigator.appName == "Netscape")
{
    document.write(1900+year);
    document.write("年");
    document.write(month);
    document.write("月");
    document.write(date);
    document.write("日");
    document.write("<br>")
}
if(navigator.appVersion.indexOf("MSIE") != -1)
{
document.write(year);
document.write("年");
document.write(month);
document.write("月");
document.write(date);
document.write("日");
document.write("<br>")
}
if (todayDate.getDay() == 5) document.write("星期五")
if (todayDate.getDay() == 6) document.write("星期六")
if (todayDate.getDay() == 0) document.write("星期日")
if (todayDate.getDay() == 1) document.write("星期一")
if (todayDate.getDay() == 2) document.write("星期二")
if (todayDate.getDay() == 3) document.write("星期三")
if (todayDate.getDay() == 4) document.write("星期四")

//--> 
</script>
 </body>
</html>
    todayDate = new Date();

当定义一个新的对象时，通常使用“new”操作符。在这里，就是创建了日期对象。
date = todayDate.getDate(); getDate()是Date对象的一种方法，其功能是获得当前的日期。
month= todayDate.getMonth() + 1 ;

 getMonth()是Date对象的一种方法，其功能是获得当前的日期，由于月份是从0开始的，所以这里要“+1”。
year= todayDate.getYear() getYear()是Date对象的一种方法，其功能是获得当前的年份。
if(navigator.appName == "Netscape") { document.write(1900+year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日");
document.write("<br> ") } 		如果浏览器是Netscape，输出今天是“year”+“年”+“month”+“月”+“date”+“日”，其中年要加1900。
if(navigator.appVersion.indexOf("MSIE") != -1) { document.write(year); document.write("年"); document.write(month); document.write("月"); document.write(date); document.write("日");
document.write("<br> ") }		 如果浏览器是IE，直接输出今天是“year”+“年”+“month”+“月”+“date”+“日”。
if (todayDate.getDay() == 5) document.write("星期五")；
if (todayDate.getDay() == 6) document.write("星期六")；
if (todayDate.getDay() == 0) document.write("星期日")；
if (todayDate.getDay() == 1) document.write("星期一")；
if (todayDate.getDay() == 2) document.write("星期二")；
if (todayDate.getDay() == 3) document.write("星期三")；
if (todayDate.getDay() == 4) document.write("星期四")		 getDay()是Date对象的一种方法，其功能是获得当前是星期几。document.write输出今天是“星期几”。


飞翔天使 2009-04-06 10:45 发表评论
]]>在Javascript中为String对象添加trim,ltrim,rtrim方法http://www.blogjava.net/DreamAngel/archive/2009/03/24/261711.html飞翔天使飞翔天使Tue, 24 Mar 2009 07:29:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/03/24/261711.htmlhttp://www.blogjava.net/DreamAngel/comments/261711.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/03/24/261711.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/261711.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/261711.html 1String.prototype.Trim = function()
 2{
 3  return this.replace(/(^\s*)|(\s*$)/g, "");
 4}
 5String.prototype.LTrim = function()
 6{
 7  return this.replace(/(^\s*)/g, "");
 8}
 9String.prototype.Rtrim = function()
10{
11  return this.replace(/(\s*$)/g, "");
12}     使用的实例：
 1<script language=javascript>
 2String.prototype.Trim = function()
 3{
 4  return this.replace(/(^\s*)|(\s*$)/g, "");
 5} 
 6var s = "   leading and trailing spaces   ";
 7window.alert(s + " (" + s.length + ")"); 
 8s = s.Trim(); 
 9window.alert(s + " (" + s.length + ")");
10</script>


飞翔天使 2009-03-24 15:29 发表评论
]]>javascript 不停(setInterval)/延时(setTimeout)函数http://www.blogjava.net/DreamAngel/archive/2009/03/05/257944.html飞翔天使飞翔天使Thu, 05 Mar 2009 02:19:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/03/05/257944.htmlhttp://www.blogjava.net/DreamAngel/comments/257944.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/03/05/257944.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/257944.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/257944.html
setInterval(script,millisecond);  是每隔多少微秒运行一次代码

示例:
1.执行一次
<span id="time"></span> 秒
<script type="text/javascript">
var i = 1;
var txt = document.getElementById("time");
function addT(i) {
txt.innerHTML=i;
}
setTimeout("addT(i++)",1000);
</script>


2.复制执行
<span id="time">3</span> 秒
<script type="text/javascript">
var i = 1;
var txt = document.getElementById("time");
function addT(i) {
txt.innerHTML=i;
}
setInterval("addT(i++)",1000); 
</script>

setTimeout也可以做成重复执行
<span id="time"></span> 秒
<script type="text/javascript">
var i = 1;
var txt = document.getElementById("time");
function addT(i) {
txt.innerHTML=i;
setTimeout("addT(i++)",1000);
}
addT(i);
</script>


飞翔天使 2009-03-05 10:19 发表评论
]]>table的动态插入和删除http://www.blogjava.net/DreamAngel/archive/2009/02/28/257123.html飞翔天使飞翔天使Sat, 28 Feb 2009 02:16:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/02/28/257123.html<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN"   
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>无标题文档</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <script language="javascript">   
          function addRow(src) {
            // alert(src);
            var newrow = src.insertRow(src.rows.length - 1);
            newrow.height = 20;
            var i = 4;
            while (i--) {
                var newcell = newrow.insertCell();
                switch (i) {
                    case 0 :
                        newcell.innerHTML = '<input type="button" onClick="javascript:delRow(this.parentElement.parentElement)" value="删除此行">';
                        break;
                    default :
                        newcell.innerHTML = div1.innerHTML;
                        break;
                }
            }
        }
        function delRow(src) {
            var tab = src.parentElement;
            var i = tab.rows.length;
            while (i--) {
                if (src == tab.rows[i]) {
                    alert("就是这行----" + i);
                    tab.deleteRow(i);
                }
            }
        }
          </script>
    </head>

    <body>
        <table id="tb" width="100%" border="1" align="center" cellpadding="1"
            cellspacing="1" style="border-collapse:collapse"
            bordercolor="#111111">
            <tr>
                <th scope="col" width="25%">
                    奶类
                </th>
                <th scope="col" width="25%">
                    数量
                </th>
                <th scope="col" width="25%">
                    总重
                </th>
                <th scope="col" width="25%">
                    单价
                </th>
            </tr>
            <tr id="blankRow" onClick="addRow(this.parentElement)">
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
        <div id="div1" style="display:none">
            <input id="txt" type="text"
                style="width:97%;   background-color:#FFFFEF">
        </div>
    </body>
</html>

飞翔天使 2009-02-28 10:16 发表评论
]]>表格的折叠展开http://www.blogjava.net/DreamAngel/archive/2009/02/20/255762.html飞翔天使飞翔天使Fri, 20 Feb 2009 01:54:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/02/20/255762.htmlhttp://www.blogjava.net/DreamAngel/comments/255762.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/02/20/255762.html#Feedback1http://www.blogjava.net/DreamAngel/comments/commentRss/255762.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/255762.html
<%@ page language="java" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>表格折叠效果</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">

    </head>

<script language="javascript">   
function initTable(){      
    var tableRows=tb.rows;    
    for(i=0;i<tableRows.length;i++){
        if(tableRows[i].id.indexOf("-")>0)
              tableRows[i].style.display="none";
    }
}
function showRow(tid){   
    var tableRows=tb.rows;
    for(j=0;j<tableRows.length;j++){
        var s=tableRows[j].id;
        var tmp=tid.id+"-";
        if(s.indexOf(tmp)!=-1 && s!=tid.id){
               //alert(s);
            if(tableRows[j].style.display==""){   
                tableRows[j].style.display="none"; 
                tid.cells[0].firstChild.data="+";
            }  
            else{ 
                tableRows[j].style.display=""; 
                tid.cells[0].firstChild.data="-";
            }
        }
    }    
}   
</script>

    <body onLoad="initTable()">
        <table width="10%" cellpadding="0" cellspacing="0" id="tb"
            style="border-collapse: collapse" border="0" bordercolor="#111111">
            <tr id="t0" onClick="showRow(this)">
                <th align="left" style="cursor: hand;" width="20%">
                    +
                </th>
                <th align="left" scope="col" width="80%">
                    标题1
                </th>
            </tr>
            <tr id="t0-1">
                <td>
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr id="t0-2">
                <td>
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr id="t3" onClick="showRow(this);">
                <th align="left" style="cursor: hand;">
                    +
                </th>
                <th align="left" scope="col">
                    标题2
                </th>
            </tr>
            <tr id="t3-1">
                <td>
                </td>
                <td>
                    3
                </td>
            </tr>
        </table>
</html>


飞翔天使 2009-02-20 09:54 发表评论
]]>JavaScript方法和技巧大全——窗口和框架http://www.blogjava.net/DreamAngel/archive/2009/02/11/254209.html飞翔天使飞翔天使Wed, 11 Feb 2009 02:49:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/02/11/254209.htmlhttp://www.blogjava.net/DreamAngel/comments/254209.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/02/11/254209.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/254209.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/254209.html阅读全文

飞翔天使 2009-02-11 10:49 发表评论
]]>JavaScript方法和技巧大全——表单http://www.blogjava.net/DreamAngel/archive/2009/02/03/253033.html飞翔天使飞翔天使Tue, 03 Feb 2009 02:24:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/02/03/253033.htmlhttp://www.blogjava.net/DreamAngel/comments/253033.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/02/03/253033.html#Feedback1http://www.blogjava.net/DreamAngel/comments/commentRss/253033.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/253033.html阅读全文

飞翔天使 2009-02-03 10:24 发表评论
]]>JavaScript方法和技巧大全——图像http://www.blogjava.net/DreamAngel/archive/2009/01/23/252455.html飞翔天使飞翔天使Fri, 23 Jan 2009 07:23:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/01/23/252455.htmlhttp://www.blogjava.net/DreamAngel/comments/252455.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/01/23/252455.html#Feedback1http://www.blogjava.net/DreamAngel/comments/commentRss/252455.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/252455.html阅读全文

飞翔天使 2009-01-23 15:23 发表评论
]]>JavaScript方法和技巧大全——浏览器输出http://www.blogjava.net/DreamAngel/archive/2009/01/17/251697.html飞翔天使飞翔天使Sat, 17 Jan 2009 08:01:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/01/17/251697.htmlhttp://www.blogjava.net/DreamAngel/comments/251697.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/01/17/251697.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/251697.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/251697.html访问document对象
1<script language=”JavaScript”> 
2 var myURL = document.URL; 
3 window.alert(myURL); 
4</script>
动态输出HTML
1<script language=”JavaScript”> 
2 document.write(“<p>Here’s some information about this document:</p>”); 
3 document.write(“<ul>”); 
4 document.write(“<li>Referring Document: “ + document.referrer + “</li>”); 
5 document.write(“<li>Domain: “ + document.domain + “</li>”);  
6 document.write(“<li>URL: “ + document.URL + “</li>”); 
7 document.write(“</ul>”); 
8</script>
输出换行
1<script language=”JavaScript”> 
2 document.writeln(“<strong>a</strong>”); 
3 document.writeln(“b”);
4</script>
输出日期
1<script language=”JavaScript”> 
2 var thisDate = new Date(); 
3 document.write(thisDate.toString()); 
4</script>
指定日期的时区
1<script language=”JavaScript”> 
2 var myOffset = -2; 
3 var currentDate = new Date(); 
4 var userOffset = currentDate.getTimezoneOffset()/60; 
5 var timeZoneDifference = userOffset - myOffset; 
6 currentDate.setHours(currentDate.getHours() + timeZoneDifference); 
7 document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString()); 
8</script>
设置日期输出格式
1<script language=”JavaScript”> 
2 var thisDate = new Date(); 
3 var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes(); 
4 var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate(); 
5 document.write(thisTimeString + “ on “ + thisDateString); 
6</script>
读取URL参数
 1<script language=”JavaScript”> 
 2 var urlParts = document.URL.split(“?”); 
 3 var parameterParts = urlParts[1].split(“&”); 
 4 for (i = 0; i < parameterParts.length; i++) {  
 5 var pairParts = parameterParts[i].split(“=”); 
 6 var pairName = pairParts[0]; 
 7 var pairValue = pairParts[1]; 
 8 document.write(pairName + “ ：“ +pairValue ); 
 9 } 
10</script>
打开一个新的document对象
1<script language=”JavaScript”> 
2 function newDocument() {  
3 document.open(); 
4 document.write(“<p>This is a New Document.</p>”); 
5 document.close(); 
6 } 
7</script>
页面跳转
1<script language=”JavaScript”> 
2 window.location = “http://www.liu21st.com/”; 
3</script>
添加网页加载进度窗口
 1<html> 
 2<head> 
 3 <script language='javaScript'> 
 4 var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); 
 5 </script> 
 6 <title>The Main Page</title>
 7</head>
 8<body onLoad='placeHolder.close()'>
 9 <p>This is the main page</p>
10</body>
11</html>


飞翔天使 2009-01-17 16:01 发表评论
]]>JavaScript方法和技巧大全——基础知识http://www.blogjava.net/DreamAngel/archive/2009/01/11/250837.html飞翔天使飞翔天使Sun, 11 Jan 2009 02:21:00 GMThttp://www.blogjava.net/DreamAngel/archive/2009/01/11/250837.htmlhttp://www.blogjava.net/DreamAngel/comments/250837.htmlhttp://www.blogjava.net/DreamAngel/archive/2009/01/11/250837.html#Feedback0http://www.blogjava.net/DreamAngel/comments/commentRss/250837.htmlhttp://www.blogjava.net/DreamAngel/services/trackbacks/250837.html阅读全文

飞翔天使 2009-01-11 10:21 发表评论
]]>