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;
width: 40%;
height: auto;
margin: 140px auto;
color: white;
padding: 10px;

}
section form #set p input {
width: 40%;
height: 80px;
font-size: 35px;
text-align: center;
}
section form #button input{
width: 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

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

浏览器之window对象--javascript的更多相关文章

  1. JavaScript权威指南--window对象

    知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...

  2. 第十二章:window对象

    第十一章介绍了window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一 ...

  3. JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

    1.Window对象属性的文档元素(id) 如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而他们的值指向 ...

  4. JavaScript权威设计--Window对象(简要学习笔记十三)

    1.Window对象是所有客户端JavaScript特性和API的主要接入点. Window对象中的一个重要属性是document,它引用Document对象. JavaScript程序可以通过Doc ...

  5. 《JavaScript权威指南》学习笔记 第五天 window对象的方法。

    前天和昨天大致浏览了犀牛书的函数.类与模块.正则表达式.JavaScript扩展.以及服务端的js.这些方面对于我目前的水平来说比较难,一些最基本的概念都不能领会.不过最复杂的知识占用平时使用的20% ...

  6. 【温故而知新-Javascript】使用 Window 对象

    1. 获取 Window 对象 可以用两种方式获得Window对象.正规的HTML5方式是在Document对象上使用defaultView属性.另一种是使用所有浏览器都支持的全局变量window . ...

  7. javascript之window对象

    window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数. 1.全局的window对象 JavaScript中的任何一个全局函数或变量都是wi ...

  8. JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  9. JavaScript (JS)基础:BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

随机推荐

  1. EntityFramework 实践 Overview

    使用EntityFramework,是微软出的一个轻量级ORM框架,对于做一些小型的项目非常方便,几乎是零配置,以及对linq的支持,所以非常的易于使用,虽然已经使用EntityFramework很久 ...

  2. JSON入门看这一篇就够了

    什么是JSON JSON:JavaScript Object Notation [JavaScript 对象表示法] JSON 是存储和交换文本信息的语法.类似 XML. JSON采用完全独立于任何程 ...

  3. 移植cjson到windows下编译

    #起因 在工作过程中发现需要让Lua支持json库,如果直接用lua版本的json解析器的话效率不够高,所以找了一个用C实现的json库--cjson,据说此库比lua版本的效率高10-20倍.但是c ...

  4. 使用 RxJS 实现一个简易的仿 Elm 架构应用

    使用 RxJS 实现一个简易的仿 Elm 架构应用 标签(空格分隔): 前端 什么是 Elm 架构 Elm 架构是一种使用 Elm 语言编写 Web 前端应用的简单架构,在代码模块化.代码重用以及测试 ...

  5. 将你的Python Web程序部署到Ubuntu服务器上

    在本文记录了我在Ubuntu中部署Flask Web站点的过程, 其中包括用户创建.代码获取.Python3环境的安装.虚拟环境设置.uWSGI启动程序设置,并将Nginx作为前端反向代理.希望对各位 ...

  6. 使用DateTimeOffset 对xml中的日期时间格式时区进行处理

    在日常使用中难免会与XML打交道,其中一个常用的格式就是日期了. 交互的时候通常有下面2种方式 DECLARE @Doc XML=' <R> <T>2018-02-22+08: ...

  7. laravel服务容器-----深入理解控制反转(IoC)和依赖注入(DI)

    首先大家想一想什么是容器,字面意思就是盛放东西的东西,常见的变量,对象属性都是容器,一个容器能够装什么东西,完全在于你对这个容器的定义.有的容器不仅仅只是存文本,变量,而是对象,属性,那么我们通过这种 ...

  8. mac攻略(4) -- 使用brew配置php7开发环境(mac+php+apache+mysql+redis)

    [http://www.cnblogs.com/redirect/p/6131751.html] 网上有很多文章都是错误的,因为是copy别人的,作者没有自己亲测,不仅不能给新手提供帮助,还会产生严重 ...

  9. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  10. CSS布局(五) 网页布局方式

    网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块. 三种关系:相邻,嵌套,重叠. 下面介绍网页布局的常用几种方式 1.一列布局: 一般都是固定的宽高,设置margin : 0 auto来水平居 ...