国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Web前端常用代碼筆記整理（02）

fireflow / 3041人閱讀

1.canvas圖片預(yù)加載及進(jìn)度條的實(shí)現(xiàn) 
/*star
 *loading模塊
 *實(shí)現(xiàn)圖片的預(yù)加載，并顯示進(jìn)度條
 *參數(shù)：圖片數(shù)組對象，加載完成的回調(diào)函數(shù)
 */
function loadImages(sources,callback){    
    var loadedImages = 0;    
    var numImages = 0;  
    ctx.font="14px bold";
    ctx.lineWidth=5;
    var clearWidth=canvas.width;
    var clearHeight=canvas.height;
    // get num of sources    
    for (var src in sources) {    
        numImages++;    
    }    
    for (var src in sources) {    
        images[src] = new Image();
        //當(dāng)一張圖片加載完成時(shí)執(zhí)行    
        images[src].onload = function(){ 
            //重繪一個(gè)進(jìn)度條
            ctx.clearRect(0,0,clearWidth,clearHeight);
            ctx.fillText("Loading:"+loadedImages+"/"+numImages,200,280);
            ctx.save();
            ctx.strokeStyle="#555";
            ctx.beginPath();
            ctx.moveTo(200,300);
            ctx.lineTo(600,300);
            ctx.stroke();
            ctx.beginPath();
            ctx.restore();
            ctx.moveTo(200,300);
            ctx.lineTo(loadedImages/numImages*400+200,300);  
            ctx.stroke();
            //當(dāng)所有圖片加載完成時(shí)，執(zhí)行回調(diào)函數(shù)callback
            if (++loadedImages >= numImages) {    
                callback();    
            }    
        };  
        //把sources中的圖片信息導(dǎo)入images數(shù)組  
        images[src].src = sources[src];    
    }    
}    
//定義預(yù)加載圖片數(shù)組對象，執(zhí)行l(wèi)oading模塊
window.onload = function(){    
    var sources = {    
        PaperBoy1: "images/run/PaperBoy1.png",    
        PaperBoy2: "images/run/PaperBoy2.png", 
        PaperBoy3: "images/run/PaperBoy3.png",    
        PaperBoy4: "images/run/PaperBoy4.png",  
        PaperBoy5: "images/run/PaperBoy5.png",    
        PaperBoy6: "images/run/PaperBoy6.png",  
        PaperBoy7: "images/run/PaperBoy7.png",    
        PaperBoy8: "images/run/PaperBoy8.png",  
        PaperBoy9: "images/run/PaperBoy9.png",    
        PaperBoy10: "images/run/PaperBoy10.png",  
        PaperBoy11: "images/run/PaperBoy11.png",    
        PaperBoy12: "images/run/PaperBoy12.png",   
        PaperBoy13: "images/run/PaperBoy13.png",    
        PaperBoy14: "images/run/PaperBoy14.png", 
        PaperBoy15: "images/run/PaperBoy15.png",    
        PaperBoy16: "images/run/PaperBoy16.png",  
        PaperBoy17: "images/run/PaperBoy17.png",    
        PaperBoy18: "images/run/PaperBoy18.png",  
        PaperBoy19: "images/run/PaperBoy19.png",    
        PaperBoy20: "images/run/PaperBoy20.png",  
        PaperBoy21: "images/run/PaperBoy21.png",    
        PaperBoy22: "images/run/PaperBoy22.png",  
        PaperBoy23: "images/run/PaperBoy23.png",    
        PaperBoy24: "images/run/PaperBoy24.png", 
        _Street:"images/_Street.png",
        AD:"images/AD.png",
        building:"images/building.png",
        cloud:"images/cloud.png"
    };    
    //執(zhí)行圖片預(yù)加載，加載完成后執(zhí)行main
    loadImages(sources,main);    
};   
/*end*/
2.JS實(shí)現(xiàn)跨瀏覽器添加事件與移除事件怎樣做才最優(yōu)？

一般的兼容做法，如下：

跨瀏覽器添加事件

//跨瀏覽器添加事件
    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 addEvent( obj, type, fn ) {
      if ( obj.attachEvent ) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function(){obj["e"+type+fn]( window.event );}
        obj.attachEvent( "on"+type, obj[type+fn] );
      } else
        obj.addEventListener( type, fn, false );
    }
    function removeEvent( obj, type, fn ) {
      if ( obj.detachEvent ) {
        obj.detachEvent( "on"+type, obj[type+fn] );
        obj[type+fn] = null;
      } else
        obj.removeEventListener( type, fn, false );
    }

參考地址
addEvent() recoding contest entry
addEvent() – Follow Up

3.Ajax用jsonp方式跨域發(fā)送請求小實(shí)例

眾所周知，Ajax是通過創(chuàng)建XMLHttpRequest對象或ActiveXObject來連接服務(wù)器、發(fā)送請求以及響應(yīng)數(shù)據(jù)，但它卻不能跨域。而在分布式系統(tǒng)中我們又需要跨域發(fā)送接受數(shù)據(jù)，于是jsonp出現(xiàn)了...

