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. 自兴人工智能-------------Python入门基础（1）

    Python 是一门简单易学且功能强大的编程语言. 它拥有高效的高级数据结构, 并且能够用简单而又高效的方式进行面向对象编程. Python 优雅的语法和动态 类型,再结合它的解释性,使其在大多数平台 ...

  2. 练手项目：利用pygame库编写射击游戏

    本项目使用pygame模块编写了射击游戏,目的在于训练自己的Python基本功.了解中小型程序框架以及学习代码重构等.游戏具有一定的可玩性,感兴趣的可以试一下. 项目说明:出自<Python编程 ...

  3. hibernate监听器的应用

    这里是我看到的一个hibernate监听器的简单实现供参考  http://www.360doc.com/content/14/0623/11/8072791_389034447.shtml 设计思路 ...

  4. c# 利用IMap 收取163邮件

    最近我要做一个爬虫.这个爬虫需要如下几个步骤: 1 填写注册内容(需要邮箱注册) 2 过拖拽验证码(geetest) 3 注册成功会给邮箱发一封确认邮箱 4 点击确认邮箱中的链接 完成注册 我这里就采 ...

  5. zabbix客户端一键安装脚本(主动模式监控)

    #!/bin/bash basepath=$(cd `dirname $0`; pwd)SHELL_DIR="${basepath}/shell"PACKAGE_DIR=" ...

  6. LVS结合keepalived配置测试

     LVS/DR + keepalived配置 注意:前面虽然我们已经配置过一些操作,但是下面我们使用keepaliave操作和之前的操作是有些冲突的,所以若是之前配置过DR,请首先做如下操作:   三 ...

  7. kubernetes 集群的安装部署

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 首先kubernetes得官方文档我自己看着很乱,信息很少, ...

  8. Android 文件下载三种基本方式

    一.自己封装URLConnection 连接请求类 public void downloadFile1() { try{ //下载路径,如果路径无效了,可换成你的下载路径 String url = & ...

  9. Linux 小记 — 网络管理

    前言 前段时间需要配置一台私网 ECS 联外网,阿里云比较推荐的方案是创建一个 Nat 网关并绑定 EIP, 以此来统一所有 ECS 的网络出口.由于我已经拥有一台外网 ECS(不想多掏钱,且我自己的 ...

  10. [转载]LVS+Keepalived之三大模式

    LVS + Keepalived之三大模式 ============================================================================== ...