zoukankan      html  css  js  c++  java

  • 常用到代码片段

    1.IE条件注释

    条件注释简介

    1. IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
      条件注释只能用于IE5以上，IE10以上不支持。

    2. 如果你安装了多个IE，条件注释将会以最高版本的IE为标准。

    3. 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

    4. 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">
  • 相关阅读:
    工厂模式简介
    设计模式
    idea的安装与配置及基本用法
    软件架构设计的七大原则
    C#设计模式开启闯关之路
    基础知识详解系列目录
    .Net Core2.2 使用 AutoMapper进行实体转换
    通俗易懂设计模式解析——解释器模式
    通俗易懂设计模式解析——备忘录模式
    通俗易懂设计模式解析——访问者模式
  • 原文地址：https://www.cnblogs.com/shoestrong/p/5525896.html
Copyright © 2011-2022 走看看