常用到代码片段
1.IE条件注释
条件注释简介
-
IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法。
条件注释只能用于IE5以上,IE10以上不支持。 -
如果你安装了多个IE,条件注释将会以最高版本的IE为标准。
-
条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
-
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释使用方法示例
<!–[if IE 5]>仅IE5.5可见<![endif]–> <!–[if gt IE 5.5]>仅IE 5.5以上可见<![endif]–> <!–[if lt IE 5.5]>仅IE 5.5以下可见<![endif]–> <!–[if gte IE 5.5]>IE 5.5及以上可见<![endif]–> <!–[if lte IE 5.5]>IE 5.5及以下可见<![endif]–> <!–[if !IE 5.5]>非IE 5.5的IE可见<![endif]–>
2.html代码用js动态加载进页面
<script type="text/html" id="T-pcList"> //这里面是你要放的html代码,例如放一个div的内容 </script>
把上面的js动态加入到页面中
$(function(){ var s=$("#T-pcList").html();//获得js的html内容 $(".picScroll-left .bd").html(s);//把s的内容放到class为bd内 thisstyle();//执行某个函数 });
3.js判断用户访问的是PC还是mobile
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; var sUserAgent = navigator.userAgent; return { trident: u.indexOf('Trident') > -1, presto: u.indexOf('Presto') > -1, isChrome: u.indexOf("chrome") > -1, isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u), isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1, webKit: u.indexOf('AppleWebKit') > -1, gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, mobile: !!u.match(/AppleWebKit.*Mobile.*/), ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, iPhone: u.indexOf('iPhone') > -1, iPad: u.indexOf('iPad') > -1, iWinPhone: u.indexOf('Windows Phone') > -1 }; }() } if(browser.versions.mobile || browser.versions.iWinPhone){ window.location = "http:/www.baidu.com/m/"; }
4.js如何判断用户是否是用微信浏览器
根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。判断函数如下:
function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false; } }
5.JS,Jquery获取各种屏幕的宽度和高度
Javascript:
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
JQuery:
$(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度 alert($(document).width());//浏览器当前窗口文档对象宽度 alert($(document.body).width());//浏览器当前窗口文档body的宽度 alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin })
6.jquery对文本框只读状态与可读状态的相互转化
$('input').removeAttr('Readonly');
$('input').attr('Readonly','true');
7.js/jquery实现密码框输入聚焦,失焦问题
js实现方法:
html代码:
<input id="i_input" type="text" value='会员卡号/手机号' />
js代码:
window.onload = function(){ var oIpt = document.getElementById("i_input"); if(oIpt.value == "会员卡号/手机号"){ oIpt.style.color = "#888"; }else{ oIpt.style.color = "#000"; } oIpt.onfocus = function(){ if(this.value == "会员卡号/手机号"){ this.value=""; this.style.color = "#000"; this.type = "password"; }else{ this.style.color = "#000"; } }; oIpt.onblur = function(){ if(this.value == ""){ this.value="会员卡号/手机号"; this.style.color = "#888"; this.type = "text"; } }; }
jquery实现方法:
html代码:
<input type="text" class="oldpsw" id="showPwd" value="请输入您的注册密码"/> <input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/>
jquery代码:
$("#showPwd").focus(function() { var text_value=$(this).val(); if (text_value =='请输入您的注册密码') { $("#showPwd").hide(); $("#password").show().focus(); } }); $("#password").blur(function() { var text_value = $(this).val(); if (text_value == "") { $("#showPwd").show(); $("#password").hide(); } });
8.获取当前日期
var calculateDate = function(){ var date = new Date(); var weeks = ["日","一","二","三","四","五","六"]; return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+ date.getDate()+"日 星期"+weeks[date.getDay()]; } $(function(){ $("#dateSpan").html(calculateDate()); })
9.时间倒计时(固定倒计时的结束时间)
function countdown() { var endtime = new Date("Jan 18, 2015 23:50:00"); var nowtime = new Date(); if (nowtime >= endtime) { document.getElementById("_lefttime").innerHTML = "倒计时间结束"; return; } var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000); if (leftsecond < 0) { leftsecond = 0; } __d = parseInt(leftsecond / 3600 / 24); __h = parseInt((leftsecond / 3600) % 24); __m = parseInt((leftsecond / 60) % 60); __s = parseInt(leftsecond % 60); document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒"; } countdown(); setInterval(countdown, 1000);
10.10秒倒计时跳转
html代码:
<div id="showtimes"></div>
js代码:
//设定倒数秒数 var t = 10; //显示倒数秒数 function showTime(){ t -= 1; document.getElementById('showtimes').innerHTML= t; if(t==0){ location.href='error404.asp'; } //每秒执行一次,showTime() setTimeout("showTime()",1000); } //执行showTime() showTime();
11.判断浏览器的简单有效方法
function getInternet(){ if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; //IE浏览器 } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; //Firefox浏览器 } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; //Safan浏览器 } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; //Camino浏览器 } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; //Gecko浏览器 } }
12.每隔0.1s改变图片的路径
<div id="tt"><img src="images/1.jpg" alt=""/></div>
js代码:
(function(){ function chagesimagesrc(t){ document.getElementById("tt").childNodes[0].src="images/"+t+".jpg"; } setInterval(function(){ for(var i=0;i<2;i++){ setTimeout((function(t){ return function(){ chagesimagesrc(t); } })(i+1),i*100) } },1000); })()
13.点击某个div区域之外,隐藏该div
$(document).bind("click",function(e){ var target = $(e.target); if(target.closest(".city_box,#city_select a.selected").length == 0){ $(".city_box").hide(); } })
14.js获取某年某月的哪些天是周六和周日
<p id="text"></p>
function time(y,m){
var tempTime = new Date(y,m,0);
var time = new Date();
var saturday = new Array();
var sunday = new Array();
for(var i=1;i<=tempTime.getDate();i++){ time.setFullYear(y,m-1,i); var day = time.getDay(); if(day == 6){ saturday.push(i); }else if(day == 0){ sunday.push(i); } } var text = y+"年"+m+"月份"+"<br />" +"周六:"+saturday.toString()+"<br />" +"周日:"+sunday.toString(); document.getElementById("text").innerHTML = text; } time(2014,7);
15.如何在手机上禁止浏览器的网页滚动
方法一:
<body ontouchmove="event.preventDefault()" >
方法二:
document.addEventListener('touchmove', function(event) { event.preventDefault(); })
16.改变type=file默认样式,"浏览"等字体
<input type="file" id="browsefile" style="visibility:hidden" onchange="filepath.value=this.value"> <input type="button" id="filebutton" value="" onclick="browsefile.click()"> <input type="textfield" id="filepath">