- window对象
window对象是JavaScript中的顶级核心对象，它表示一个浏览器窗口。在其下有对个子对象
widow对象本身也具有属性和方法，其中的重要属性有：
status：设置/获取网页状态栏的信息字符串
returnValue：对话框的返回值
dialogArguments：传递给对话框的参数字符串其中总要的方法有：
alert(s)：使用对话框弹出内容s
confrim(s)：弹出一个确认对话框
close()：关闭窗口
open(url,name,args)：在新窗口中打开url地址
showModalDialog(url,args,attr)：打开模态对话框
showModelssDialog(url,args,attr)：打开非模态对话框
moveBy(x,y)：相对于原位置移动窗口
moveTo(x,y)：将窗口移动指定位置
setInterval(fun,n)：设定每隔n毫秒执行一遍fun函数
setTimeout(fun,n)：设定n毫秒之后才执行fun函数
其中的子对象有：
document：文档对象
event：时间对象
location：当前URL的信息对象
status属性表示当前页面的状态栏的信息字符串，该属性可读可写，列如将网页的状态栏设置为一个指定字符串：
<script>
window.status = "welcome to my websit!"
</script>
confrim方法是一个弹出对话框，并根据用户选择返回一个布尔值。如
javascript
close方法是指示关闭网页，列如：
<input type="button" value="关闭" onclick="window.close()">
moveTo(x,y) 方法将当前页面在屏幕位置的坐标设为x和y。
moveBy(x,y)方法将当前网页在屏幕上的位置，相对于当前位置移动x像素和y像素，该方法是对窗口进行相对定位，列如
<script>
for (i = 0; i < 500; i++) {
moveBy(1, 0);
</script>
open方法用于在新窗口中打开某个url地址，例如，进入某网站后弹出的广告页面：
<script>
open("more.html","","location=0,atatus=0,toolbar=0,width=500,height=300");
</script>
- location对象
location对象表示当前网页的地址信息。它有一下方法：
assign(url)：加载指定url的文档到本页面
reload()：刷新页面
replace(url)：使用url地址指定的文档替换本页面
例如：
<html>
<head>
<meta charset="UTF-8">
<title>loaction</title>
</head>
<body>
<script type="text/javascript">
function toBaidu() {
location.assign("http://www.baidu.com");
}
function refresh() {
location.reload();
}
function rep() {
location.replace("http://www.baidu.com");
}
</script>
<input type="button" value="跳转到百度" onclick="toBaidu()" />
<input type="button" value="刷新" onclick="refresh()" />
<input type="button" value="加载百度主页" onclick="rep()" />
</body>
</html>
演示地址点击查看
- setTimeout函数
setTimeout函数设置在n毫秒后执行指定的函数。列如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SetTimeout函数</title>
</head>
<body>
<script type="text/javascript">
function fun() {
location.assign("http://www.baidu.com");
}
setTimeout(fun, 5000);
</script>
<div id="">
<p> 5秒后跳转到百度</p>
</div>
</body>
</html>
演示地址点击查看
要注意的是，该函数是设定一段时间后执行某个函数，且只能执行一次，如果需要反复执行某个函数，则可以使用以下方式，列如每隔5秒打开一个新窗口：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>每5秒打开一个新窗口</title>
</head>
<body>
<script type="text/javascript">
function fun() {
open();
setTimeout(fun, 5000);
}
setTimeout(fun, 5000);
</script>
每隔5秒打开一个新窗口
</body>
</html>
演示地址点击查看
此方法不过类似一个没有回溯过程的递归调用，如果需要定时反复执行某个函数，则可以使用setInterval
- setInterval函数
setInterval函数设定每隔一段时间就执行一遍指定的函数，其语法格式同setTimeout类似，列如每隔十秒刷新一次网页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setinterval函数</title>
</head>
<body>
<script type="text/javascript">
function fun() {
location.reload();
}
setInterval(fun, 10000); //定时执行fun函数
</script>每隔10秒刷新本页面
</body>
</html>
演示地址点击查看
- date对象
date对象表示当前日期和时间，在使用前必须使用关键字new进行实例化，列如打印当前日期和时间：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Date对象</title>
</head>
<body>
<script type="text/javascript">
function showTime() {
var time = new Date();
var yea = time.getYear();
var month = time.getMonth() + 1;
var dat = time.getDate();
var ho = time.getHours();
var mi = time.getMinutes();
var se = time.getSeconds();
var day = time.getDay();
return yea + "年" + month + "月" + dat + "日，星期" + day + " " + ho + ":" + mi + ":" + se;
}
document.write(showTime());
</script>
</body>
</html>
演示地址点击查看
此时这个时间不会变动，可以在页面中设置一个文本框，在文本框中显示时间，并结合setInterval反复获取当前时间并显示在文本框中，可以将上文改为如下，注意<body>元素的onload事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
</head>
<script type="text/javascript">
function showTime() {
var time = new Date();
var yea = time.getYear();
var month = time.getMonth() + 1;
var dat = time.getDate();
var ho = time.getHours();
var mi = time.getMinutes();
var se = time.getSeconds();
var day = time.getDay();
var t = yea + "年" + month + "月" + dat + "日，星期" + day + " " + ho + ":" + mi + ":" + se;
document.getElementById("tim").value = t;
}
function init() {
showTime();
setInterval(showTime, 1000);
}
</script>
<body onload=init()>
<form name="frm">
<input type="text" id="tim" value="" size="30" />
</form>
</body>
</html>
演示地址点击查看
date对象的方法toLoacleString()是获取当前日期和时间的标准格式，而toLocaleDateString()是获取当前日期的标准格式，toLocaleTimeString()是获取当前时间的标准格式，列如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>date对象</title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
document.write(d.toLocaleString() + "<br>"); //获取当前时间和日期的标准格式
document.write(d.toLocaleDateString());
document.write(d.toLocaleTimeString());
</script>
</body>
</html>
演示地址点击查看
- document对象
document对象的bgColor属性表示网页正文区的背景颜色，可以通过设置该属性的值来改变网页背景颜色。列如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document对象的应用</title>
</head>
<script type="text/javascript">
function setBColor(a) {
document.bgColor = a;
}
</script>
<body>
<input type="button" value="red" onclick="setBColor('red')" />
<input type="button" value="blue" onclick="setBColor('blue')" />
<input type="button" value="green" onclick="setBColor('green')" />
<input type="button" value="#39afb2" onclick="setBColor('#39afb2')" />
</body>
</html>
演示地址点击查看
以下案例演示了document.getElementById的用法以及如何将字符串内容放置在层中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>送货地址</title>
</head>
<script type="text/javascript">
function ok() {
var p1 = document.getElementById("a1").value;
var p2 = document.getElementById("a2").value;
var p3 = document.getElementById("a3").value;
var p4 = document.getElementById("a4").value;
var p5 = document.getElementById("a5").value;
document.getElementById("sp").innerText = p1 + p2 + p3 + p4 + p5;
}
</script>
<form>
<table width="400" cellspacing="1" border="1">
<tr>
<th colspan="2">请填写送货地址</th>
</tr>
<tr>
<td>省份：</td>
<td><select id="a1">
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
<option value="湖南省">湖南省</option>
</select></td>
</tr>
<tr>
<td>城市：</td>
<td><input type="text" name="a2" id="a2" /> </td>
</tr>
<tr>
<td>区划：</td>
<td><input type="text" name="a3" id="a3" /> </td>
</tr>
<tr>
<td>街道：</td>
<td><input type="text" name="a4" id="a4" /> </td>
</tr>
<tr>
<td>门牌号：</td>
<td><input type="text" name="a5" id="a5" /> </td>
</tr>
<tr>
<td colspan="2"><input type="button" value="确认" onclick="ok()" style="text-align: center;display: block;margin: auto;" /></td>
</tr>
</table>
</form> <br />
<span id="sp"></span>
<body>
</body>
</html>
演示地址点击查看
当网页中含有多选框的时候，为了方便客户操作方便，可以使用按钮控制多选框的“全选”“反选”等，列如：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>兴趣爱好选择</title>
<script type="text/javascript">
functionselectAll(a) {
varas = document.getElementsByName("a");
for (i = 0; i < as.length; i++) {
as[i].checked = a;
}
}
functionfina() {
varas = document.getElementsByName("a");
for (i = 0; i < as.length; i++) {
as[i].checked = !as[i].checked;
}
}
functionokk() {
varas = document.getElementsByName("a");
vartet = "您的选择是：";
for (i = 0; i < as.length; i++) {
if (as[i].checked) {
tet += as[i].value + "";
}
}
alert(tet);
}
</script>
</head>
<body>
<center>
<input type="checkbox" name="a" id="a" value="游泳" />游泳<br />
<input type="checkbox" name="a" id="a" value="爬山" />爬山<br />
<input type="checkbox" name="a" id="a" value="篮球" />篮球<br />
<input type="checkbox" name="a" id="a" value="发呆" />发呆<br />
<input type="button" value="全选" onclick="selectAll(true)" />
<input type="button" value="全不选" onclick="selectAll(false)" />
<input type="button" value="反选" onclick="fina()" />
<input type="button" value="确定" onclick="okk()" />
</center>
</body>
</html>
演示地址点击查看
对于单选框就要进行逐步判断，列如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选性别</title>
<script type="text/javascript">
function ok() {
var rs = document.getElementsByName("r");
var rv = "";
for (i = 0; i < rs.length; i++) {
if (rs[i].checked) {
rv = rs[i].value;
break;
}
}
alert("您选择的是： " + rv);
}
</script>
</head>
<body>
<input type="radio" name="r" value="男" />男<br />
<input type="radio" name="r" value="女" />女<br />
<input type="button" value="确定" onclick="ok()" />
</body>
</html>
演示地址点击查看
- event对象的应用
event.srcElement表示发生事件源对象，列如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event对象</title>
<script type="text/javascript">
function fun() {
if (event.srcElement.bgColor != "#ff0000") {
event.srcElement.bgColor = "red";
} else {
event.srcElement.bgColor = "white";
}
}
</script>
</head>
<body>
<table width="500" cellspacing="1" border="1" style="margin: auto;">
<script type="text/javascript">
for (i = 0; i < 4; i++) {
document.write("<tr>");
for (j = 0; j < 8; j++) {
document.write("<td onclick='fun()'>");
document.write(i * 8 + j + 1);
document.write("</td>");
}
document.write("</td>")
}
</script>
</table>
</body>
</html>
演示地址点击查看