JavaScript实现自适应窗口大小的网页-阿里云开发者社区

JavaScript实现自适应窗口大小的网页
2016-04-21 2949
版权
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="imagetoolbar" content="no">
    <meta name="viewport" content="width=device-width,inital-scale=1"/>
    <title>Login</title>
    <style type="text/css">
body{
    text-align: left;
    background-color: F6F6F6;
    background-attachment: fixed;
}
 
#imgcenter{
    position:relative;
    height: auto;
    width:50%;
    left:20%;
    top:250px;
}
#center{
    position:relative;
    height: auto;
    width:50%;
    left:20%;
    top:220px;
}
 
#account{
    position:relative;
    height: auto;
    left:60%;
    top:-110px;
    padding:2%;
    width:50%;
}
 
#pwd{
    position:relative;
    height: auto;
    left:60%;
    top:-100px;
    padding:2%;
    width: 50%;
}
 
#login{
    position:relative;
    height: auto;
    left:60%;
    top:-95px;
    padding:1%;
    width: 25%;
}
#logo{
    padding:3%;
    width: 50%;
    height: auto;
}
#div_forgetpwd{
    position:relative;
    height: 30%;
    left: 90%;
    top:-115px;
    width: 25%;
    font-size: 1pt;   
    white-space:nowrap;
}
#div_forgetpwd a{
    text-decoration: none;
    margin: auto;
}
#div_forgetpwd a:hover{
    text-decoration: underline;
    margin: auto;
}
.Clew{
    position:relative;
    height: 15px;
    left:-10%;
    top:-80%;
    padding:2% 50%;
    white-space:nowrap;
    color: #FFFFD5;
    font-weight: bold;
    font-family: century gothic, arial;
    background: #FCBE47;
    border-top: 2px solid #db6e3c;
    border-bottom: 2px solid #db6e3c;
}
 
</style>
    <script type="text/javascript" src="E:\MyProject\html\KServer\jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
//error clew
var userFlag=0;
var pwdFlag=0;
$().ready(function() {
    $("form :input").blur(function() {
        var $parent = $(this).parent();
        $parent.find(".clew").remove();
        if($(this).is(".username")) {
            if(this.value=="" || this.value.length < 0) {
                var errorMsg = "Please enter your account.";
                $parent.append("<span class='clew Clew'>"+errorMsg+"</span>");
            }else
        userFlag=1;
        }
 
        if($(this).is(".password")) {
            if(this.value=="" || this.value.length < 0) {
                var errorMsg = "Please enter your password.";
                $parent.append("<span class='clew Clew'>"+errorMsg+"</span>");
            }else
        pwdFlag=1;
        }       
 
    }).keyup(function() {
        $(this).triggerHandler("blur");
    }).focus(function() {
        $(this).triggerHandler("blur");
    });
});
//提交检验
function validate_form(thisform){
    with (thisform){
        if (userFlag==0||pwdFlag==0){
            username.focus();
            return false;
        }
    }
}
</script>
</head>
<body bgcolor="#F6F6F6" >
<!--
<form  action="#" method="get" name="form" id="form">
 当前窗口高度：
 <input type="text" name="availHeight" size="6">
 <br>
 当前窗口宽度：
 <input type="text" name="availWidth" size="6">
 <br>
 </form>
