火狐浏览器高度&制作简单万年历&弹出层

浏览器高度：

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 + "&nbsp;&nbsp;" + 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>