<!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实现自适应窗口大小的网页的更多相关文章

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

    此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...

  2. echarts学习总结（二）：一个页面存在多个echarts图形，图形自适应窗口大小

    如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为: myChart.setOption(option); window.onresize = myChart.resize; 则只 ...

  3. 有人说，即使没有JavaScript，你也可以做网页。在纯HTML

    有人说,即使没有JavaScript,你也可以做网页.在纯HTML +服务器端语言理论中也可以完成所有功能,那么,为什么以及在哪里存在JavaScript?   JS,全称JavaScript   在 ...

  4. javascript怎么获取指定url网页中的内容

    javascript怎么获取指定url网页中的内容 一.总结 一句话总结:推荐jquery中ajax,简单方便. 1.js能跨域操作么? javascript出于安全机制不允许跨域操作的. 二.用ph ...

  5. Javascript获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

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

    做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...

  7. QQ在线客服JS代码，自适应漂浮在网页右侧

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. javascript实现浏览器窗口大小被改变时触发事件的方法

    转载 当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信 ...

  9. java基础69 JavaScript产生伪验证码（网页知识）

    1.伪验证码 <!doctype html> //软件版本:DW2018版 <html> <head> <meta charset="utf-8&q ...

随机推荐

  1. 【Java集合源代码剖析】Java集合框架

    转载轻注明出处:http://blog.csdn.net/ns_code/article/details/35564663 Java集合工具包位于Java.util包下,包括了非常多经常使用的数据结构 ...

  2. Zookeeper之ZKClient的使用

    maven依赖 <dependency> <groupId>com.101tec</groupId> <artifactId>zkclient</ ...

  3. FreeBSD Try to set MAKE_JOBS_UNSAFE=yes and rebuild before

    FreeBSD Try to set MAKE_JOBS_UNSAFE=yes and rebuild before,玛德,FreeBSD安装软件就是蛋疼~ mark In some ports th ...

  4. 我的 Android 开发实战经验总结

    我的 Android 开发实战经验总结 字数4440 阅读5137 评论43 喜欢250 曾经一直想写一篇总结 Android 开发经验的文章,预计当时的我还达不到某种水平,所以思路跟不上,下笔又捉襟 ...

  5. linux USR1亦通常被用来告知应用程序重载配置文件

    linux kill 命令 以及 USR1 信号 解释 原创 2016年03月16日 16:48:27 标签:linux kill -USR1 5325 最近 在做 服务器搭建的一些工作,其中 用到了 ...

  6. mysql 数据库复制表 create table city1 like city;

    -- 只复制表结构 create table city1 like city; INSERT INTO test2 SELECT * FROM test; -- 上面的表必须存在 -- 复制整张表的数 ...

  7. 如何解决HTML在各种浏览器的兼容性

    方法/步骤 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padding:0px;} 借于 ...

  8. CSDN学院 免费技术答疑公开课，本周四场即将开播~~~

    为了酬谢广大学员,CSDN学院特推出免费技术答疑公开课,让您开启一段充实的学习之旅~ 本周四场即将开播! ----------------------------------------------- ...

  9. Python Numpy ValueError: data type must provide an itemsize

    天朝网络锁国,百度找了半个小时找不出来原因,只能谷歌 谷歌第一条就是,顿时感觉幸福感来的太突然 原因是输入的矩阵均是字符串(从文件里读的) 那么就需要批量转数组,一行一行的转. 下面是我的代码: ro ...

  10. c#实现一个打砖块游戏step by step---开篇

    一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 游戏截图与说明 1. 游戏截图 2. 游戏说明: 蓝色砖块砖块为普通 ...