浏览器高度：

FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

万年历：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <span id="span"></span>

     </body>

 </html>

 <script>

     var span = document.getElementById("span");

         //获取一个元素span从span；

     function time_get() {

         //定义一个方法，time_get；

         var time = new Date();

         //定义一个时间time；

         var year = time.getFullYear();

         //获取year年；

         var month = time.getMonth() + 1;

         //获取month月份；

         var day = time.getDate();

         //获取day天；

         var hour = time.getHours();

         //获取hour小时；

         var minute = time.getMinutes();

         //获取minute分钟；

         var second = time.getSeconds() < 10 ?
　　　　　　　　　　　　　　 "0" + time.getSeconds() : time.getSeconds();

         //获取sencond秒,三元表达式：如果time.getSeconds()<10,成立前面加0，不成立直接输出；

         var time_str = year + "-" + month + "-" +

             day + "&nbsp;&nbsp;" + hour + ":" +

             minute + ":" + second;

         //赋予一个新的时间，年、月、日...；

         span.innerHTML = time_str;

         //输出time_str；

     }

     window.setInterval("time_get()", 500);

     //让time_get()这个方法每500毫秒刷新一次；

 </script>

弹出层：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {

                 margin: 0px;

                 padding: 0px;

             }

             /*全局定位边距0*/

             .mask {

                 width: 100%;

                 height: 500px;

                 background-color: black;

                 opacity: 0.5;

                 position: fixed;

                 top: 0px;

                 left: 0px;

                 z-index: 400;

             }

             /*定义mask的样式，opacity透明度，z-index显示层，数值越高越高*/

             .out {

                 width: 300px;

                 height: 200px;

                 background-color: green;

                 position: fixed;

                 z-index: 998;

             }

             /*定义out的样式*/

         </style>

     </head>

     <body>

         <input type="button" value="弹出" id="btn1" />

         <div class="mask" hidden="hidden"></div>

         <div class="out" hidden="hidden"></div>

     </body>

 </html>

 <script>

     var mask = document.getElementsByClassName("mask")[0];

     //取mask这个对象，calss名字后面一定要有数组

     var out = document.getElementsByClassName("out")[0];

     //取out这个对象

     var btn1 = document.getElementById("btn1");

     var c_height = document.documentElement.clientHeight;

     //给c_height赋值浏览器的高度，此标签为火狐浏览器

     var c_width = document.documentElement.clientWidth;

     //给c_width赋值浏览器的长度，此标签为火狐浏览器

     var top_ = c_height / 2 - 100;

     //定义弹出框的上边距为浏览器高度/2-100像素做到垂直居中（100像素高度正好为弹出框的一半）；

     var left = c_width / 2 - 150;

     //定义弹出框的左边距为浏览器高度/2-150像素做到水平居中（150像素高度正好为弹出框的一半）；

     mask.style.height = c_height + "px";

     //mask的高度为浏览器的高度，单位px，宽度上面已经定义100%；

     out.style.top = top_ + "px";

     //out垂直居中

     out.style.left = left + "px";

     //out水平居中

     btn1.onclick = function() {

         mask.removeAttribute("hidden");

         out.removeAttribute("hidden");

     }

     //btn1点击事件：点击btn1，mask&out移除hidden属性，做到显示；

     mask.onclick = function() {

         mask.setAttribute("hidden", "hidden");

         out.setAttribute("hidden", "hidden");

     }

     //mask点击事件：点击mask，mask&out添加hidden属性，做到隐藏；

     window.onresize = function() {

         //窗口调整大小事件；

         var c_height = document.documentElement.clientHeight;

         var c_width = document.documentElement.clientWidth;

         var top_ = c_height / 2 - 100;

         var left = c_width / 2 - 150;

         mask.style.height = c_height + "px";

         out.style.top = top_ + "px";

         out.style.left = left + "px";

     }

 </script>

火狐浏览器高度&制作简单万年历&弹出层的更多相关文章

  1. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  2. Web前端设计模式--制作漂亮的弹出层

    设计场景: Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思... 现在问 ...

  3. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. layUI 几个简单的弹出层

    导入控件主题 <link rel="stylesheet" href="dist/themes/default/style.min.css" /> ...

  5. 一个简单的弹出层ProgressBar

    https://github.com/eltld/SimpleLoading

  6. jQuery制作信息提示弹出层插件【推荐】

    给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.​1. [代码][JavaScript]代码 <script type="text/javascript& ...

  7. ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  8. layer弹出层框架alert与msg详解

    ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...

  9. DIV+CSS制作二级横向弹出菜单，略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

随机推荐

  1. supervisord监控服务必备命令

    supervisord(http://supervisord.org/introduction.html)是一个非常优秀的进程管理工具,使用Python开发.它可以在类UNIX系统的方式让用户来准确地 ...

  2. redis持久化策略梳理及主从环境下的策略调整记录

    redis是一个支持持久化的内存数据库,也就是说redis需要经常将内存中的数据同步到磁盘来保证持久化.可以不定期的通过异步方式保存到磁盘上(即“半持久化模式”):也可以把每一次数据变化都写入到一个A ...

  3. IDEA启动服务阻塞，断点过程十分慢的问题

    使用debug无法启动项目但是使用run就可以启动程序,而且启动比以前的debug模式快的多 原因: 启动不了的原因是在项目中的方法上打了断点,导致项目无法继续编译 取消方法断点就可以了 在idea官 ...

  4. php 多个文件压缩到一起存储

    $zip = new ZipArchive();$res = $zip->open('test.zip', ZipArchive::CREATE); //不存在则创建$filepath = 's ...

  5. B. Heaters Div3

    链接 [http://codeforces.com/contest/1066/problem/B] 分析 具体看代码,贪就完事了 代码 #include<bits/stdc++.h> us ...

  6. ELF分析 实践

    分析ELF文件: 首先编写一个.c文件,并使用gcc -c xx.c -o xx.o 对其进行编译. 我在这个实践中是ELF_1.o文件. 接下来输入ls -l ELF_1.o 查看重定位文件的信息. ...

  7. Beta版会议总结

    开会时间:2015年06月12日 开会地点:基教601 开会人员:李想,王颖瑞,朱少辉,陈晨,侯涛亮. 开会内容:对于6月10日,大一同学的投票情况进行讨论和反思. 讨论结果如下: 一.目前存在的问题 ...

  8. yii框架通过IP地址来使用gii

    这里使用的YII框架的版本是2.0.13 详情请参考官方文档:用Gii生成代码 使用gii的主要步骤 1.生成模型(Model Generator) 2.生成CRUD代码 注意点 1.在生成CURD代 ...

  9. [转帖]从 2G 到 5G，手机上网话语权的三次改变

    从 2G 到 5G,手机上网话语权的三次改变 美国第一大电信运营商 Verizon 公司的 CEO Hans Vestberg 手持一部 iPad,屏幕上显示俯瞰地面的飞行地图.400 多公里外的洛杉 ...

  10. Oracle PLSQL 客户端 连接Oracle12.2 出现权限问题的解决办法以及绿色版Oracle客户端的使用.

    1. 同事反馈登录最新的oracle12.2 的数据库时登录不上报错: 2. 记得当时查过资料, Oracle 在12.2 增加了客户端连接数据库的加密级别 比较早的oracle客户端比如11.2.0 ...