浏览器高度：
FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
万年历：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 </head>
8
9 <body>
10 <span id="span"></span>
11 </body>
12
13 </html>
14 <script>
15 var span = document.getElementById("span");
16 //获取一个元素span从span；
17 function time_get() {
18 //定义一个方法，time_get；
19 var time = new Date();
20 //定义一个时间time；
21 var year = time.getFullYear();
22 //获取year年；
23 var month = time.getMonth() + 1;
24 //获取month月份；
25 var day = time.getDate();
26 //获取day天；
27 var hour = time.getHours();
28 //获取hour小时；
29 var minute = time.getMinutes();
30 //获取minute分钟；
31 var second = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
32 //获取sencond秒,三元表达式：如果time.getSeconds()<10,成立前面加0，不成立直接输出；
33 var time_str = year + "-" + month + "-" +
34 day + " " + hour + ":" +
35 minute + ":" + second;
36 //赋予一个新的时间，年、月、日...；
37 span.innerHTML = time_str;
38 //输出time_str；
39 }
40 window.setInterval("time_get()", 500);
41 //让time_get()这个方法每500毫秒刷新一次；
42 </script>
弹出层：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 <style>
8 * {
9 margin: 0px;
10 padding: 0px;
11 }
12 /*全局定位边距0*/
13
14 .mask {
15 width: 100%;
16 height: 500px;
17 background-color: black;
18 opacity: 0.5;
19 position: fixed;
20 top: 0px;
21 left: 0px;
22 z-index: 400;
23 }
24 /*定义mask的样式，opacity透明度，z-index显示层，数值越高越高*/
25
26 .out {
27 width: 300px;
28 height: 200px;
29 background-color: green;
30 position: fixed;
31 z-index: 998;
32 }
33 /*定义out的样式*/
34 </style>
35 </head>
36
37 <body>
38 <input type="button" value="弹出" id="btn1" />
39 <div class="mask" hidden="hidden"></div>
40 <div class="out" hidden="hidden"></div>
41
42 </body>
43
44 </html>
45 <script>
46 var mask = document.getElementsByClassName("mask")[0];
47 //取mask这个对象，calss名字后面一定要有数组
48 var out = document.getElementsByClassName("out")[0];
49 //取out这个对象
50 var btn1 = document.getElementById("btn1");
51 var c_height = document.documentElement.clientHeight;
52 //给c_height赋值浏览器的高度，此标签为火狐浏览器
53 var c_width = document.documentElement.clientWidth;
54 //给c_width赋值浏览器的长度，此标签为火狐浏览器
55 var top_ = c_height / 2 - 100;
56 //定义弹出框的上边距为浏览器高度/2-100像素做到垂直居中（100像素高度正好为弹出框的一半）；
57 var left = c_width / 2 - 150;
58 //定义弹出框的左边距为浏览器高度/2-150像素做到水平居中（150像素高度正好为弹出框的一半）；
59 mask.style.height = c_height + "px";
60 //mask的高度为浏览器的高度，单位px，宽度上面已经定义100%；
61 out.style.top = top_ + "px";
62 //out垂直居中
63 out.style.left = left + "px";
64 //out水平居中
65 btn1.onclick = function() {
66 mask.removeAttribute("hidden");
67 out.removeAttribute("hidden");
68 }
69 //btn1点击事件：点击btn1，mask&out移除hidden属性，做到显示；
70 mask.onclick = function() {
71 mask.setAttribute("hidden", "hidden");
72 out.setAttribute("hidden", "hidden");
73 }
74 //mask点击事件：点击mask，mask&out添加hidden属性，做到隐藏；
75 window.onresize = function() {
76 //窗口调整大小事件；
77 var c_height = document.documentElement.clientHeight;
78 var c_width = document.documentElement.clientWidth;
79 var top_ = c_height / 2 - 100;
80 var left = c_width / 2 - 150;
81
82 mask.style.height = c_height + "px";
83 out.style.top = top_ + "px";
84 out.style.left = left + "px";
85 }
86 </script>
时间： 2024-10-07 06:17:52