js实现页面自适应
来源：互联网 发布：错生网络剧 编辑：程序博客网 时间：2024/05/01 19:02
<!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 clewvar 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>阅读全文
0 0
- js实现页面自适应
- js实现页面iframe高度自适应
- iframe自适应加载页面高度-js实现(转载)
- iframe自适应页面高度js
- 通过JAVAScript实现页面自适应
- 通过JAVAScript实现页面自适应
- 通过JAVAScript实现页面自适应
- 通过JAVAScript实现页面自适应
- 奇怪的问题，关于js+css实现页面内容高度自适应的两种解决方案
- css---pc、无线如果通过js获取屏幕宽度结合sass实现自适应页面
- js实现图象大小自适应
- js实现自适应宽高
- js菜单自适应的实现
- js实现textarea自适应高度
- jsp页面iframe高度自适应js
- DIV自适应页面宽度的实现
- 通过JAVAScript实现页面自适应javascript
- html页面图片和文字实现自适应
- 在Oracle Linux中可以禁用ssh的同时启用scp么?
- MySql中的多列索引
- JavaScript中const,var,let区别
- 洛谷5月月赛R1题解报告
- ［每日问答］无约束最优化问题有哪些解法？
- js实现页面自适应
- poj1321-棋盘问题
- linux ss
- [小知识点]绝对路径与相对路径.
- java——强制类型转换数据溢出的结果计算
- 导航定位(利用锚点和jquery定位)
- Python-字典的基本操作
- 使用指针与不使用指针的区别以及int (*compare)(int a,int b)的用法
- nju1017 Heresy
