JavaScript实现自适应窗口大小的网页

<!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>

  

时间: 2024-10-12 13:42:41

JavaScript实现自适应窗口大小的网页的相关文章

基于jQuery自适应窗口大小导航菜单

基于jQuery自适应窗口大小导航菜单.这是一款响应式导航菜单特效,支持手机导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> <h2>深色样式(默认)</h2> <ul class="pgwM

网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)

此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法) http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/10/google_charts-with-asp.net-clientscriptmanager.registerstartupscript.as

echarts学习总结(二):一个页面存在多个echarts图形,图形自适应窗口大小

如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为: myChart.setOption(option); window.onresize = myChart.resize; 则只有一个图形可自适应窗口大小,另外一个则不能随窗口大小而改变图形大小, 解决办法为在每一个echarts图形页面将上面代码改为如下代码: myChart.setOption(option); window.addEventListener("resize",function(){ myCha

MFC控件自适应窗口大小类

AutoAdapt.h #pragma once class CAutoAdapt { public: CAutoAdapt(void); virtual ~CAutoAdapt(void); public: void ReSize(HWND m_hWnd); void InitSize(HWND m_hWnd); POINT old; private: }; AutoAdapt.cpp #include "stdafx.h" #include "AutoAdapt.h&qu

HTML 网页背景图片自适应窗口大小

<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hello world</title> </head> <body> <div id="Layer1" style="position:a

JavaScript特效实例010-弹出网页模式对话框

实例010                              弹出网页模式对话框 实例说明 弹出一个指定大小的网页模式对话框. 技术要点 本实例主要应用window对象的showModalDialog()方法,该方法用于弹出网页(模式)对话框,其语法如下. variant = object.showModalDialog(sURL[,vArguments[,sFeatures]]) 参数说明. 1.sURL: 指定URL文件地址. 2.vArguments: 用于向网页传递参数,传递参数

Qt Creator 窗体控件自适应窗口大小布局(转)

常见的软件窗口大小改变(最大化.手动改变时)需要窗口的部件能够自适应布局,而在Qt的应用程序界面设计中,对于像我一样的初学者如何实现窗口自适应调整还是要绕点弯路的.网上百度了很多,多数说的很含糊,还有很多是用程序实现的,既然已经有Qt Creator那么高集成度的工具了,我还是倾向于直接在Qt Creator中通过可视化配置的方式完成,一是所见即所得,而是效率要高不少. Qt中如果想实现窗体内空间随着窗体大小调整,必须使用布局管理,常用的布局管理有QHBoxLayout.QVBoxLayout.

自适应PC端网页制作使用REM

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.

JavaScript基础 window.innerWidth 获取网页的宽度与高度 IE9,火狐可以用

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut