windows事件

Posted 2020-10-03 h0000dh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了windows事件相关的知识，希望对你有一定的参考价值。

<script language="javascript">
function GetCharCount( textObj )
{
      if (textObj.length > 10)
    {
              alert("请重新输入你的姓名（少于10个字符）");
    }
       else
    {
              alert("您输入了"+textObj.length+"个字符");
    }
 }
</script>
请输入您的姓名(少于10个字符):
Name: <INPUT TYPE="text" NAME="userName" onBlur="GetCharCount(userName.value)">

onLoaded()

<html>
<head>
<title>装载文档</title>
<body onload="onLoaded()">        <!--绑定onload事件处理程序-->
<script language="javascript" type="text/javascript">
function onLoaded()            // onload事件处理程序
{
    alert("文档加载完毕！");    // 文档加载完毕时输出提示信息
}
</script>
</body>
</html>

onUnload

<html>
    <head>
        <title>卸载文档</title>
    </head>
    <body onUnload="alert(‘欢迎您再来‘)">
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

onFocus

onBlur

得到焦点与失去焦点

<html>
<head>
<title>得到焦点与失去焦点</title>
<script language="javascript">
function OnFocus()                            // onFocus事件处理程序
{    
    Body.style.background="red";    // 网页背景设置为红色
}
function OnBlur()                                // onBlur事件处理函数
{
    Body.style.background="gray";    // 网页背景设为灰色
}                
</script>
</head>
<body id="Body" onFocus="OnFocus()" onBlur="OnBlur()"><!--绑定事件处理程序-->    
    <label id="info">失去焦点时窗口背景变为灰色，得到焦点时为红色。
    </label>
</body>
</html>

window.onerror

<!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>
</head>
<body>
<script language="javascript">
function errmsg(message,url,line)
{
    alert("您的程序有错误:"+message+"url:"+url+"\n"+"line:"+line+"\n");
    return true;
}
window.onerror=errmsg;
</script>
<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="submit" name="Submit" value="提交" onclick="po()" />
  </label>
</form>
</body>
</html>

window.onload

window.onunload

<script language="javascript">    //开始javascript程序
function SayHello()             //自定义函数
{
      alert("Hello!");            //弹出一个对话框
}
    function SayBey()            //自定义一个函数
    {
    alert("bye");                //弹出一个对话框，显示bye的信息
    }
    window.onload=SayHello;         //页面载入时调用SayHello函数
    window.onunload=SayBey;         // 页面关闭时调用SayBey函数
</script>

onbeforeunload

<script language="javascript">
function OnClosing()                                        // 关闭前事件处理程序
{
    if( window.confirm("真的要关闭？") )    // 询问
    {
        return true;                                                // 确定关闭
    }
    else
    {
            return false;                                            // 不关闭
    }    
}
</script>
<body onbeforeunload="return OnClosing()"/>    <!--绑定事件处理程序-->

window.prompt

<script language="javascript">
function qustion()
{
    var result
    result=window.prompt("未来世界哪个国家最强大？", "中国");
    if(result=="中国")
        alert("你真聪明!!!")
    else
        alert("请你再思考一下!");
}
</script>
<input type="submit" name="Submit" value="答题" onclick="qustion()" />

window.defaultStatus

<script language="javascript">
    window.defaultStatus="本站提供影片下载、音像素材、电子书籍等服务。"    // 状态栏上的广告信息
</script>

<!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>范例9-14</title>
<script language="javascript">
function SetStatus()
{
    d=new Date();
    document.write(d);
    document.write("</br>");
    //alert("1111");
    time=d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
    document.write(time);
     console.log(time);
    window.status=time;
}
//setInterval("SetStatus()"，10);
</script>


<form id="form1" name="form1" method="post" action="">
  <label>
  <input type="submit" name="Submit" value="提交" onclick="SetStatus()" />
  </label>
</form>


</head>
<body >
请观察左下角的状态栏
</body>
</html>

window.open

<script language="javascript">
function op()
{
    window.open("http://www.baidu.com","baidu","heigth=300,width=200");
}
op();
</script>

<script language="javascript">
function name()
{//http://www.baidu.com
window.open("","myForm","height=300,width=200,scrollbars=yes");
}
name();
</script>

关闭窗口

<!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 closeWindow()
{    
    if(self.closed)
    {
        alert("窗口已经关闭")
    }
    else
    {
        self.close()
    }
}
</script>
</head>
<body>
<label>
<input type="submit" name="Submit" onClick="closeWindow()" value="关闭" >
</label>
</body>
</html>

操作新开窗口中的数据

<html>
    <head>
        <title>操作新开窗口中的数据</title>
    </head>
    <body>
        <form name="myForm">
            <input type="text" name="myText1"><br>
            <input type="text" name="myText2"><br>
            <input type="button" value="查看效果" onClick="openWindow(myText1.value,myText2.value)">
        </form>
        <script language="javascript" type="text/javascript">
            <!--
                myForm.myText1.value = "第1个文本框";
                myForm.myText2.value = "第2个文本框";
                
                function openWindow(t1,t2)
                {
                    var myWin = window.open("new.html","","width=300,height=300");
                    
                    myWin.myForm.myText1.value = "由父级窗口输入的文字："+t1;
                    myWin.myForm.myText2.value = "由父级窗口输入的文字："+t2;
                }
            -->
        </script>
    </body>
</html>

window.scrollBy

