1.如何在button上设置鼠标触碰样式
2.在页面中添加时间js代码(时时)
3.页面加载状态
4.固定页面元素位置不随滚动条滚动
5.iframe获取子元素高度,父类自适应
6.利用jquery滚动到导航条时固定(fixed)在顶部
7.DIV和Table的水平、垂直居中
8.JS各种获取控件ID的方法
9.JS判断浏览器类型与版本
10.给span宽度的CSS完美方法
11.密码框显示文字
11.-------------------------------------------------------------------------------------
<input type="text" onfocus="changeTip(this);"id="passText"name="passText"value="请输入密码"/>
<input style="display:none;"type="password" onblur="changeTip(this);"id="pass"placeholder=""name="pass"value=""/>
<script type="text/javascript">
function changeTip(th){
var passText =document.getElementById('passText');
var pass =document.getElementById('pass');
if(th.id =='pass'){
if(th.value ==''||th.value.length ==0){
passText.style.display='';
pass.style.display='none';
}
}else{
passText.style.display='none';
pass.style.display='';
pass.focus();
}
}
</script>
10.-------------------------------------------------------------------------------------
span{
display:-moz-inline-box;
display:inline-block;
width:XXXX;
}
9.-------------------------------------------------------------------------------------
1、判断浏览器是否为IE
document.all ? 'IE' : 'others':在IE下document.all值为1,而其他浏览器下的值为0;
navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others':navigator.userAgent是描述用户代理信息。
navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others':navigator.appName描述浏览器名称信息。
2、判断IE版本
navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version':在已知是IE浏览器的情况下,可以通过此方法判断是否是IE6;
navigator.userAgent.indexOf("MSIE 6.0")>0 ? 'IE7' : 'other version':同上;
navigator.appVersion.match(/7./i)=="7." ? 'IE7' : 'other version':在已知是IE浏览器的情况下,可以通过此方法判断是否是IE7;
navigator.userAgent.indexOf("MSIE 7.0")>0 ? 'IE7' : 'other version':同上;
navigator.appVersion.match(/8./i)=="8." ? 'IE8' : 'other version':在已知是IE浏览器的情况下,可以通过此方法判断是否是IE8;
navigator.userAgent.indexOf("MSIE 8.0")>0 ? 'IE8' : 'other version':同上。
3、JS获取浏览器信息
浏览器代码名称:navigator.appCodeName
浏览器名称:navigator.appName
浏览器版本号:navigator.appVersion
对Java的支持:navigator.javaEnabled()
MIME类型(数组):navigator.mimeTypes
系统平台:navigator.platform
插件(数组):navigator.plugins
用户代理:navigator.userAgent
DEMO:
Js代码
<script language="JavaScript">
<!--
function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
alert("您的浏览器类型为:"+getOs());
-->
</script>
8.-------------------------------------------------------------------------------------
普通状态中JS获取控件ID
document.getElementById('controlID');
JS获取父窗口控件ID
window.parent.document.getElementById("controlID");
JS获取iframe中控件ID
window.frames['iframeID'].document.getElementById("controlID");
JS获取传入页面中控件ID
opener.document.getElementById('controlID').value;
7.-------------------------------------------------------------------------------------
这段时间的项目工作接触了比较多的页面设计问题,现对图片和文字在DIV、Table中的水平、垂直居中问题做个总结。
一般图片的居中问题容易解决,我的解决方法是通过样式设置:
background-image:url(path) //链接图片的路径
background-repeat:repeat; //设置图片是否是否水平、垂直延展。可用的参数有:repeat、repeat-X、repeat-Y和no-repeat。
background-position:bottom center;这个就是设置图片的具体位置,第一个是水平,第二就是垂直方向的。还可以使用具体的像素(为当前容器里的绝对像素)。
文字的水平居中很容易设置
在CSS中使用Text-align:就可以了
Table还可以用align:
DIV的垂直居中:首先获取当前DIV的高度h,然后设置line-height:h;vertical-align:middle.这样文字就可以垂直居中显示。
Table好象对上述设置不支持,所以直接在Table标记里添加一属性:valign:middle。同时还要设置padding-top一值,我见网 上有说设置padding-top :2px就可以了,我在项目中也是这个像素。但我不知道这个像素值是否跟当前的tr高度有关。
6.-------------------------------------------------------------------------------------
一、利用js制作
html 代码:
代码如下:
<link href="css/base.css" media="all" rel="stylesheet" type="text/css" />
<br />
<style type="text/css">
<br />
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}<br />
.header{height:150px;}<br />
#nav{padding:10px;position:relative;top:0;background:black;width:1000px;}<br />
a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}<br /></style>
<br />
<br />
<br />
<div class="wrapper"><br />
<div class="header"> </div>
<br />
<div id="nav"><br />
<a href="#">11111</a><br />
<a href="#">22222</a><br />
<a href="#">33333</a><br />
<a href="#">44444</a><br />
<a href="#">55555</a></div>
</div>
menuFixed.js 代码:
代码如下:
function menuFixed(id){
var obj = document.getElementById(id);
var _getHeight = obj.offsetTop;
window.onscroll = function(){
changePos(id,_getHeight);
}
}
function changePos(id,height){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < height){
obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}
这个方法也好也不好,好处在于不用引用什么,方法比较简单,只是切换relative和fixed,坏处也很明显并且很严重,就是页面如果比较长,滚动返回的时候,固定的层变没了。
二、利用jquery
<div style="background: #999; height: 500px"> </div>
<br />
<div id="fixedMenu" style="width: 100%; background: #eee">菜单</div>
<br />
<div style="background: #999; height: 900px"> </div>
<br />
<script type="text/javascript" src="http://www.niwo8.com/statics/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var ie6 = /msie 6/i.test(navigator.userAgent)
, dv = $('#fixedMenu'), st;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st >= parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
复制以上代码到空页面中,就能看看到效果。这种方法需要引用jquery.js库,jquery.js库最好选用比较新版的,好像1.2.3版本以前的不能正常产生效果。当前代码中的jquery.js库是1.8.0版本的(2013年4月19日),如果库链接失效,请自行下载jquery.js库。
当然了,如果你的导航在页面顶端,就不用那么麻烦了,直接定义position:fixed就可以了。另外,如果你希望更美观些,可以利用CSS3增加阴影,或者增加透明度。
5.-------------------------------------------------------------------------------------
<!-- 引用界面 -->
<iframe id="iframepage" width="100%" height="100%" frameBorder="0" scrolling="no" src="Index.html" onload="Javascript:SetCwinHeight()"></iframe>
//start iframe自适应高度
function SetCwinHeight() {
var iframeid = document.getElementById("iframepage"); //iframe id
iframeid.height = "10px";//先给一个够小的初值,然后再长高.
if (document.getElementById) {
if (iframeid && !window.opera) {
if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
iframeid.height = iframeid.contentDocument.body.offsetHeight;
} else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
iframeid.height = iframeid.Document.body.scrollHeight;
}
}
}
}
window.onload = SetCwinHeight();
//end iframe自适应高度
4.-------------------------------------------------------------------------------------
.fixed{
display:block;
position:fixed;
}
3.-------------------------------------------------------------------------------------
document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
2.-------------------------------------------------------------------------------------
<script>
function testDate(){
var date=new Date();
var result=" 当前时间:"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+date.getHours()+" : "+date.getMinutes()+" : "+date.getSeconds();
document.getElementById("timeShow").innerHTML=result;
}
setInterval("testDate()", 1000);
</script>(timeshow为插入id)
1.-------------------------------------------------------------------------------------
<INPUT TYPE="submit" style="cursor: hand" value="hand">
auto :标准光标
default :标准箭头
hand :手形光标
wait :等待光标
text :I形光标
vertical-text :水平I形光标
no-drop :不可拖动光标
not-allowed :无效光标
help :?帮助光标
all-scroll :三角方向标
move :移动标
crosshair :十字标
相关推荐
activity更新另一个activityUI方法——广播
Android UI开发——SlidingDrawer 抽屉效果~~
实现计算器的基本功能。实现计算器的基本功能。
Android开发笔记,UI基础编程,PDF文档。
Android 4.0 ICS SystemUI浅析——StatusBar工作流程之时间日期设置文中涉及到的图片以及代码。 文章地址:http://blog.csdn.net/yihongyuelan
unity的UI插件,支持树状结构,列表结构,下拉菜单等多种实用UI,可修改扩展
Android开发笔记,UI编程和应用布局,PDF文档。
微信小程序UI模板之文章阅读器,实现了基本的文章浏览功能,供新手参考学习,其中文章采用内置形式,可更换成服务器提供,资源中不包含服务器配置。
史上最全的UI笔记,教你快速掌握UI,为你的iOS后续开发打下坚实的基础,本人亲自总结的
微信小程序常用UI模板之网络课程预约,实现了网校介绍/课程介绍/课程预约/功能,提供给初学者参考学习UI部分,资源未提供服务器配置。
Android Handler定时更新UI
SwiftUI教程-不定时更新.zip
libgdx——UI控件
UI——dp、dip、px、dpi、density概念及关系
UI开发第六篇——仿QQ的滑动TabUI开发第六篇——仿QQ的滑动Tab
python Pyautogui界面UI笔记
自己草草整的读书笔记,这本书虽然一百多页,但是给的信息量还不少,对于开发中的界面设计过程有很好的参考作用。读书笔记主要是记录了结果,原书对于原因有阐述,建议有兴趣的同学看看原书。
软UI设计系统——开源Bootstrap5设计系统.zip
UI开发第九篇——SlidingDrawer 抽屉效果 UI开发第九篇——SlidingDrawer 抽屉效果