【JavaScript】——兼容浏览器的居中显示+关闭页面

前提

　　小编最近正在学习一门新的语言JavaScript，话说看了一些教程视频，虽然跟着视频中的老师也实践了一下内容，但是现在真正在项目中去做些东西还是有些困难的。所以利用这次的项目机会把一些东西总结下来，同时也想分享给大家，一起进步啊。

居中显示

　　在平时浏览一些网站时可能需要一个登陆界面。在这个项目中实现的就是随着窗体页面的改变，登陆提示框一直处于居中状态。其实这个东西分为两部分，一是在加载的时候显示居中，二是在触动页面是随时改变。

#JavaScript
#登陆框div的改变事件——贾文静——2016年6月8日12:00:25
var Change = function () {
var windowScreen = document.documentElement;
// 获取main的div元素
var main_div = document.getElementById("Login");
// 通过窗口宽高和div宽高计算位置
var main_left = (windowScreen.clientWidth - main_div.clientWidth) / 2 + "px";
var main_top = (windowScreen.clientHeight - main_div.clientHeight) / 2 + "px";
// 位置赋值
main_div.style.left = main_left;
main_div.style.top = main_top;
}

#JavaScript
#窗体的加载事件——贾文静——2016年6月8日12:02:25
window.onload = function () {
//调用div的改变事件
Change();
}
#浏览器触发，随时改变大小——贾文静——2016年6月8日12:04:54
window.onresize = function () {
Change();
}

关闭界面

　　页面的关闭事件也是我们会经常用到的，其实这个过程也非常简单，但是里面会涉及一个浏览器兼容的问题，浏览器的不同，让这个方法有点小麻烦，但是还是非常好实现的。

#JavaScript
#兼容浏览器的关闭+贾文静+2016年6月8日12:08:54
function Close() {
if (navigator.userAgent.indexOf("MSIE") > 0) {
if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
window.opener = null; window.close();
}
else {
window.open('', '_top'); window.top.close();
}
}
else if (navigator.userAgent.indexOf("Firefox") > 0) {
window.location.href = 'about:blank '; //火狐默认状态非window.open的页面window.close是无效的

}
else {
window.opener = null;
window.open('', '_self', '');
window.close();
}
}

总结

　　虽然学习了一些关于JavaScript的教程材料，但是大部分还是仅仅停留于看啊，很少动手去做些东西，所以现在真正用起来还是眼高手低。通过这次动手去做些东西，觉得JavaScript不再像学习的时候感到那么厌烦，这门语言越来越神奇。虽然这是些简单的效果，但是心里看着还是高兴的，学习路途很长，慢慢积累，进步!