JavaScript学习笔记_14

BOM(Browser Object Model) —— Window

例1.setInterval()时钟,setInterval()第一个参数是函数名,第二个参数是毫秒数

<!DOCTYPE html>
<html>
  <head>
    <title>DOM_Window.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <script>
      function Greet(){
          var date = new Date();
          //元素间文本通过<对象名.innerText>访问
          document.getElementById("time").innerText = date.toLocaleString();
    }
      setInterval("Greet()", 1000);
  </script>
  </head>
  
  <body>
    <span id="time"></span>
  </body>
</html>

例2：两张图片切换，切换10次之后停止

setInterval()会返回一个计时器的句柄，用tm变量存储他，然后加一个count记录变换次数。当count为10就停止切换，即

利用clearInterval()函数停止计时器。

<!DOCTYPE html>
<html>
  <head>
    <title>DOM_Window.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  <script>
      function Greet(){
          var date = new Date();
          //元素见文本通过<对象名.innerText>访问
          document.getElementById("time").innerText = date.toLocaleString();
    }
      setInterval("Greet()", 1000);
      
      
      var n = 1;
      var count = 0;
      function runimg(){         
          count++;
          if(count == 10)
              clearInterval(tm);
          var mi = document.getElementById("myimg");
          mi.src = ((n++%2) + 1) + ".jpg";
      }
      var tm = setInterval("runimg()", 500);

  </script>
  </head>
  
  <body>
    <span id="time"></span><br>
    <img id="myimg" src="1.jpg" style="width: 100px" />
  </body>
</html>

例3：设置指定时间做某个动作setTimeout()，只会在2s后调用一次say()

  <script>
    function say(){
        alert("什么鬼!");
    }
    setTimeout("say()", 2000);
  </script>

例4：关于设置时间的几个函数套用，让图片切换10次停3秒然后再切换10次再停3秒循环往复。

  <script>
      function Greet(){
          var date = new Date();
          //元素见文本通过<对象名.innerText>访问
          document.getElementById("time").innerText = date.toLocaleString();
    }
      setInterval("Greet()", 1000);
          
      var n = 1;
      var count = 0;
      function runimg(){         
          count++;
          if(count == 10){
              clearInterval(tm);  //停止切换
              setTimeout("rerun()", 3000);  //3秒后重启
              count = 0;  //重置计数器
              }
          var mi = document.getElementById("myimg");
          mi.src = ((n++%2) + 1) + ".jpg";
      }
      var tm = setInterval("runimg()", 500);
      
    //重启切换函数
    function rerun(){
        tm = setInterval("runimg()", 500);
    }
  </script>

例5：当然setTimeout()也可以返回一个句柄，利用这个句柄可以让某个setTimeout()失效

  <script>
    function duang(){
        alert("什么鬼");
    }
    var td = setTimeout("duang()", 3000);  //3秒后会弹窗
    clearTimeout(td);  //让上面的延迟动作失效    
  </script>

例6：父子窗口间通信（用IE测试可行，Chrome不行）,在文本框内输入内容然后发送，两个窗口内文本框内容就会相应改变

主要利用open()函数，与opener属性。open()函数依旧可以返回新窗口的句柄，opener表示父窗口句柄。

Master.html

<html>
  <head>
    <script>
        var nw;
        function openwin(){
            nw = open("Slave.html", "_blank");
        }
        function toson(){
            nw.document.getElementById("info2").value = $("info1").value;
        }
        function $(id){
            return document.getElementById(id);
        }
    </script>
  </head>
  <body>
    <input type="button" value="打开新窗口" onclick="openwin()"/><br>
    <input type="text" id="info1" value="什么鬼1"/>
    <input type="button" value="发送给子窗口" onclick="toson()"/>
    <br>
    <span id="myspan">什么鬼</span>
  </body>
</html>

Slave.html (状态栏的文本还可以自行移动，其实就是在文本前加空格)

<html>
  <head>
    <script>
        function tofather(){
            opener.document.getElementById("info1").value = document.getElementById("info2").value;
            opener.document.getElementById("myspan").innerText = document.getElementById("info2").value;
        }
        function showf(){
            alert(opener.document.getElementById("info1").value);
        }
        var sp_n = 0;
        var dir = 1;
        function stsScroll(){
            var sp_text = "";
            sp_n += dir * 1;
            if(sp_n > 5 || sp_n < 0){
                dir *= -1;
            }
            for(var i=0; i<sp_n; i++){
                sp_text += " ";
            }
            window.status = sp_text + "Hello World!";
        }
        setInterval("stsScroll()", 100);
    </script>
  </head>
  <body onload="stsScroll()">
    <input type="text" id="info2" value="什么鬼2"/>
    <input type="button" value="发送给父窗口" onclick="tofather()"/><br>
    <input type="button" value="显示父窗口" onclick="showf()"/>
  </body>
</html>

