前端零散代碼片斷

============設備的寬度 和高度=====================
console.log(window.innerWidth)
console.log(window.innerHeight)

===============聊天滾動到最底部核心================
var GdHeight = $(window).scrollTop();
var KsHeight = $(window).height();
var YmHeight = $(document).height()
console.log(GdHeight);//滾動條距離頂部的距離
console.log(KsHeight);//頁面可視區域的高度
console.log(YmHeight);//頁面總的高度；

=====================mui動態計算容器高度============================
$(".mui_content_wrap").height(window.innerHeight-($(".mui-bar-nav").height()+$(".mui-bar-tab").height())+"px")

==============方法js 點擊發送讓滾動條滾動到最底部=========================
var lct = document.getElementById('scrolldIV')；/*全局變量*/
lct.scrollTop = lct.scrollHeight;
================.input獲取焦點也讓滾動條滾動到最底部=======================
lct.scrollTop = lct.scrollHeight;

==============移動端在頁面中經過定義一個類實現點擊閃爍效果========================
var $twinkle = $(document).find(".twinkle");
$twinkle.on("tap",function(){
//判斷是否存在動畫
if(!$(this).is(":animated")){
$(this).fadeOut(50).fadeIn(50);
}else{
//當前動畫直接到達末狀態；
$(this).stop(false,true).animate();
}               
})

================css3在仙姑中=====================
h6{
counter-increment: di;
 }
h6:before{   /*在項目中追加數字編號*/ /*在項目中編號中追加文字*/
 content: counter(di)".";
 /*content: "第"counter(disc)"講:"; */
 color: green;
font-size: 10px;
        }
/*在項目中追加字母編號*/  
    p{
            counter-increment: dis;
        }        
       p:before{
           content: counter(dis,upper-alpha);
           color: red;
           font-size: 20px;
       }

================透明度過渡====================

 .right_txt {

          -webkit-animation: twinkling 1s infinite ease-in-out;
     }
      @-webkit-keyframes twinkling{    /*透明度由0到1*/
    0%{
       opacity:0; /*透明度爲0*/
     }
    100%{
       opacity:1; /*透明度爲1*/

    }
  }

 

============================================
$('.class').on("click",function(){……});至關於$('.class').bind("click",function(){……});
$(document).on("click",'.class',function(){……});至關於$('.class').live("click",function(){……});而是選擇其非動態生成的父節點而後再找到自己才能達到效果
js生成的元素綁定事件必須使用live，但新版的jq，已經淘汰了live，能夠用on方法代替，但必須注意寫法。

event.preventDefault()  阻止默認行爲
event.stopPropagation();阻止事件冒泡

==================旋轉360deg==============================
@-webkit-keyframes spinner {
from{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}

.spinner {
display: inline-block;
-webkit-animation: spinner 2s infinite linear;
animation: spinner 2s infinite linear;
-webkit-transform-origin:center center;
}

=======先阻止動畫=====
$(".Gotop").stop(true,false)
==============mui隱藏頁面滾動條方法======================
        body {
         overflow: hidden;
        }
    
        .mui-content {
         padding-top: 0!important;
         position: absolute;
        left:0;
        right:0;
         top: 44px;
         bottom: 0; /*有固定底部 高度*/
         overflow-y: scroll;
         height: auto;
        }
        /*打開電腦上沒有 手機上也沒有 關閉電腦上有,手機上沒有  */
        /*::-webkit-scrollbar {
         display: none;
        }*/

===========均分===============

parent:{

overflow:hidden;

margin-right:-10px;

}

son1:{

width：calc（50% - 10px）;

margin-right:10px;

}

 

son2:{

width:50%;

padding-right:10px;

background-clip:content-box;

box-sizing:border-box;

}

//如果只給其中的某個兒子設置右外邊距只有第二種方法纔會等分。

 

 

=============頁面滾動條效果=======

　　//1滾動條滾動的時候

$(window).scroll(function() {
            var GdHeight = $(window).scrollTop();
            var KsHeight = $(window).height();
            var YmHeight = $(document).height()
            console.log(GdHeight);//滾動條距離頂部的距離
            console.log(KsHeight);//頁面可視區域的高度
              console.log(YmHeight);//頁面總的高度；
            if(GdHeight >= KsHeight) {//滾動條距離頂部的距離大於或等於可視區域的高度顯示按鈕
                $(".icon-huidaodingbu").fadeIn();
              //  alert("超過一屏了")
            } else {
                $(".icon-huidaodingbu").fadeOut();
            }

        })　　

　　　　//2點擊按鈕回到頂部效果
        $(".icon-huidaodingbu").on("tap", function() {
            $("body").animate({
                "scrollTop": 0 + 'px'
            });
            $(this).fadeOut();
        })

        //3頁面刷新滾動條滾動到最頂部
        function myScroll() {
            //前邊是獲取chrome等通常瀏覽器 若是獲取不到就是ie了 就用ie的辦法獲取
            var x = document.body.scrollTop || document.documentElement.scrollTop;
            var timer = setInterval(function() {
                x = x - 100;
                if(x < 100) {
                    x = 0;
                    window.scrollTo(x, x);
                    clearInterval(timer);
                }
                window.scrollTo(x, x);
            }, "10");
        }

        myScroll();

 

 =============== 防止被人frame ===================
<SCRIPT LANGUAGE=JAVASCRIPT><!-- 
if (top.location != self.location)top.location=self.location;
// --></SCRIPT>

  =================video======================

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.mp4" width="320" height="240" />
  </object>
</video>

 

===================彈窗出現時，禁止屏幕的滑動============================

 當彈窗出現時，想禁止屏幕的滑動，給那個遮罩層添加touchmove事件便可，用e.preventDefault()會阻止的scroll，click等事件，消失時再off掉，$(".body_cover").on("touchmove", function(e) {    e.preventDefault();});css代碼以下：body{   overflow:scroll;   -webkit-overflow-scrolling:touch;}注意：Android不支持原生的彈性滾動，但能夠藉助第三方庫iScroll來實現。