• 浏览器之window对象--javascript


    window对象代表打开的浏览器窗口,是Web浏览器所有内容的主容器。window对象是整个对象链条结构的最高层,是其他对象的父对象,在调用window对象的方法和属性时,可以省略window对象的引用

    一、window对象的属性和方法

    1、status属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>status属性的应用</title>
    </head>
    <body onload="load()">
    <script language="JavaScript">
    function load(){
    window.status = "这里可以显示状态栏消息!";
    }
    </script>
    </body>
    </html>

    运行示例,效果如下(IE7+):

    实战应用-浏览器状态栏显示信息

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>浏览器状态栏显示信息--JavaScipt的应用</title>
    </head>
    <body onload="ShowInfo()">
    </body>
    <script>
      var str1 = "欢迎光临!";
      var str2= "中国智慧编程网!";
      var temp = true;
      var speed = 2000;
      function ShowInfo() {
        if ( temp == true ) {
          window.status = str1;
          temp = false;
        }else {
          window.status=str2;
          temp = true;
        }
      setTimeout("ShowInfo()",speed);
    }
    </script>
    </html>

     

    2、prompt()函数

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>prompt()函数</title>
    </head>
    <body>
    <script>
    //prompt第二个参数为文本域里的内容
    var answer = prompt("请输入你的名字:");//取消和输入空字符,返回false;非空时返回输入的文本域的文本
    if(answer){
    alert("欢迎"+answer+"光临本站!");
    }
    </script>
    </body>
    </html>

    运行示例,效果如下:

    3、alert()函数

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>settimeout()、cleartimeout()方法</title>
    </head>
    <body>
    <form name="login" method="get" >
    <p>用户名:<input type="text" name="username" /></p>
    <p>密&nbsp;码:<input type="password" name="psw"/></p>
    <input type="submit" value="登录" onclick="check()"/>
    </form>
    <script>
    function check() {
    if(document.login.username.value ==""){
    alert("用户名不能为空!");
    }
    if (document.login.psw.value ==""){
    alert("密码不能为空!");
    }
    }
    </script>
    </body>
    </html>

    运行示例,效果如下:

    4、close()方法关闭窗口

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>close()方法关闭窗口</title>
    </head>
    <body>
    <input style="background: lavenderblush" type="submit" value="点击此按钮将关闭窗口" onclick="JavaScript:self.close()"/>
    </body>
    </html>

    运行示例,效果如下:

    5、settimeout()、cleartimeout()方法

    案例:闹钟程序

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>setTimeout()函数、clearTimeout()函数之闹钟程序--javascript</title>
    </head>
    <style>
    *{margin: 0;padding: 0}
    section{
    font-size: 35px;
    40%;
    height: auto;
    margin: 140px auto;
    color: white;
    padding: 10px;

    }
    section form #set p input {
    40%;
    height: 80px;
    font-size: 35px;
    text-align: center;
    }
    section form #button input{
    100px;
    height: 30px;
    cursor: pointer;
    background-color:#666;
    color:white ;
    border: none;
    }
    section form #button input:active{
    border: 1px solid black;
    font-weight: bold;
    }
    section audio{
    cursor:pointer;
    margin-top: 10px;
    }
    </style>
    <body onload="nowclock();" bgcolor="#03a9f4">
    <section>
    <form method="get" name="alarmClock">
    <div id="set">
    <p>当前时间:<input type="text" name="nowTime" /></p><br>
    <p>设置闹钟:<input type="text" name="setTime"/></p>
    </div>
    <div id="button">
    <p>
    <input type="button" value="启动闹钟" onclick="setclock();hint()"/>
    <input type="button" value="取消所定闹钟" onclick="closeHint()"/>
    <input type="button" value="退出闹钟" onclick="JavaScript:self.close()"/>
    </p>
    </div>
    </form>
    <audio controls="controls" id="audio"></audio>
    </section>
    <script>
    function nowclock() {//上面的name值不能与函数名同,否则提示没有这个函数
    var timer = "";
    var now = new Date();
    var nowHours = now.getHours();
    var nowMinutes = now.getMinutes();
    var nowSeconds= now.getSeconds();
    timer+=nowHours;
    timer+=((nowMinutes<10)?":0":":")+nowMinutes;
    timer+=((nowSeconds<10)?":0":":")+nowSeconds;
    window.document.alarmClock.nowTime.value = timer;
    setTimeout('nowclock()',0);
    }

    function setclock() {//上面的name值不能与函数名同,否则提示没有这个函数
    var timer = "";
    var now = new Date();
    var nowHours = now.getHours();
    var nowMinutes = now.getMinutes();
    var nowSeconds= now.getSeconds();
    timer+=nowHours;
    timer+=((nowMinutes<10)?":0":":")+nowMinutes;
    timer+=((nowSeconds<10)?":0":":")+nowSeconds;
    temp = window.document.alarmClock.setTime.value;
    if ( temp == timer){
    var audio = document.getElementById('audio');
    audio.src="music/誓言%20-%20求佛.mp3";
    audio.play();
    // alert("起床了");
    }
    time = setTimeout('setclock()',1000);
    }
    function closeHint() {
    clearTimeout(time);
    }
    function hint() {
    alert("已经为您开启闹钟提示~~!")
    }
    </script>
    </body>
    </html>

    案例效果图:

    案例源码:JS闹钟程序.zip

    本文作者原创,转载请注明出处,谢谢合作!

  • 相关阅读:
    用wamp配置的环境,想用CMD连接mysql怎么连
    Mysql删除表
    MySQL创建表
    Leetcode 130. Surrounded Regions
    Leetcode 111. Minimum Depth of Binary Tree
    Leetcode 110. Balanced Binary Tree
    Leetcode 98. Validate Binary Search Tree
    Leetcode 99. Recover Binary Search Tree
    Leetcode 108. Convert Sorted Array to Binary Search Tree
    Leetcode 105. Construct Binary Tree from Preorder and Inorder Traversal
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7447769.html
Copyright © 2020-2023  润新知