例子1：BOM和DOM的感性认识

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1 { font: 72px arial; }
			#bar { color: red; }
			.foo { color: green; }
			h1 { color: blue !important; }
			#timer {
				width: 250px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: yellow;
				background-color: blue;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="timer"></div>
		<h1 id="bar" class="foo">Hello, world!</h1>
		<button onclick="shutdown()">关闭</button>
		<button onclick="openBaidu()">打开百度</button>
		<script>
			function openBaidu() {
				window.open('https://www.baidu.com', '', 
					'width=300,height=200');
			}
			
			function shutdown() {
				if (window.confirm('确定要退出吗？')) {
					window.close();
				}
			}
			
			var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			
			function showTime() {
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var date = now.getDate();
				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();
				var day = now.getDay();
				var timeStr = year + '年' +
					(month < 10 ? '0' : '') + month + '月' +
					(date < 10 ? '0' : '') + date + '日 ' +
					(hour < 10 ? '0' : '') + hour + ':' +
					(minute < 10 ? '0' : '') + minute + ':' +
					(second < 10 ? '0' : '') + second +
					' 星期<b>' + weekdays[day] + '</b>';
				var div = document.getElementById('timer');
				div.innerHTML = timeStr;
			}
			
			showTime();
			window.setInterval(showTime, 1000);
				
// 			1TBS风格 - C/Unix - Dennis M. Ritchie
// 			Allman风格 - FreeBSD - Allman
// 			while循环 / do-while循环 / for循环
// 			while循环 - 不确定循环的次数
// 			for循环 - 循环的次数是确定的
// 			do-while循环 - 至少执行一次
// 			var flag = true;
// 			do {
// 				var yearStr = window.prompt('请输入年份: ');
// 				var year = parseInt(yearStr);
// 				if (year == yearStr && year > 0) {
// 					if (year % 4 == 0 && year % 100 != 0
// 						|| year % 400 == 0) {
// 						window.alert(year + '年是闰年');
// 					} else {
// 						window.alert(year + '年不是闰年');
// 					}
// 					flag = window.confirm('是否继续？');
// 				} else {
// 					window.alert('请输入有效的年份!');
// 				}
// 			} while (flag);
		</script>
	</body>
</html>