佛系整理

HTML与XHTML——二者有什么区别?
答案：

1. HTML 元素必须被正确地嵌套。
2. XHTML 元素必须被关闭。
3. 标签名必须用小写字母。
4. XHTML 文档必须拥有根元素。

标签上title属性与alt属性的区别是什么?
答案： title属性是鼠标划上去显示的内容
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。

给body设置宽高背景色，背景还是会铺满全屏，原因是如果没有给html设置背景色，body的背景色就是浏览器html的背景色

:visible 除以下几种情况之外就是可见元素
设置为display:none
type=hidden
width height设置为0
隐藏的父元素（同时隐藏所有子元素）

new Date(“2019/03/05”).getTime()获取毫秒
两个毫秒相减除246060*1000(一天的毫秒数)
可以获得两个毫秒数相减的天数

设置自定义属性用attr 删除用removeAttr
设置内置属性用prop(“checked”,true)
删除用prop(“checked”,false)

removeProp最好不用，将属性值设置为false
removeProp可以用来删除一些自定义属性，但不是内置属性，例如checked selected disabled 将彻底删除对应属性，一旦删除则无法再重新添加该属性(低版本谷歌下可见影响)

整理
/隐藏滚动条/

::-webkit-scrollbar{width:0;height:0}

1.只允许输入数字和小数点。

<input onKeypress="return (/[\d.]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled">

2，判断的更详细一些，甚至22…2这样不算数字也判断得出来

<script>

    function check(){
      var i=document.getElementById("tt").value; 
         if ( isNaN(i) ) { 
                 alert("非法字符！");       
                 tt.value="";
          }
    }
</script>

<input type="text" name="tt" id="tt" onkeyup="check();">

3，只允许输入整数。其实也完全可以根据第三条来举一反三做一些限制。

<script language=javascript>
function onlyNum() {
    if(!(event.keyCode==46)&&!(event.keyCode==8)&&!(event.keyCode==37)&&!(event.keyCode==39))
    if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
    event.returnValue=false;
}
</script>

<input onkeydown="onlyNum();" style="ime-mode:Disabled">

4，只能是数字

<input onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

5.js keycode

var phone=document.getElementById('numberbox');
   phone.onkeydown=function(e){
               var e=e||event;
               if((e.keyCode>=48&&e.keyCode<=57)||e.keyCode==8){

               }else{
                   return false;
               }
           }

/实际赠送次数不得超过总数/

   $(".gift_num").keyup(function(){
        var gift_num_sum=parseInt($(".gift_num_sum").text());
        var gift_num=parseInt($(this).val());

        if(gift_num > gift_num_sum){
            $(this).val("");
        }
        var value=$(this).val().replace(/[^\d]/g,'');
        $(this).val(value)

    })

/项目名称过长时调整行高使之换行/

var product_name_length1=$("#product_name1").text().length;
if(product_name_length1 > 15){
    $("#product_name1").css('line-height','28px');
}

/类别超出四个字折行显示/

  var type=$(".type_height");
            for(var i=0;i<type.length;i++){
                var type_height=$(".type_height").eq(i).text().length;
                if(type_height > 4){
                    $(".type_height").eq(i).addClass('line-height25');
                }else{
                    $(".type_height").eq(i).removeClass('line-height25');
                }
            }

/*获取当前时间

var mydate = new Date();
var year= mydate.getFullYear();
var month=mydate.getMonth()+1;
var day=mydate.getDate();
if(month < 10){
    month="0"+month;
}
if(day < 10){
    day="0"+day;
}

var str = "" + year + "-";
    str += month + "-";
    str += day;
$("#demo2").val(str);

/获取当前时间/

   time()
        function time(){
            var mydate = new Date();
            var year= mydate.getFullYear();
            var month=mydate.getMonth()+1;
            var day=mydate.getDate();
            var h=mydate.getHours();
            var m=mydate.getMinutes();
            var s=mydate.getSeconds();
            var week=mydate.getDay();
            var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            week=arr[week];

            if(month < 10){
                month="0"+month;
            }
            if(day < 10){
                day="0"+day;
            }
            if(h>12){
                h="下午"+24-h;
            }else{
                h="上午"+h
            }
            if(s<10){
                s="0"+s;
            }
            var str = "" + year + "年";
                str += month + "月";
                str += day+ "日 ";
                str += h+ ":";
                str += m+ ":";
                str += s+ " ";
                str += "今天是"+week;
            $("#time").val(str);
            setInterval(time,1000)
        }

//判断只能输入数字，且是文本框类型

     // delegate（）事件委托，适用于动态添加事件，委托父级元素

   $("body").delegate("#canBackValue,#canBackPrice","keyup",function(){   
        $(this).val($(this).val().replace(/[^\d]/g,''));
    })

//定义全局
var countdownTime = 100;
var time = null;
//点击关闭按钮时（X），清空倒计时

$("#close_confirm_payment_btn").click(function() {
        countdownTime = 0; // 倒计时时间
        displayCountdown();
        $("#send_phoneCode").val("");
        $('.filter_box').css('display', "none");
    })

//调用发送验证码
function send_phoneCode() {
    var url = webapp + "/crm-serviceorder-resource/outServiceorderVCode";
    $.ajax({
        url: url,
        data: {
            mobile: common.getCrmSysUser().crmVip.mobile
        },
        success: function(rs) {
            displayCountdown();

        }
    });
}

/**
 * 验证码发送成功后显示倒计时，默认100秒后可以重新发送
 */

