JavaScript 經典實例收集整理

時間 2019-11-11

原文原文鏈接

跨瀏覽器事件

跨瀏覽器添加事件

//跨瀏覽器添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){//IE
            obj.attchEvent('on'+type,fn);
        }
    }

跨瀏覽器移除事件

//跨瀏覽器移除事件
function removeEvent(obj,type,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,false);
    }else if(obj.detachEvent){//兼容IE
        obj.detachEvent('on'+type,fn);
    }
}

跨瀏覽器阻止默認行爲

//跨瀏覽器阻止默認行爲
    function preDef(ev){
        var e = ev || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue =false;
        }
    }

跨瀏覽器獲取目標對象

//跨瀏覽器獲取目標對象
function getTarget(ev){
    if(ev.target){//w3c
        return ev.target;
    }else if(window.event.srcElement){//IE
        return window.event.srcElement;
    }
}

跨瀏覽器獲取滾動條位置

//跨瀏覽器獲取滾動條位置，sp == scroll position
    function getSP(){
        return{
            top: document.documentElement.scrollTop || document.body.scrollTop,
            left : document.documentElement.scrollLeft || document.body.scrollLeft;
        }
    }

跨瀏覽器獲取可視窗口大小

//跨瀏覽器獲取可視窗口大小
          function  getWindow () {
            if(typeof window.innerWidth !='undefined') {
                return{
                    width : window.innerWidth,
                    height : window.innerHeight
                }

            } else{
                return {
                    width : document.documentElement.clientWidth,
                    height : document.documentElement.clientHeight
                }
            }
        },

js 對象冒充

<script type = 'text/javascript'>
 
    function Person(name , age){
        this.name = name ;
        this.age = age ;
        this.say = function (){
            return "name : "+ this.name + " age: "+this.age ;
        } ;
    }
 
    var o = new Object() ;//能夠簡化爲Object()
    Person.call(o , "zhangsan" , 20) ;
    console.log(o.say() );//name : zhangsan age: 20 
 
</script>

js 異步加載和同步加載

異步加載也叫非阻塞模式加載，瀏覽器在下載js的同時，同時還會執行後續的頁面處理。
在script標籤內，用js建立一個script元素並插入到document中，這種就是異步加載js文件了：javascript

(function() {     
    var s = document.createElement('script');    
    s.type = 'text/javascript';     
    s.async = true;    
    s.src = 'http://yourdomain.com/script.js';    
    var x = document.getElementsByTagName('script')[0];    
     x.parentNode.insertBefore(s, x); 
})();

同步加載

　　日常默認用的都是同步加載。如：php

<script src="http://yourdomain.com/script.js"></script>

　　同步模式又稱阻塞模式，會阻止流覽器的後續處理。中止了後續的文件的解析，執行，如圖像的渲染。瀏覽器之因此會採用同步模式，是由於加載的js文件中有對dom的操做，重定向，輸出document等默認行爲，因此同步纔是最安全的。
　　一般會把要加載的js放到body結束標籤以前，使得js可在頁面最後加載，儘可能減小阻塞頁面的渲染。這樣能夠先讓頁面顯示出來。css

　　同步加載流程是瀑布模型，異步加載流程是併發模型。html

js獲取屏幕座標

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="auther" content="fq" />
    <title>獲取鼠標座標</title>
</head>
<body>
<script type="text/javascript">
    function mousePosition(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }
    function mouseMove(ev){
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        document.getElementById('xxx').value = mousePos.x;
        document.getElementById('yyy').value = mousePos.y;
    }
    document.onmousemove = mouseMove;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>

註釋：
1.documentElement 屬性可返回文檔的根節點。
2.scrollTop() 爲滾動條向下移動的距離
3.document.documentElement.scrollTop 指的是滾動條的垂直座標
4.document.documentElement.clientHeight 指的是瀏覽器可見區域高度前端

DTD已聲明的狀況下：java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

若是在頁面中添加這行標記的話python

IE

document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度

Firefox

document.documentElement.scrollHeight ==> 瀏覽器全部內容高度
document.body.scrollHeight ==> 瀏覽器全部內容高度
document.documentElement.scrollTop ==> 瀏覽器滾動部分高度
document.body.scrollTop ==>始終爲0
document.documentElement.clientHeight ==>瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器全部內容高度

Chrome

document.documentElement.scrollHeight ==> 瀏覽器全部內容高度
document.body.scrollHeight ==> 瀏覽器全部內容高度
document.documentElement.scrollTop==> 始終爲0
document.body.scrollTop==>瀏覽器滾動部分高度
document.documentElement.clientHeight ==> 瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器全部內容高度

