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

Posted _Iniesta

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了火狐浏览器高度&制作简单万年历&弹出层相关的知识,希望对你有一定的参考价值。

浏览器高度:

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>

 

以上是关于火狐浏览器高度&制作简单万年历&弹出层的主要内容,如果未能解决你的问题,请参考以下文章

Charles手机抓包设置&无法打开火狐网页设置

万事开头难 && 实践出真知

我的火狐浏览器不自动弹出安装插件的提示 怎么设置?

java万年历简单制作

点击火狐出现弹窗说firefox遇到无法处理的问题崩溃了,卸载重装无法解决

emWin万年历,含uCOS-III和FreeRTOS两个版本