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>

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

网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.RegisterStartupScript 方法)
此为文章备份,原文出处(我的网站) 网页绘制图表 Google Charts with JavaScript #2 ....与ASP.NET网页结合 (ClientScriptManager.Regi ...
echarts学习总结（二）：一个页面存在多个echarts图形，图形自适应窗口大小
如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为: myChart.setOption(option); window.onresize = myChart.resize; 则只 ...
有人说，即使没有JavaScript，你也可以做网页。在纯HTML
有人说,即使没有JavaScript,你也可以做网页.在纯HTML +服务器端语言理论中也可以完成所有功能,那么,为什么以及在哪里存在JavaScript? JS,全称JavaScript 在 ...
javascript怎么获取指定url网页中的内容
javascript怎么获取指定url网页中的内容一.总结一句话总结:推荐jquery中ajax,简单方便. 1.js能跨域操作么? javascript出于安全机制不允许跨域操作的. 二.用ph ...
Javascript获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度
/******************** * 取窗口滚动条高度 ******************/function getScrollTop(){ var scrollTop=0; ...
自适应PC端网页制作使用REM
做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的 ...
QQ在线客服JS代码，自适应漂浮在网页右侧
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
javascript实现浏览器窗口大小被改变时触发事件的方法
转载当浏览器的窗口大小被改变时触发的事件window.onresize 为事件指定代码: 复制代码代码如下: window.onresize = function(){ } 例如: 浏览器可见区域信 ...
java基础69 JavaScript产生伪验证码（网页知识）
1.伪验证码 <!doctype html> //软件版本:DW2018版 <html> <head> <meta charset="utf-8&q ...

随机推荐

CentOS 6.2 安装kdbg
地址:http://pkgs.org/centos-5/centos-x86_64/kdbg-2.0.2-1.2.1.x86_64.rpm.html 百度网盘地址:http://pan.baidu.c ...
6.5安装nagios
最近因为,科研需要,接触上了Nagios,这里,我将安装笔记做个详解.为自己后续需要和博友们学习! VMware workstation 11 的下载 VMWare Workstation 11的安装 ...
Large repunit factors (Project Euler 132)
题目大意: 求出大数111111.....1 (1e9个1) 前40个质因子的和. 思路:可以把原来的数表示成$\frac{10^k - 1}{9}$ 其中$k=10^9$ 如果一个质数$p$ 满 ...
asp.net源程序编译为dll文件并调用的实现过程
很多时候,我们需要将.cs文件单独编译成.dll文件,这就需要使用csc命令将.cs文件编译成.dll动态链接库文件.具体的操作步骤如下: 打开命令窗口->输入cmd到控制台->cd C: ...
Unity3D学习笔记——NGUI之UIPopupList
UIPopupList:将这个组件添加到Button上,即可构建一个下拉列表. 效果图如下: 一:使用步骤 1.首先创建一个Sprite作为button. 2.创建一个label,用于显示当前选择的选 ...
SlidingMenu官方实例分析6——ResponsiveUIActivity
ResponsiveUIActivity 这个类实现的是一个响应适UI设计重点是布局的设计: layout布局如下: layout-large-land布局如下: layout-xlarge布局如下: ...
Linux之（node.js）服务
1.1下载源码你需要在下载最新的Nodejs版本, https://nodejs.org/en/download/ http://nodejs.org/dist/ 现在以node-v7.7.1.ta ...
mysql小知识点汇总
附录:(更新于2013-11-21) sql必知必会学习笔记:http://www.cnblogs.com/IPrograming/category/509859.html mysql 基本命令学习: ...
[Spring MVC]学习笔记－－FreeMarker的使用
还是先贴出该例子存于github上的位置 https://github.com/lemonbar/spring-mvc-freemarker Sping-Framework 的官方文档简单列出了在sp ...
poj1840
Eqs Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 15133 Accepted: 7426 Description ...

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

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

随机推荐

热门专题