<html>
    <head>
        <title>范例9-16</title>
    <body>
        <script language="javascript">
            var tm = setInterval( "ScroWin()", 100 );    // 设定计时器
            function ScroWin()                                                // 定时器函数
            {
                window.scrollBy( 0, 1 );                                // 向上滚动1px    
            }
        </script>
        浏览器中的内容大于其显示区域时，<br>
        一般会出现滚动条方便查看被遮挡的内容。<br>
        用户可以拖动滚动条，也可以通过程序来控制窗口的滚动。<br>
        调用window对象的scrollBy或scrollTo方法即可滚动文档，<br>
        在一些设计比较人性化的文章阅读页面上就看到这样的应用，<br>
        文章自动上滚，方便阅读<br>
    </body>
</html>

window.setTimeout

<script language="javascript">
var ident;
ident=window.setTimeout("alert(‘延时时间到了‘)",3000)
</script>

周期执行

 setInterval("setsDate()",1000);

<html>
    <head>
        <title>周期执行</title>
        <script language="javascript" type="text/javascript">
            <!--
                function myFun()
                {                    
                    setInterval("setsDate()",1000);                        //设置1秒钟调用一次
                }
                function setsDate()                                    
                {
                    var myDate = new Date();                            //创建一个日期对象
                    myForm.showDate.value = myDate.toLocaleString();    //显示日期和时间
                }
            -->
        </script>
    </head>
    <body onLoad="myFun()">
        <form name="myForm">
            当前时间为：<input type="text" id="showDate" name="showDate" size="25">
        </form>
    </body>
</html>

<script language="javascript">
    var tm = 0;                                                                    // 计时器
    var count = 0;                                                            // 计数器
    function ReloadPage()                                                // 定时器函数
    {
        if( window.confirm("是否要重新加载？") )    // 询问用户是否要重新加载
        {
            window.location.reload();                                // 重新加载
        }
        else
        {
            if( ++count==3 )                                                // 3次尝试后将自动移除计时器
            {
                clearInterval( tm );                                    // 清除计时器    
            }    
        }
    }
    tm = setInterval("ReloadPage()", 1000);            // 设定定时器
</script>

<html>
<head>
<title>取消延迟执行</title>
<script language="javascript">
function showClock()
{
 d=new Date()
 //document.form1.Time.value=d.toLocaleString()
 window.status=d.toLocaleString()
 ident=window.setTimeout("showClock()",1000);
}
</script>
</head>
<body>
  <p>
   <input type="submit" name="Submit" value="开始" onClick="showClock()"> 
   <input type="submit" name="Submit2" value="取消延迟" onClick="window.clearTimeout(ident);")>
   </p>
</body>
</html>

<script language="javascript">                                //javascript程序
function OnClick()                                    //按钮事件处理
{
    for (i=0;i<window.frames.length;i++)                        //逐一访问框架
    {
        window.frames[i].document.write("向第" + (i+1) + "个子窗口输出内容");    //在子窗口文档中输入
        window.frames[i].document.close();                    //关闭输出
    }
}
</script>                                        <!--框架1-->
<iframe src="#" height="50"></iframe><br/>                        <!--框架2-->
<iframe src="#" height="50"></iframe><br/>                        <!--框架3-->
<iframe src="#" height="50"></iframe><br/>                        <!--框架4-->
<input type="button" value="查看窗口的内容" onClick="OnClick()">            <!--按钮-->

<script language="javascript">
var adrList = new Array();        // 创建一个用于存储地址的数组  
function addNewAddressAndStart( )    // 定义函数，实现添加地址和设定间隔时间
{
    for( ;; )                // 循环要求用户输入网址
    {
        var adr = prompt( "请添加一个新地址，此步骤将连续添加多个地址，要停止添加请按“取消”：", "" );
        if( adr == null )        // 用户取消输入时跳出当前循环
            break;    
        adrList.push( adr );        // 将用户输入的网址存储到数组的尾部
    }
    var interal = prompt( "请设定打开新窗口的时间间隔，以毫秒为单位：", "1000" );    // 要求用户输入时间间隔
    if ( interal == null )        // 如果用户忽略上一步则自动设置为5秒
        interal = 5000;
    setInterval( "start()", interal );    // 使用setInterval设置间隔(interal/1000)秒就运行一次start函数
    refreshList();            // 刷新地址列表
}
var curAD = 0;                // 使用就是curAD以指示当前要打开的页面
var oldWin = null;            // 使用变量oldWin引用当前打开的窗口
function start( )            // 定义函数打开新窗口
{
    if( oldWin != null )        // 定义函数打开新窗口
        oldWin.close();
    if( adrList.length == 0 )        // 如果地址列表为空，则函数什么也不做，直接返回
    {
        Addresslist.value = "地址列表为空";return;
    }
    oldWin = window.open( adrList[curAD], "", "width=400,height=300" );    // 打开新窗口并引用至oldWin变量
    curAD ++ ;                // 将指示器curAD递增
    if( curAD == adrList.length )    // 如果已经超过数组的末端则置0，指向数组首元素
        curAD = 0;
}
function refreshList()    // 刷新地址列表
{
    Addresslist.value = "";
    for( index in adrList )
        Addresslist.value += adrList[index] + "\r\n";
}
</script>
<!--定义一个文本域用以显示地址列表-->
<textarea id="Addresslist" style="width: 349px; height: 263px" readonly="readOnly"></textarea><br />
<!--定义一个按钮用以添加新地址-->
<input type="button" onclick="addNewAddressAndStart()" value="添加新地址" style="width: 349px" />

以上是关于windows事件的主要内容，如果未能解决你的问题，请参考以下文章

很实用的JQuery代码片段（转）

Android：将片段和弹出窗口的点击事件中生成的变量传递给活动的方法