-->
    <div id="imgcenter">
        <img src="E:\MyProject\html\KServer\login\login.png" id="logo" align="left" ></div>
    <div id="center">
        <form method="post" action="db.html" onsubmit="return validate_form(this);">
            <input type=text name="username" value="请输入用户名.." id="account"
            class="username">
            <br>
            <input type=password name="password" value=".." id="pwd" class="password">
            <br>
            <input type=submit value="登录" id="login">
 
            <div id="div_forgetpwd">                
                <a href="E:\MyProject\html\KServer\register\register.html" >注册帐号</a>
                <a href="E:\MyProject\html\KServer\forget_pwd\forget_pwd.html" >忘记密码</a>
            </div>
             
        </form>
    </div>
    <script type="text/javascript">
    //更改元素CSS属性
    function set(){
        var setImgDiv = document.getElementById("imgcenter");
        setImgDiv.style.top = "150px";
        setImgDiv.style.left = "36%";
        var setTextDiv = document.getElementById("center");
        setTextDiv.style.top = "280px";
        setTextDiv.style.left = "8%";
        var setLogo=document.getElementById("logo");
        setLogo.style.height="100px";
        setLogo.style.width="240px";
        var setAccount=document.getElementById("account");
        setAccount.style.height="15px";
        setAccount.style.width="240px";
        var setPwd=document.getElementById("pwd");
        setPwd.style.height="15px";
        setPwd.style.width="240px";
        var setLogin=document.getElementById("login");
        setLogin.style.height="25px";
        setLogin.style.width="100px";
        var setForgetPwd=document.getElementById("div_forgetpwd");
        setForgetPwd.style.width="100px";
        setForgetPwd.style.left="100%";
    }
    function reSet(){
        var reSetImgDiv = document.getElementById("imgcenter");
        reSetImgDiv.style.top = "250px";
        reSetImgDiv.style.left = "20%";
        var reSetTextDiv = document.getElementById("center");
        reSetTextDiv.style.top = "220px";
        reSetTextDiv.style.left = "20%";
        var reSetLogo=document.getElementById("logo");
        reSetLogo.style.height="auto";
        reSetLogo.style.width="50%";
        var reSetAccount=document.getElementById("account");
        reSetAccount.style.height="auto";
        reSetAccount.style.width="50%";
        var reSetPwd=document.getElementById("pwd");
        reSetPwd.style.height="auto";
        reSetPwd.style.width="50%";
        var reSetLogin=document.getElementById("login");
        reSetLogin.style.height="auto";
        reSetLogin.style.width="25%";
        var reSetForgetPwd=document.getElementById("div_forgetpwd");
        reSetForgetPwd.style.width="100px";
        reSetForgetPwd.style.left="90%";
    }
    function setSizeMid(){
        var setSizeMidImgDiv = document.getElementById("imgcenter");
        setSizeMidImgDiv.style.top = "150px";
        setSizeMidImgDiv.style.left = "22%";
        var setSizeMidTextDiv = document.getElementById("center");
        setSizeMidTextDiv.style.top = "280px";
        setSizeMidTextDiv.style.left = "-35px";
        var setSizeMidLogo=document.getElementById("logo");
        setSizeMidLogo.style.height="100px";
        setSizeMidLogo.style.width="240px";
        var setSizeMidAccount=document.getElementById("account");
        setSizeMidAccount.style.height="15px";
        setSizeMidAccount.style.width="240px";
        var setSizeMidPwd=document.getElementById("pwd");
        setSizeMidPwd.style.height="15px";
        setSizeMidPwd.style.width="240px";
        var setSizeMidLogin=document.getElementById("login");
        setSizeMidLogin.style.height="25px";
        setSizeMidLogin.style.width="80px";
        var setSizeMidForgetPwd=document.getElementById("div_forgetpwd");
        setSizeMidForgetPwd.style.width="80px";
        setSizeMidForgetPwd.style.left="110%";
    }
    function setSizeMini(){
        var setSizeMiniImgDiv = document.getElementById("imgcenter");
        setSizeMiniImgDiv.style.top = "150px";
        setSizeMiniImgDiv.style.left = "6%";
        var setSizeMiniTextDiv = document.getElementById("center");
        setSizeMiniTextDiv.style.top = "280px";
        setSizeMiniTextDiv.style.left = "-60px";
        var setSizeMiniLogo=document.getElementById("logo");
        setSizeMiniLogo.style.height="100px";
        setSizeMiniLogo.style.width="240px";
        var setSizeMiniAccount=document.getElementById("account");
        setSizeMiniAccount.style.height="15px";
        setSizeMiniAccount.style.width="240px";
        var setSizeMiniPwd=document.getElementById("pwd");
        setSizeMiniPwd.style.height="15px";
        setSizeMiniPwd.style.width="240px";
        var setSizeMiniLogin=document.getElementById("login");
        setSizeMiniLogin.style.height="25px";
        setSizeMiniLogin.style.width="80px";
        var setSizeMiniForgetPwd=document.getElementById("div_forgetpwd");
        setSizeMiniForgetPwd.style.width="80px";
        setSizeMiniForgetPwd.style.left="125%";
    }
     
    //获取当前窗口尺寸
     var winWidth = 0;
     var winHeight = 0;
     function findDimensions() //函数：获取尺寸
     {
        //获取窗口宽度
        if (window.innerWidth)
        winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
        winWidth = document.body.clientWidth;
        //获取窗口高度
        if (window.innerHeight)
        winHeight = window.innerHeight;
        else if ((document.body) && (document.body.clientHeight))
        winHeight = document.body.clientHeight;
        //通过深入Document内部对body进行检测，获取窗口大小
        if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
        {
        winHeight = document.documentElement.clientHeight;
        winWidth = document.documentElement.clientWidth;
    }
    //结果输出至两个文本框
    if(winWidth<420||winHeight<537)
        setSizeMini();
    else if(420<=winWidth&&winWidth<=595)
        setSizeMid();
    else if(595<winWidth&&winWidth<850||537<winHeight&&winHeight<590)
        set();
    else
        reSet();
    }    
     findDimensions();
     //调用函数，获取数值
     window.onresize=findDimensions;
 </script>
</body>
</html>
JavaScript实现自适应窗口大小的网页

热门文章

最新文章

相关课程

相关电子书

相关实验场景