function displayCountdown() {
    //发送验证码按钮
    var verificationBtn = $('.verification_code_btn');
    verificationBtn.html("<em style='color:#dd0e78;  text-align: left;'>" + countdownTime + "s</em>后重新获取");

    if(countdownTime == 0) {
        clearInterval(time);
        time = null;
        countdownTime = 100;
        verificationBtn.html("重新获取").removeClass("verification_btn01");
                //重新添加点击事件
        verificationBtn.attr("onclick", "send_phoneCode()");
    } else {
                //移除点击事件，防止倒计时时多次点击
        verificationBtn.attr("onclick", "null");
        if(null == time) {
            time = setInterval(displayCountdown, 1000);
            verificationBtn.addClass("verification_btn01");
        }
        countdownTime--;
    }
}

=======================================================================
循环遍历每个元素，并且可以获得当前元素的index和value

$.each(元素，function(index,value){

})

主流浏览器内核

使用Trident内核的浏览器：IE、Maxthon、TT、The World等；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。

1、解决兼容性方案一：

这个的意思主要就是要浏览器使用ie7或者ie7以上的版本进行解析网页。

2、解决兼容性方案一二：

content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。

若页面需默认用极速核，增加标签：

若页面需默认用ie兼容内核，增加标签：

若页面需默认用ie标准内核，增加标签：

========================================================================
给每个i添加点击事件

 window.onload = function () {
            var btn = document.getElementsByTagName("input");
            for (var i = 0; i < btn.length; i++) {
                btn[i].onclick = (function (i) {
                    return function () { alert(this.value+"|"+i); }
                })(i);
            }
        }

取对应个体下标值

var btn = document.getElementsByTagName("button");
for ( var i=0; i < btn.length; i++){
    btn[i].$index = i;
    btn[i].onclick = function(){
        alert(this.$index)
    }
}

=====================================================================
滑动分页

  $("#vip_data")[0].onscroll=function(e){
        if(this.scrollTop == ($(".record_name_table").length * 60 - vip_data_container)){
            if(data_all_count == $(".record_name_table").length){
                return;
            }
            mobile(data_page_num + 1);
        }

    }

================================================================

超出显示省略号

text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

超出两行显示省略号

css:

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

超出多行显示。。。

js:

var t=document.getElementById("t");
t.innerHTML.length>50?t.innerHTML=t.innerHTML.substring(0,50)+"..." : t.innerHTML

jq:

$(function(){
    $("#t").html().length>50?$("#t").html($("#t").html().substring(0,50)+"...."):$("#t").html()
});

======================================================================
回到顶部按钮

$(function(){
        //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
        $(function () {
            $(window).scroll(function(){
                if ($(window).scrollTop()>100){
                    $(".backTop").fadeIn(1500);
                }
                else
                {
                    $(".backTop").fadeOut(1500);
                }
            });

            //当点击跳转链接后，回到页面顶部位置

            $(".backTop").click(function(){
                $('body,html').animate({scrollTop:0},1000);
                return false;
            });
        });
    });

======================================================================
父元素清除浮动

 .clearfix:after {
              content: ".";
              clear: both;
              height: 0;
              visibility: hidden;
              display: block;
            }

ie7下清除浮动

加 overflow：auto；zoom：1；

截取abcdefg右边的fg

方法一

<script>
string="abcdefg"
alert(string.substring(string.length-2,string.length))
</script>

方法2

<script>
alert("abcdefg".match(/.*(.{2})/)[1])
</script>

<script>
alert("abcdefg".match(/.{2}$/))
</script>

方法3

<script>
alert("abcdefg".slice(-2))                 //推荐这个，比较简单,-2表示取右边两个字符
</script>

/* ps图片转为矢量图 */

打开图片

图像–调整–自动色阶

图像–模式–灰度（变为黑白图像）

图像–模式–亮度/对比度

打开通道—按Ctrl单击灰色通道----Ctrl+shift+i反选

打开路径—点击第四个生成路径

图像-模式-RGB颜色

编辑–定义自定形状，（这样即可将图像无线放大不会出现失真的效果了）

新建文件—选择自定义形状—找到定义的图片–按shift等比缩放

去除bootstrap中input的outline

input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0px transparent;
    border-radius: 0px;
}

/list-input点击实现placeholder效果/

 $(".list-input").focus(function(){
          $(this).val(" ");
   })
   $(".list-input").blur(function(){
        var val=$(this).val();
        /*失去焦点时*/
        if($(".list-input").eq(0).val()==" "){
              $(".list-input").eq(0).val("开始日期");
        }else if ($(".list-input").eq(1).val()==" "){
              $(".list-input").eq(1).val("结束日期");
        }else{
              $(this).val(val);
        }
   })

如何判断浏览器是否支持某个css属性

实现思路：通过判断某个element的style中是否存在某个css属性

代码：

(function(temp){
    if(temp.style["transition"]!=undefined){
       return true;
    }
    return false;
})(document.creatElement("div"));

居中问题css3(ie9+)

垂直居中

.center-vertical{
     position:relative;
     top:50%;
     transform:translateY(-50%);
}

水平居中

.center-horizontal{
     position:relative;
     left:50%;
     transform:translateX(-50%);
}

判断是不是谷歌浏览器

<script type="text/javascript">
    var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
        alert(isChrome);
        if (isChrome) {
            alert("是Chrome浏览器");
        } else {
            alert("不是Chrome浏览器");
        }
    </script>

//返回当前页的前一页

清除select的默认下拉箭头

/*将默认的select选择框样式清除*/
     appearance: none;
    -moz-appearance:none;
    -webkit-appearance:none;

ie8使用svg的格式

<svg width="14" height="14">
     <image xlink:href="../img/star.svg" src="../img/star.png" width="14" height="14" />
</svg>

选中option的值
jq:

$("#select")find(option:selected).val().

js:

js帅气输出sb

(!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]