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. Dapper入门教程（二）——执行非查询语句

    描述 你可以从任意实现IDbConnection的类对象中调用Dapper的扩展方法"Execute".它能够执行一条命令(Command)一次或者多次,并返回受影响的行数.这个方 ...

  2. LocalMaxima_NOI导刊2009提高（1）

    先打表,发现\(ans=\sum_{i=1}^n\frac{1}{i}\) 对于小数据可以直接打表 数据很大时,精度相对就比较宽松 欧拉-马斯刻若尼常数=调和级数-自然对数 调和级数为:\(\sum_ ...

  3. windows下apache服务器开启压缩和网页缓存

    找到配置文件:http.conf apache开启压缩 一.开启配置,去除下面代码前面的#号LoadModule deflate_module modules/mod_deflate.soLoadMo ...

  4. spring 代码中获取ApplicationContext(@AutoWired,ApplicationListener)

    2017年度全网原创IT博主评选活动投票:http://www.itbang.me/goVote/234    学习spring框架时间不长,一点一滴都得亲力亲为.今天忽然觉得老是通过@Autowir ...

  5. java 23种设计模式 深入理解

    以下是学习过程中查询的资料,别人总结的资料,比较容易理解(站在各位巨人的肩膀上,望博主勿究) 创建型抽象工厂模式 http://www.cnblogs.com/java-my-life/archive ...

  6. 转：【web前端开发】浏览器兼容性处理大全

    解决思路: ①.写代码的时候遵循W3C标准,按照最新稳定版本的IE或WebKit内核浏览器进行编码 ②.遇到部分无法全面解决浏览器兼容的时候,采取CSS的hack手段进行针对性微调.简单的说,CSS ...

  7. python实现三级菜单

    一.要求: 1.一开始打印出所有省份和提示 2.用户输入省份以此查询城市 3.在按照输出的城市名提示用户输入,最后输出用户所查询的区县名 4.随时输入"back"可以返回上一级菜单 ...

  8. 使用 neon-wallet-db + neon-js + NEO-cli /rpc 搭建轻钱包服务端

    本文将搭建一个不具有任何功能的NEO轻钱包,所有的精力都仅集中于成功运行neon-wallet-db项目并搭配全节点的neo-cli /rpc接口为轻钱包客户端提供服务. 首先需要准备几个项目: ne ...

  9. 老男孩Python全栈开发（92天全）视频教程 自学笔记19

    day19 课程内容: 第19天的课程就是复习一些正则表达式,以及说一下计算器的思路,我就把我做的计算器代码当这一天的内容吧. 计算器作业:不eval函数,计算能计算:'1-2*((60-30-8*( ...

  10. Eclipse 安装 SVN 插件的两种方法

    eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用eclipse 里Help菜单的“Install New Software”,通过 ...