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 ...
随机推荐
- JsCal( JS Calendar)
http://www.dynarch.com/projects/calendar Doc: http://www.dynarch.com/jscal/ This is the documentatio ...
- script
实例 链接一个外部脚本文件: <script type="text/javascript" src="myscripts.js"></scri ...
- Power Network - poj 1459 (最大流 Edmonds-Karp算法)
Time Limit: 2000MS Memory Limit: 32768K Total Submissions: 24788 Accepted: 12922 Description A ...
- Customize Netbeans Platform Splash Screen and About Dialog
原帖一直打不开,通过谷歌翻译找到的 http://blogs.kiyut.com/tonny/2007/10/18/customize-netbeans-platform-splash-screen- ...
- 整合Thinkphp数据库基本操作CURD,界面datagrid采用EasyUi的Demo
1 <?php 2 class CurdAction extends Action{ 3 public function del($id){ 4 ...
- python网络数据采集的代码
python网络数据采集的代码 https://github.com/REMitchell/python-scraping
- SUSE10 SP4源码升级Python到2.6.6
1.安装依赖包(CentOS可采用yum) zypper in gcc gcc-c++ openssl-devel-32bit openssl-devel readline-devel readlin ...
- libevent在windows下用visual studio编译时出现error C2894错误的原因与解决方法
libevent是一个使用很广泛的网络库,今天想了解下它.于是去git clone了一份源码,用vs2005的命令行:nmake -f makefile.nmake编译之,顺利编译通过,生成三个静态库 ...
- day8笔记
一.上节回顾 1,id() 内存地址2, == 比较的是值 is 比较的是内存地址 数字,字符串,有小数据池, #内存地址一样的 int -5--256 str:1,不能有空格. 2,长度不能超过20 ...
- 第二篇:尽可能使用 const
前言 const 关键字是常量修辞符,如果要告知编译器某个变量在程序中不会发生改变,则可将其声明为 const. 但,对 const 关键字的认识不能仅仅停留在这一层 - 它提供了很多更强大的功能. ...