瀏覽器全部內容高度即瀏覽器整個框架的高度，包括滾動條捲去部分+可視部分+底部隱藏部分的高度總和面試

瀏覽器滾動部分高度即滾動條捲去部分高度便可視頂端距離整個對象頂端的高度。chrome

綜上數組

一、document.documentElement.scrollTop和document.body.scrollTop始終有一個爲0，因此能夠用這兩個的和來求scrollTop

二、scrollHeight、clientHeight 在DTD已聲明的狀況下用documentElement，未聲明的狀況下用body

clientHeight
 在IE和FF下，該屬性沒什麼差異，都是指瀏覽器的可視區域，即除去瀏覽器的那些工具欄狀態欄剩下的頁面展現空間的高度。

PageX和clientX

PageX:鼠標在頁面上的位置,從頁面左上角開始,便是以頁面爲參考點,不隨滑動條移動而變化

clientX:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,便是以瀏覽器滑動條此刻的滑動到的位置爲參考點,隨滑動條移動而變化.

但是悲劇的是,PageX只有FF特有,IE則沒有這個，因此在IE下使用這個：

PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)

scrollTop表明的是被瀏覽器滑動條滾過的長度

offsetX:IE特有,鼠標相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角爲參考點,若是有boder`,可能出現負值

只有clientX和screenX 皆大歡喜是W3C標準.其餘的,都糾結了.
最給力的是，chrome和safari一條龍通殺!徹底支持全部屬性

js拖拽效果

<!doctype html>
<html lang="zn-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #login{
            height: 100px;
            width: 100px;
            border: 1px solid black;
            position: relative;
            top:200px;
            left: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript">
    var oDiv = document.getElementById("login");
    oDiv.onmousedown = function(e){
        var e = e || window.event;//window.event兼容IE,當事件發生時有效

        var diffX = e.clientX - oDiv.offsetLeft;//獲取鼠標點擊的位置到所選對象的邊框的水平距離
        var diffY = e.clientY - oDiv.offsetTop;

        document.onmousemove = function(e){ //需設爲document對象才能做用於整個文檔
            var e = e||window.event;
            oDiv.style.left = e.clientX - diffX + 'px';//style.left表示所選對象的邊框到瀏覽器左側距離
            oDiv.style.top = e.clientY -diffY + 'px';
        };
        document.onmouseup = function(){
            document.onmousemove = null;//清除鼠標釋放時的對象移動方法
            document.onmouseup = null;
        }
    }
</script>
</body> 
</html>

offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。

js獲取圖片原始大小尺寸

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("&lt;img/&gt;") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

js循環遍歷數組

<script>  
       //循環遍歷數組  
       var animals = ["cat",'dog','human','whale','seal'];  
       var animalString = "";  
       for(var i = 0;i<animals.length;i++){  
           animalString += animals[i] + " ";  
       }  
       alert(animalString);  //輸出數組裏的每一個項
</script>

遍歷二維數組

<script> 
        var arr=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]]; 
        for(var i=0;i<arr.length;i++){ 
         //遍歷每個具體的值 
         for(var j=0;j<arr[i].length;j++){ 
                    document.writeln(arr[i][j]+" "); 
              } 
            document.writeln("<br/>"); 
         } 
  </script>

阻止表單重複提交

有兩種方法能夠解決：一是提交以後，馬上禁用點擊按鈕；第二種就是提交以後取消後續的表單提交操做。

document.getElementById("btn").disabled = true;//第一次提交後，將按鈕禁用

這種方式只能用於經過提交按鈕防止重複提交，還可使用以下方式：

var flag = false;//設置一個監聽變量
if(flag ==true)return;//退出事件
flag = true;//表示提交過一次了

字符串部分

在字符串中查找子字符串

<script type="text/javascript">
    var test = 'Welcome to my blog!';
    var value = 'blog';
    var subValue = test.indexOf(value);
    console.log(subValue);//14,子字符串的索引
</script>

Number和Math部分

數字能夠是一個直接量，也能夠是一個對象，可是Math對象不一樣，他沒有構造函數，而且其全部的屬性和方法都是直接經過這個對象來訪問的

把十進制轉化爲一個十六進制值

var num = 255;
console.log(num.toString(16));//ff

js中，十進制數字以0x開頭，八進制數字老是以0開頭

隨進產生顏色

<script type="text/javascript">
    function randomVal(val){
        return Math.floor(Math.random()*(val + 1));
    }
    
    function randomColor(){
        return 'rgb(' + randomVal(255) + ',' + randomVal(255) + ',' + randomVal(255) + ')';
    }
</script>

目前，全部瀏覽器都支持RGB表示法和十六進制表示法，除了IE7，它只支持十六進制表示法

在角度和弧度之間轉換

var rad = degrees*(Math.PI/180);

var degrees = rad*(180/Math.PI);

數組部分

建立多維數組

<script type="text/javascript">
    var arrayLength = 3;//設置數組長度
    
    //建立數組
    var multiArray = new Array(arrayLength);
    for(var i =0;i<multiArray.length;i++){
        multiArray[i] = new Array(arrayLength);
    }
    
    //給第一個數組索引添加項
    multiArray[0][0] = 'phone';
    multiArray[0][1] = 'book';
    multiArray[0][2] = 'TV';
    
    //第二個
    multiArray[1][0] = 2;
    multiArray[1][1] = 1;
    multiArray[1][2] = 98;
    
    //第三個
    multiArray[2][0] = ['java','python'];
    multiArray[2][1] = ['js','C++'];
    multiArray[2][2] = ['Haskell','php'];
</script>

排序數組

<script type="text/javascript">
     var fruits = ['banana','apple','orange','strawberry'];
    console.log(fruits.sort());//Array [ "apple", "banana", "orange", "strawberry" ]

    var num = [32,43,2,5,-23,0,4];
    console.log(num.sort());//Array [ -23, 0, 2, 32, 4, 43, 5 ]
</script>

Array對象的sort方法會按照字母順序來排序數組元素。對於數字，是按照字符編碼的順序進行排序

function compare(a,b){
    return a-b;
}
var num = [32,43,2,5,-23,0,4];
console.log(num.sort(compare));//Array [ -23, 0, 2, 4, 5, 32, 43 ]

Date日期時間部分

js計算時間差

var date1=new Date();  //開始時間，當前時間

var date2=new Date(); //結束時間，需傳入時間參數
var date3=date2.getTime()-date1.getTime();  //時間差的毫秒數

//計算出相差天數
var days=Math.floor(date3/(24*3600*1000));

//計算出小時數
var leave1=date3%(24*3600*1000);    //計算天數後剩餘的毫秒數
var hours=Math.floor(leave1/(3600*1000));
//計算相差分鐘數
var leave2=leave1%(3600*1000);        //計算小時數後剩餘的毫秒數
var minutes=Math.floor(leave2/(60*1000));


//計算相差秒數
var leave3=leave2%(60*1000);      //計算分鐘數後剩餘的毫秒數
var seconds=Math.round(leave3/1000);
    
console.log(" 相差 "+days+"天 "+hours+"小時 "+minutes+" 分鐘"+seconds+" 秒");

正則部分

js實現千分位分隔

<script type="text/javascript">
    function cc(s){
        if(/[^0-9\.]/.test(s)) return "invalid value";
        s=s.replace(/^(\d*)$/,"$1.");
        s=(s+"00").replace(/(\d*\.\d\d)\d*/,"$1");
        s=s.replace(".",",");
        var re=/(\d)(\d{3},)/;
        while(re.test(s))
            s=s.replace(re,"$1,$2");
        s=s.replace(/,(\d\d)$/,".$1");
        return "￥" + s.replace(/^\./,"0.")
    }
</script>
<input onchange="this.value=cc(this.value)" />

js判斷傳入參數是否爲質數

function fn(input) {
  input = parseInt(input,10);
  return isPrime(input) ? 'is prime' : 'not prime';
}

function isPrime(input) {
  if (input < 2) {
    return false;
  } else {
    for (var i = 2; i <= Math.sqrt(input); i++) {
      if (input % i == 0) {
        return false;
      }
    }
  }
  return true;
}

js判斷字符串出現最多的字符，並統計次數

//js實現一個函數，來判斷一個字符串出現次數最多的字符，並統計這個次數

    function countStr(str){
        var obj = {};
        for(var i = 0, l = str.length,k; i < l ;i++){
            k = str.charAt(i);
            if(obj[k]){
                obj[k]++;
            }else{
                obj[k] = 1;
            }
        }
        var m = 0,i=null;
        for(var k in obj){
            if(obj[k] > m){
                m = obj[k];
                i = k;
            }
        }
        return i + ':' + m;
    }

本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993，非誠勿擾

1.爲初學前端而不知道怎麼作項目的你指導
2.指導並紮實你的JavaScript基礎
3.幫你準備面試並提供相關指導性意見
4.爲你的前端之路提供極具建設性的意見
5.讓你的學習更有效率，對知識點的理解更加透徹
6.不解答能夠百度到的答案，也不解答你遇到的bug

付費（每個月僅需99）能讓我更有耐心和責任心的爲你指導，讓雙方產生更良好的協做

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。