例7：简易验证登录并延迟进入业务主页

<html>
  <head>
    <script>
        function checku(){
            if($("uname").value == "athrun" && $("pwd").value == "123456")
                return true;
            else{
                alert("用户名或密码错误");
                $("uname").value = "";
                $("pwd").value = "";
                return false;
            }
        }
        function $(id){
            return document.getElementById(id);
        }
    </script>
  </head>
  <body>
    <form name="f1" action="Welcome.html" method="post">
    user:<input type="text" id="uname" value="" /><br>
    pass:<input type="text" id="pwd" value="" /><br>
    <!-- onclick这里用到return是因为如果调用函数返回false，表单就不会提交 -->
    <input type="submit" value="登录" onclick="return checku()"/>
  </body>
</html>

Welcome.html用于延迟进入主页

<html>
  <head>
    <script>
        function goto(){
            clearInterval("st1");
            open("Main.html", "_self");
        }
        var st1 = setInterval("changetime()", 1000);
        function changetime(){
            $("wspan").innerText = parseInt($("wspan").innerText) - 1;
        }
        function $(id){
            return document.getElementById(id);
        }
        setTimeout("goto()", 5000);
    </script>
  </head>
  <body>
    欢迎来到XXX!<br>
    页面将在<span id="wspan">5</span>秒钟后跳转到主页!
  </body>
</html>

Main.html业务主页

<html>
  <head>
    <script>

    </script>
  </head>
  <body>
    Hello World!
  </body>
</html>

History对象主要用于页面间跳转

Location对象主要与当前URL的信息有关

Navigator对象主要跟所用浏览器有关

例8：显示一些关于浏览器的信息(有些属性Chrome不支持)

    <script>
        function show(){
            document.write("当前浏览器为：" + navigator.appName + "<br>");
            document.write("当前操作系统为：" + navigator.platform + "<br>");
            document.write("当前浏览器语言为：" + navigator.browserLanguage + "<br>");
            document.write("当前OS语言为：" + navigator.systemLanguage + "<br>");
        }
        show();
    </script>

Screen对象主要与客户端显示屏信息有关

例9：返回一些显示器信息

    <script>
        function show(){
            document.write("当前屏幕分辨率：" + screen.width + "x" + screen.height + "<br>");
            document.write("当前屏幕可用宽高(除了最地下工具栏条)：" + screen.availWidth + "x" + screen.availHeight + "<br>");
            document.write("当前调色板颜色深度：" + screen.colorDepth + "<br>");
        }
        show();
    </script>

Event对象主要跟事件驱动有关

例10：非绑定事件机制

<html>
  <head>

  </head>
  <body>
    <input type="button" value="显示" id="bn">
    <script>
        //这里把JS脚本写下来是因为必须先创建按钮之后才能通过id获取这个按钮对象
        function show(){
            document.write("当前屏幕分辨率：" + screen.width + "x" + screen.height + "<br>");
            document.write("当前屏幕可用宽高(除了最地下工具栏条)：" + screen.availWidth + "x" + screen.availHeight + "<br>");
            document.write("当前调色板颜色深度：" + screen.colorDepth + "<br>");
        }
        function $(id){
            return document.getElementById(id);
        }
        $("bn").onclick = show;  //取代了绑定按钮调用函数的方法，相当于给按钮对象添加了一个成员函数，所以函数名后面不能打括号
    </script>
  </body>
</html>

例11：另一种事件绑定与解绑（但是测试失败）

<html>
  <head>
    <script>
        
    </script>
  </head>
  <body>
    <input type="button" value="显示" id="bn" >
    <script>
        //这里把JS脚本写下来是因为必须先创建按钮之后才能通过id获取这个按钮对象
        document.getElementById("bn").addEventListener("onclick", test); 
        function test(){
            alert("什么鬼");
            $("bn").removeEventListener("onclick", test);
        }
        function $(id){
            return document.getElementById(id);
        }
    </script>
  </body>
</html>

例12：实时监听控制输入，只允许输入六位数字且每输入一个字符就判断是否为数字，非数字弹窗并清空，长度错误弹窗提示

<html>
  <head>
    <script>
        function checkin(event){
            if(event.keyCode < 48 || event.keyCode > 57){
                alert("请输入数字");
                window.event.returnValue = false; //该属性可以阻止接收键入值
                }
        }
        function checksub(){
            if($("myt").value.length != 6){
                alert("请控制在六位");
            }
            else{
                alert("Hello World!");
            }
        }
        function $(id){
            return document.getElementById(id);
        }
    </script>
  </head>
  <body>
    <input type="text" id="myt" onkeypress="checkin(event)">
    <input type="button" value="提交" onclick="checksub()">
  </body>
</html>

发表于 2015-03-13 18:00 AthrUn_Null 阅读(120) 评论(0) 编辑收藏举报

刷新页面返回顶部

JavaScript学习笔记_14

公告