它是一種跨域請求方式，主要利用了script標(biāo)簽里的src屬性，該屬性可以跨域發(fā)送請求，然后服務(wù)器返回js代碼，網(wǎng)頁端便響應(yīng)其信息，然后我們可以對其傳過來的js代碼做處理提取其中的信息。

jsonp發(fā)送請求只需在src后面添加“？callback=函數(shù)名”就可以，例如“http://www.item.com/list?callback=myfunction",則只需在服務(wù)端接受參數(shù)myfunction并將函數(shù)名與想要返回的數(shù)據(jù)拼接就可以例如在java中響應(yīng)該請求，可以獲取參數(shù)callback的值myfunction，再拼接成myfunction+"("+data+")"格式返回就行，在前端寫同名函數(shù)接受data并處理就可以了。但在jquery中對jsonp進(jìn)行了封裝，返回函數(shù)就是success，數(shù)據(jù)也用success接受。

例如：

前端代碼：

//發(fā)送請求  
$.ajax({  
   //url:"http://localhost:8081/rest/itemcat/list?callback=getMessage",  
    url:"http://localhost:8081/rest/itemcat/message",      
    type:"get",  
    cache:false,  
    dataType:"jsonp",  
    jsonp:"callback", //這里定義了callback的參數(shù)名稱，以便服務(wù)獲取callback的函數(shù)名即getMessage  
    jsonpCallback:"getMessage", //這里定義了jsonp的回調(diào)函數(shù)  
    success:function(data){  
        alert("success:"+data);  
    },  
    error:function(){  
        alert("發(fā)生異常");  
    }  
});  

function getMessage(jsonp){  
    alert("message:"+jsonp);  
}

這樣發(fā)出的請求為：http://localhost:8081/rest/itemcat/message?callback=getMessage
jsonp:"callback",
jsonpCallback:"getMessage",
這兩個(gè)參數(shù)的值會(huì)自動(dòng)拼接在url后面，所以用jquery的$.ajax方法發(fā)出的url可以不用在后面添加callback=getMessag,返回函數(shù)則變?yōu)榱藄uccess而不是getMessage

4.使用高德地圖API創(chuàng)建地圖以及獲取當(dāng)前地址經(jīng)緯度

創(chuàng)建API地圖帶有點(diǎn)標(biāo)記

根據(jù)瀏覽器定位獲取當(dāng)前經(jīng)緯度

高德地圖根據(jù)瀏覽器定位獲取當(dāng)前經(jīng)緯度API案例地址：http://lbs.amap.com/api/javascript-api/example/location/browser-location
高德開放平臺(tái)：http://lbs.amap.com/api

5.JS創(chuàng)建canvas學(xué)習(xí)小例代碼

1.HTML5中的Canvas標(biāo)簽的創(chuàng)建

window.onload = function(){
     createCanvas();
}
function createCanvas(){
    var canvas_width= 200, canvas_height = 200;
    document.body.innerHTML = "";
}

2.HTML5Canvas標(biāo)簽繪制圖形

var canvas_width= 500, canvas_height = 500;
var mycanvas, context;
window.onload = function(){
    createCanvas();
    drawRect();
}
function createCanvas(){
   document.body.innerHTML = "";
   mycanvas = document.getElementById("mycanvas");
   context = mycanvas.getContext("2d");
}
 
function drawRect(){
    context.fillStyle ="#FF0000";
    //context.rotate(45);//旋轉(zhuǎn)45度
    //context.translate(200,200);//移動(dòng)
    //context.scale(2,0.5);//縮放
    context.fillRect(0,0,200,200);
 }

3.HTML5Canvas標(biāo)簽繪制圖片

var canvas_width= 500, canvas_height = 500;
var mycanvas, context;
window.onload = function(){
    createCanvas();
    drawImage();
}
function createCanvas(){
    document.body.innerHTML = "";
    mycanvas = document.getElementById("mycanvas");
    context = mycanvas.getContext("2d");
}
 
function drawImage(){
    var img = new Image();
    img.onload = function(){
        context.drawImage(img,0,0);
    }
     img.src = "1.png";
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50315.html

相關(guān)文章

  • Web前端常用代碼筆記整理（02）

    1.canvas圖片預(yù)加載及進(jìn)度條的實(shí)現(xiàn) /*star *loading模塊 *實(shí)現(xiàn)圖片的預(yù)加載，并顯示進(jìn)度條 *參數(shù)：圖片數(shù)組對象，加載完成的回調(diào)函數(shù) */ function loadImages(sources,callback){ var loadedImages = 0; var numImages = 0; ctx.font=14px ...

    null1145 評論0 收藏0

  • Web前端常用代碼筆記整理（02）

    1.canvas圖片預(yù)加載及進(jìn)度條的實(shí)現(xiàn) /*star *loading模塊 *實(shí)現(xiàn)圖片的預(yù)加載，并顯示進(jìn)度條 *參數(shù)：圖片數(shù)組對象，加載完成的回調(diào)函數(shù) */ function loadImages(sources,callback){ var loadedImages = 0; var numImages = 0; ctx.font=14px ...

    lykops 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    xiaokai 評論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來說雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    CHENGKANG 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<