火狐浏览器高度&制作简单万年历&弹出层
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 + " " + 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>
以上是关于火狐浏览器高度&制作简单万年历&弹出层的主要内容，如果未能解决你的问题，请参考以下文章