正文
火狐浏览器高度&制作简单万年历&弹出层
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
浏览器高度:
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 + " " + 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>
火狐浏览器高度&制作简单万年历&弹出层的更多相关文章
-
js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
-
Web前端设计模式--制作漂亮的弹出层
设计场景: Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思... 现在问 ...
-
简单 JS 弹出层 背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
layUI 几个简单的弹出层
导入控件主题 <link rel="stylesheet" href="dist/themes/default/style.min.css" /> ...
-
一个简单的弹出层ProgressBar
https://github.com/eltld/SimpleLoading
-
jQuery制作信息提示弹出层插件【推荐】
给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.1. [代码][JavaScript]代码 <script type="text/javascript& ...
-
ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...
-
layer弹出层框架alert与msg详解
ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...
-
DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
随机推荐
-
Http指南(1)
网关:是一种特殊的服务器,作为其他服务器的中间实体使用; Agent代理:所有发布web请求的应用程序都是HTTP Agent代理.Web浏览器其实就是一种代理; HTTP报文是在HTTP应用程序之间 ...
-
Android 安全退出应用程序的方法总结
正常关闭应用程序: 当应用不再使用时,通常需要关闭应用,可以使用以下三种方法关闭android应用: 第一种方法:首先获取当前进程的id,然后杀死该进程. android.os.Process.kil ...
-
Wechat login authorization(OAuth2.0)
一.前言 昨天小组开了个会,让我今天实现一个微信网页授权的功能,可以让用户在授权之后无需再次登录既可进入用户授权界面.在这之前我也从没接触过微信公众号开发之类的,也不知道公众号后台是啥样子的,自己所在 ...
-
第七组团队项目——专业课程资源共享平台——需求分析&原型设计
一.项目目标.定位需求: (1)目标:在教师.学生之间建立一个综合的.全面的.快捷的.高效的免费课程和学习资源共享.交流与推荐的开放性平台,实现多维和动态的推荐与分类检索服务. (2)定位:学生与教师 ...
-
开始第一段SPRINT
四则运算Sprint计划 1.小组成员: 李豌湄:master 江丹仪:产品负责人 2.现状: 初步有一个四则运算的程序代码, 我们这个团队的编程基础比较薄弱,还不知道怎么将程序与数据库连接,也是在边 ...
-
Prism6下的MEF:基于微软企业库的Cache
通常,应用程序可以将那些频繁访问的数据,以及那些需要大量处理时间来创建的数据存储在内存中,从而提高性能.基于微软的企业库,我们的快速创建一个缓存的实现. 新建PrismSample.Infrastru ...
-
PAT 1023 组个最小数
https://pintia.cn/problem-sets/994805260223102976/problems/994805298269634560 给定数字0-9各若干个.你可以以任意顺序排列 ...
-
python中常用的九种数据预处理方法分享
Spyder Ctrl + 4/5: 块注释/块反注释 本文总结的是我们大家在python中常见的数据预处理方法,以下通过sklearn的preprocessing模块来介绍; 1. 标准化(St ...
-
使用Java HttpComponent/HttpClinet 调用 WebAPI问题的解决
几个关键字: WebAPI, Android, Apache HttpComponent/HttpClient 问题:无论怎么测试, WebAPI的FormBody value总是空. 最简单的代码 ...
-
百度/头条合作命中注定!中国新BAT要来了
据外媒报道,今日头条母公司字节跳动(ByteDace)将为中国互联网传统BAT的格局,带来一些新的活力.这家增速飞快的新闻.视频App“制造者”已经估值高达750亿美元,与三巨头之一的百度平起平坐,后 ...
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
设计场景: Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思... 现在问 ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
导入控件主题 <link rel="stylesheet" href="dist/themes/default/style.min.css" /> ...
https://github.com/eltld/SimpleLoading
给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.1. [代码][JavaScript]代码 <script type="text/javascript& ...
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...
ayer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer ...
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
-
Http指南(1)
网关:是一种特殊的服务器,作为其他服务器的中间实体使用; Agent代理:所有发布web请求的应用程序都是HTTP Agent代理.Web浏览器其实就是一种代理; HTTP报文是在HTTP应用程序之间 ...
-
Android 安全退出应用程序的方法总结
正常关闭应用程序: 当应用不再使用时,通常需要关闭应用,可以使用以下三种方法关闭android应用: 第一种方法:首先获取当前进程的id,然后杀死该进程. android.os.Process.kil ...
-
Wechat login authorization(OAuth2.0)
一.前言 昨天小组开了个会,让我今天实现一个微信网页授权的功能,可以让用户在授权之后无需再次登录既可进入用户授权界面.在这之前我也从没接触过微信公众号开发之类的,也不知道公众号后台是啥样子的,自己所在 ...
-
第七组团队项目——专业课程资源共享平台——需求分析&原型设计
一.项目目标.定位需求: (1)目标:在教师.学生之间建立一个综合的.全面的.快捷的.高效的免费课程和学习资源共享.交流与推荐的开放性平台,实现多维和动态的推荐与分类检索服务. (2)定位:学生与教师 ...
-
开始第一段SPRINT
四则运算Sprint计划 1.小组成员: 李豌湄:master 江丹仪:产品负责人 2.现状: 初步有一个四则运算的程序代码, 我们这个团队的编程基础比较薄弱,还不知道怎么将程序与数据库连接,也是在边 ...
-
Prism6下的MEF:基于微软企业库的Cache
通常,应用程序可以将那些频繁访问的数据,以及那些需要大量处理时间来创建的数据存储在内存中,从而提高性能.基于微软的企业库,我们的快速创建一个缓存的实现. 新建PrismSample.Infrastru ...
-
PAT 1023 组个最小数
https://pintia.cn/problem-sets/994805260223102976/problems/994805298269634560 给定数字0-9各若干个.你可以以任意顺序排列 ...
-
python中常用的九种数据预处理方法分享
Spyder Ctrl + 4/5: 块注释/块反注释 本文总结的是我们大家在python中常见的数据预处理方法,以下通过sklearn的preprocessing模块来介绍; 1. 标准化(St ...
-
使用Java HttpComponent/HttpClinet 调用 WebAPI问题的解决
几个关键字: WebAPI, Android, Apache HttpComponent/HttpClient 问题:无论怎么测试, WebAPI的FormBody value总是空. 最简单的代码 ...
-
百度/头条合作命中注定!中国新BAT要来了
据外媒报道,今日头条母公司字节跳动(ByteDace)将为中国互联网传统BAT的格局,带来一些新的活力.这家增速飞快的新闻.视频App“制造者”已经估值高达750亿美元,与三巨头之一的百度平起平坐,后 ...