【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不再像学习的时候感到那么厌烦,这门语言越来越神奇。虽然这是些简单的效果,但是心里看着还是高兴的,学习路途很长,慢慢积累,进步!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 31
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mandy_i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值