碼上歡樂
相關內容    簡體    繁體

js封裝、簡單實例源碼記錄

本文轉載自   查看原文   2016-06-18 13:33   2135 

1、運動封裝：doMove ( obj, attr, dir, target, endFn )  加入回調、&&、||用法注釋

<script>
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    // doMove ( oDiv, 'width', 34, 600 );
    doMove ( oDiv, 'left', 12, 900, function () {
        doMove ( oDiv, 'top', 34, 500 );
    });

};

function doMove ( obj, attr, dir, target, endFn ) {
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;            // 步長
        
        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            
            /*
            if ( endFn ) {
                endFn();
            }
            */
            endFn && endFn();  //只有endFn條件為真就會執行endFn()
            //alert(getStyle(obj, 'left')||3);     //哪邊為true就返回哪邊  布爾、string、number、object、function
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script><script>
var oBtn1 = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn1.onclick = function () {
    
    // doMove ( oDiv, 'width', 34, 600 );
    doMove ( oDiv, 'left', 12, 900, function () {
        doMove ( oDiv, 'top', 34, 500 );
    });

};

function doMove ( obj, attr, dir, target, endFn ) {
    
    dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir;
    
    clearInterval( obj.timer );
    
    obj.timer = setInterval(function () {
        
        var speed = parseInt(getStyle( obj, attr )) + dir;            // 步長
        
        if ( speed > target && dir > 0 ||  speed < target && dir < 0  ) {
            speed = target;
        }
        
        obj.style[attr] = speed + 'px';
        
        if ( speed == target ) {
            clearInterval( obj.timer );
            
            /*
            if ( endFn ) {
                endFn();
            }
            */
            endFn && endFn();  //只有endFn條件為真就會執行endFn()
            //alert(getStyle(obj, 'left')||3);     //哪邊為true就返回哪邊  布爾、string、number、object、function
        }
        
    }, 30);
}

function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script>
通用動畫js

 2、ajax封裝

function ajax(method, url, data, success) {
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    if (method == 'get' && data) {
        url += '?' + encodeURI(data);
    }
    
    xhr.open(method,url,true);
    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        
        if ( xhr.readyState == 4 ) {
            if ( xhr.status == 200 ) {
                success && success(xhr.responseText);   //定義回調，並傳入參數，客戶端接收這個參數，並顯示出來
            } else {
                alert('出錯了,Err：' + xhr.status);
            }
        }
        
    }
}
ajax封裝

 //最好將監聽放在open、send方法前面調用。xhr.onreadystatechange=function(){...};

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<script src="ajax.js"></script>
<script>
window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    
    oBtn.onclick = function() {
        
        /*ajax({
            url    :    'getNews.php',
            success : function(data) {
                //...
            }
        });*/
        
        ajax('get','getNews.php','',function(data) {
            var data = JSON.parse( data );
                
            var oUl = document.getElementById('ul1');
            var html = '';
            for (var i=0; i<data.length; i++) {
                html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
            }
            oUl.innerHTML = html;
        });
        
        setInterval(function() {
            ajax('get','getNews.php','',function(data) {
                var data = JSON.parse( data );
                    
                var oUl = document.getElementById('ul1');
                var html = '';
                for (var i=0; i<data.length; i++) {
                    html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
                }
                oUl.innerHTML = html;
            });
        }, 1000);
        
    }
}
</script>
</head>

<body>
    <input type="button" value="按鈕" id="btn" />
    <ul id="ul1"></ul>
</body>
</html>
定時刷新

 3、定寬瀑布流

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script>
window.onload = function() {
    var oUL=document.getElementById('ul1');
    var aLi=oUL.getElementsByTagName('li');
    var iPage=1;
    var b = true;
    
    getList();
    
    function getList() {
        
        ajax('get', 'getPics.php', 'cPage='+iPage, function(data){
             
             var data=JSON.parse(data);
             
             if ( !data.length ) {
                //后續沒有數據了
                return ;
             }
            
             for(var i=0; i<data.length; i++) {
                   //獲取高度最短的li
                    var _index = getShort();
                    
                    //創建3個節點div/img/p
                    var oDiv = document.createElement('div');
                    var oImg = document.createElement('img');
                    var oP = document.createElement('p');
                    oImg.src = data[i].preview;
                    oImg.style.width = '225px';// 同比例縮放
                    oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';
                    oDiv.appendChild( oImg );                
                    oP.innerHTML = data[i].title;
                    oDiv.appendChild( oP );
                    //最后節點永遠放在高度最小的那列
                    aLi[_index].appendChild( oDiv );
             } 
             b=true;     
        });
    }
    
    
    window.onscroll = function() {
        var _index = getShort();
        var oLi = aLi[_index];
        
        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
            
        if(getTop( oLi ) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop) {
             if(b) {
                  b=false;
                  iPage++;
                  getList();    
             }
        }
        
    };
    
    function getShort(){
        var index=0;
        var s=aLi[index].offsetHeight;
        for(var i=0; i<aLi.length; i++) {
            if(s>aLi[i].offsetHeight) {
                index=i;
                s=aLi[i].offsetHeight;             
            }
        }
        return index;
    }
     
    //最小的高度obj的top值 
    function getTop(obj) {
        var iTop = 0;
        while(obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;    
    }
    
};
</script>
</head>

<body>
    <ul id="ul1">
        <li></li>
          <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
ajax定寬瀑布流

4、ajax留言（調用后台） 

另外跨域域名下加'Access-Control-Allow-Origin' 'http://www.a.com'; //這是允許訪問該資源的域（服務器設置響應頭信息，標准支持，ie不支持）

jsonp解決跨域

//ie支持此種跨域，標准不支持
  var oXDomainRequest = new XDomainRequest();
  oXDomainRequest.onload = function() {
   alert(this.responseText);
  }
  oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);
  oXDomainRequest.send();

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<style>
#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;} #div2 {width: 0; height: 30px; background: #CCC;} #div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn'); var oMyFile = document.getElementById('myFile'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); oBtn.onclick = function() { //alert(oMyFile.value); //獲取到的是file控件的value值，這個內容是顯示給你看的文字，不是我們選擇的文件 //oMyFile.files file控件中選擇的文件列表對象 //alert(oMyFile.files); //我們是要通過ajax把oMyFile.files[0]數據發送給后端 /*for (var attr in oMyFile.files[0]) { console.log( attr + ' : ' + oMyFile.files[0][attr] ); }*/ var xhr = new XMLHttpRequest(); // xhr.onload = function() { //alert(1); //var d = JSON.parse(this.responseText); //alert(d.msg + ' : ' + d.url);  alert('OK,上傳完成'); } //獲得ajax上傳對象upload。 var oUpload = xhr.upload; oUpload.onprogress = function(ev) { //console.log(ev.total + ' : ' + ev.loaded); //上傳比例,loaded 已經上傳大小， total總大小 var iScale = ev.loaded / ev.total; oDiv2.style.width = 300 * iScale + 'px'; oDiv3.innerHTML = Math.floor(iScale * 100) + '%'; } //上傳一般都用post上傳 xhr.open('post', 'post_file.php', true); //設置發送文件的請求頭 xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest;'); var oFormData = new FormData(); //通過FormData來構建提交數據 oFormData.append('file', oMyFile.files[0]); xhr.send(oFormData); } } </script> </head> <body> <input type="file" id="myFile" /><input type="button" id="btn" value="上傳" /> <div id="div1"> <div id="div2"></div> <div id="div3">0%</div> </div> <form action="pp_files.php" method="post" enctype="multipart/form-data"> <!--enctype:multipart/form-data 發送文件頭---> </form> </body> </html>
ajax上傳文件 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言本</title>
    <link rel="stylesheet" href="css.css" type="text/css" />
    <script src="ajax.js"></script>
    <script src="guestbook.js"></script>
</head>

<body>
    <div id="header"></div>

    <div id="container">

        <div id="list"> 
        <!--<dl>
                <dt>
                    <strong>zmouse</strong> 說 :
                </dt>
                <dd>內容</dd>
                <dd class="t">
                    <a href="javascript:;" id="support">頂(<span>0</span>)</a>
                     | 
                    <a href="javascript:;" id="oppose">踩(<span>0</span>)</a>
                </dd>
            </dl>-->
        </div>
        <div id="showMore">顯示更多...</div>

        <div id="sidebar">
        
            <div id="user" style="margin-bottom: 10px;">
                <h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
            </div>
        
            <!-- 注冊 -->
            <div id="reg">
                <h4>注冊</h4>
                <div>
                    <p>用戶名：<input type="text" name="username" id="username1"></p>
                    <p id="verifyUserNameMsg"></p>
                    <p>密碼：<input type="password" name="password" id="password1"></p>
                    <p><input type="button" value="注冊" id="btnReg" /></p>
                </div>
            </div>

            <!-- 登陸 -->
            <div id="login">
                <h4>登陸</h4>
                <div>
                    <p>用戶名：<input type="text" name="username2" id="username2"></p>
                    <p>密碼：<input type="password" name="password2" id="password2"></p>
                    <p><input type="button" value="登陸" id="btnLogin" /></p>
                </div>
            </div>
            
            <!-- 留言發表 -->
            <div id="sendBox">
                <h4>發表留言</h4>
                <div>
                    <textarea id="content"></textarea>
                    <input type="button" value="提交" class="btn1" id="btnPost" />
                </div>
            </div>
        </div>

    </div>
    
</body>
</html>
留言HTML 
window.onload = function() {
    
    var oUser = document.getElementById('user');
    var oReg = document.getElementById('reg');
    var oLogin = document.getElementById('login');
    var oUserInfo = document.getElementById('userinfo');
    var oList = document.getElementById('list');
    var iPage = 1;
    
    var oShowMore = document.getElementById('showMore');
    
    var oUsername1 = document.getElementById('username1');
    var oVerifyUserNameMsg = document.getElementById('verifyUserNameMsg');
    
    //初始化
    updateUserStatus();
    
    function updateUserStatus() {
        var uid = getCookie('uid');
        var username = getCookie('username');
        if (uid) {
            //如果是登陸狀態
            oUser.style.display = 'block';
            oUserInfo.innerHTML = username;
            oReg.style.display = 'none';
            oLogin.style.display = 'none';
        } else {
            oUser.style.display = 'none';
            oUserInfo.innerHTML = '';
            oReg.style.display = 'block';
            oLogin.style.display = 'block';
        }
    }
    
    showList();
    
    /*
    驗證用戶名
    get
        guestbook/index.php
            m : index
            a : verifyUserName
            username : 要驗證的用戶名
        返回
            {
                code : 返回的信息代碼 0 = 沒有錯誤，1 = 有錯誤
                message : 返回的信息 具體返回信息
            }
    */
    oUsername1.onblur = function() {
        ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function(data) {
            //alert(data);
            var d = JSON.parse(data);
            
            oVerifyUserNameMsg.innerHTML = d.message;
            
            if (d.code) {
                oVerifyUserNameMsg.style.color = 'red';
            } else {
                oVerifyUserNameMsg.style.color = 'green';
            }
        });
    }
    
    /*
    用戶注冊
    get/post
        guestbook/index.php
            m : index
            a : reg
            username : 要注冊的用戶名
            password : 注冊的密碼
        返回
            {
                code : 返回的信息代碼 0 = 沒有錯誤，1 = 有錯誤
                message : 返回的信息 具體返回信息
            }
    */
    var oPassword1 = document.getElementById('password1');
    var oRegBtn = document.getElementById('btnReg');
    oRegBtn.onclick = function() {
        
        ajax('post', 'guestbook/index.php', 'm=index&a=reg&username='+encodeURI(oUsername1.value)+'&password=' + oPassword1.value, function(data) {
            var d = JSON.parse(data);
            alert(d.message);
            
        });
        
    }
    
    /*
    用戶登陸
    get/post
        guestbook/index.php
            m : index
            a : login
            username : 要登陸的用戶名
            password : 登陸的密碼
        返回
            {
                code : 返回的信息代碼 0 = 沒有錯誤，1 = 有錯誤
                message : 返回的信息 具體返回信息
            }
    */
    var oUsername2 = document.getElementById('username2');
    var oPassword2 = document.getElementById('password2');
    var oLoginBtn = document.getElementById('btnLogin');
    oLoginBtn.onclick = function() {
        
        ajax('post', 'guestbook/index.php', 'm=index&a=login&username='+encodeURI(oUsername2.value)+'&password=' + oPassword2.value, function(data) {
            var d = JSON.parse(data);
            alert(d.message);
            
            if (!d.code) {
                updateUserStatus();
            }
            
        });
        
    }
    
    /*
    用戶退出
    get/post
        guestbook/index.php
            m : index
            a : logout
        返回
            {
                code : 返回的信息代碼 0 = 沒有錯誤，1 = 有錯誤
                message : 返回的信息 具體返回信息
            }
    */
    var oLogout = document.getElementById('logout');
    oLogout.onclick = function() {
        
        ajax('get', 'guestbook/index.php', 'm=index&a=logout', function(data) {
            
            var d = JSON.parse(data);
            alert(d.message);
            
            if (!d.code) {
                //退出成功
                updateUserStatus();
            }
            
        });
        
        return false;
        
    }
    
    /*
    留言
    post
        guestbook/index.php
            m : index
            a : send
            content : 留言內容
        返回
            {
                code : 返回的信息代碼 0 = 沒有錯誤，1 = 有錯誤
                data : 返回成功的留言的詳細信息
                    {
                        cid : 留言id    
                        content : 留言內容 
                        uid : 留言人的id
                        username : 留言人的名稱
                        dateline : 留言的時間戳(秒)
                        support : 當前這條留言的頂的數量
                        oppose : 當前這條留言的踩的數量
                    }
                message : 返回的信息 具體返回信息
            }
    */
    var oContent = document.getElementById('content');
    var oPostBtn = document.getElementById('btnPost');
    oPostBtn.onclick = function() {
        
        ajax('post', 'guestbook/index.php', 'm=index&a=send&content='+encodeURI(oContent.value), function(data) {
            
            var d = JSON.parse(data);
            //alert(d.message);
            
            if (!d.code) {
                //添加當前留言到列表中
                createList(d.data, true);
            }
            
        });
        
    }
    
    //從后台返回的json的data
    function createList(data, insert) {
        var oDl = document.createElement('dl');
                
        var oDt = document.createElement('dt');
        var oStrong = document.createElement('strong');
        oStrong.innerHTML = data.username;
        oDt.appendChild(oStrong);
        
        var oDd1 = document.createElement('dd');
        oDd1.innerHTML = data.content;
        
        var oDd2 = document.createElement('dd');
        oDd2.className = 't';
        var oA1 = document.createElement('a');
        oA1.href = '';
        oA1.innerHTML = '頂(<span>'+data.support+'</span>)';
        var oA2 = document.createElement('a');
        oA2.href = '';
        oA2.innerHTML = '踩(<span>'+data.oppose+'</span>)';
        oDd2.appendChild(oA1);
        oDd2.appendChild(oA2);
        
        oDl.appendChild(oDt);
        oDl.appendChild(oDd1);
        oDl.appendChild(oDd2);
        
        
        //oList存在留言就在oList前面插入留言insertBefore,否則直接插入留言appendChild
        if (insert && oList.children[0]) {
            oList.insertBefore(oDl, oList.children[0]);
        } else {
            oList.appendChild(oDl);
        }
    }
    
    //點擊顯示更多的內容
    oShowMore.onclick = function() {
        iPage++;
        showList();
    }
    
    function showList() {
        /*
        初始化留言列表
        get
            guestbook/index.php
                m : index
                a : getList
                page : 獲取的留言的頁碼，默認為1
                n : 每頁顯示的條數，默認為10
            返回
                {
                    code : 返回的信息代碼 0 = 沒有錯誤，1 = 有錯誤
                    data : 返回成功的留言的詳細信息
                        {
                            cid : 留言id    
                            content : 留言內容 
                            uid : 留言人的id
                            username : 留言人的名稱
                            dateline : 留言的時間戳(秒)
                            support : 當前這條留言的頂的數量
                            oppose : 當前這條留言的踩的數量
                        }
                    message : 返回的信息 具體返回信息
                }
        */
        ajax('get', 'guestbook/index.php', 'm=index&a=getList&n=2&page=' + iPage, function(data) {
            
            var d = JSON.parse(data);
            
            var data = d.data;
            
            if (data) {
                for (var i=0; i<data.list.length; i++) {
                    createList(data.list[i]);
                }
            } else {
                if (iPage == 1) {
                    oList.innerHTML = '現在還沒有留言，快來搶沙發...';
                }
                oShowMore.style.display = 'none';
            }
            
        });
    }
};

function getCookie(key) {
    var arr1 = document.cookie.split('; ');
    for (var i=0; i<arr1.length; i++) {
        var arr2 = arr1[i].split('=');
        if (arr2[0]==key) {
            return arr2[1];
        }
    }
}
留言ajax

5、canvas旋轉並縮放

window.onload=function(){
   var can=document.getElementById('canvas');
   var canvas=can.getContext('2d');
   var num=0;
   var num2=0;
   var value=1;
   canvas.translate(100,100);
   
   setInterval(function(){         
         num++;
         canvas.save();         
         canvas.clearRect(0,0,can.width,can.height);
         if(num2==100) vlaue=-1;
         else if(num2==0) value=1;
         num2+=value;
         canvas.translate(-50,-50);
         canvas.rotate(num*Math.PI/180); 
         canvas.scale(num2*1/50,num2*1/50);
         canvas.fillRect(0,0,100,100,false);
         canvas.restore();
         canvas.stroke();
   }, 30);
   
};
旋轉縮放 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function(){
   var aInput=document.getElementsByTagName('input');
   var oImg=document.getElementById('img1');
   
   var yImg=new Image();
   
   yImg.onload=function() {
        draw(oImg);
   };
   
   yImg.src=oImg.src;
   
   function draw(obj){
       var oC=document.createElement('canvas');
       var canvas=oC.getContext('2d');
       var iNow=1;
       oC.width=obj.width;
       oC.height=obj.height;
       obj.parentNode.replaceChild(oC,obj);
       canvas.drawImage(obj,0,0);
       
       aInput[1].onclick=function(){
           
           if(iNow==3) iNow=0; else iNow++;
           
           toChange();
       };
       aInput[0].onclick=function(){
           if(iNow==0) iNow=3; else iNow--;
           toChange();
       };
       function toChange(){
           switch(iNow){
               case 1:
                   oC.width=obj.height;
                   oC.height=obj.width;
                   canvas.rotate(90*Math.PI/180);
                   canvas.drawImage(obj,0,-obj.height);
               break;
               
               case 2:
                   oC.width=obj.width;
                   oC.height=obj.height;
                   canvas.rotate(180*Math.PI/180);
                   canvas.drawImage(obj,-obj.width,-obj.height);
               break;    
               case 3:
                   oC.width=obj.height;
                   oC.height=obj.width;
                   canvas.rotate(270*Math.PI/180);
                   canvas.drawImage(obj,-obj.width,0);
               break;
               case 0:
                   oC.width=obj.width;
                   oC.height=obj.height;
                   canvas.rotate(0*Math.PI/180);
                   canvas.drawImage(obj,0,0);
               break;
           }
       }
   }
};
</script>
</head>

<body>
<input type="button" value="左"/>
<input type="button" value="右"/>
<div><img src="iBannerText.png" id="img1" /></div>
</body>
</html>
旋轉 
window.onload=function(){
    var oc=document.getElementById('canvas');
    var canvas=oc.getContext('2d');
    canvas.fillRect(0,0,100,100);
    var oImg=canvas.getImageData(0,0,100,100);  //返回圖像像素
    
    for(var i=0; i<oImg.width*oImg.height; i++) {
        oImg.data[4*i]=255;   //data數組中的每個像素都rgba四個構成， length=4*w*h
        oImg.data[4*i+1]=0;
        oImg.data[4*i+2]=0;
        oImg.data[4*i+3]=50;
    }
    
    canvas.putImageData(oImg, 100,100); //繪制圖像像素至canvas中
};
canva像素操作 
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>無標題文檔</title>
 6 <script>
 7 window.onload=function(){
 8     var oc=document.getElementById('canvas');
 9     var canvas=oc.getContext('2d');
10     
11     var aLi=document.getElementsByTagName('li');
12     for(var i=0; i<aLi.length; i++){
13         aLi[i].onclick=function() {
14             var str=this.innerHTML;
15             var h=180;
16             canvas.clearRect(0, 0, oc.width, oc.height);
17             canvas.font=h+'px impact';
18             canvas.textBaseline='top';
19             canvas.fillStyle='red';
20             var w=canvas.measureText(str).width;
21             canvas.fillText(str, (oc.width-w)/2, (oc.height-h)/2);
22             var oImg=canvas.getImageData((oc.width-w)/2, (oc.height-h)/2, w,h);
23             canvas.clearRect(0,0,oc.width,oc.height);
24             var arr=randomArr(w*h,w*h/10);
25             var newImg=canvas.createImageData(w,h);  //創建一個新的img圖片像素
26             for(var i=0; i<arr.length; i++) {
27                 //舊的像素數組，賦值給新的像素數組當中
28                 newImg.data[4*arr[i]]=oImg.data[4*arr[i]];
29                 newImg.data[4*arr[i]+1]=oImg.data[4*arr[i]+1];
30                 newImg.data[4*arr[i]+2]=oImg.data[4*arr[i]+2];
31                 newImg.data[4*arr[i]+3]=oImg.data[4*arr[i]+3];
32             }
33             
34             //繪制像素圖片到canvas中
35             canvas.putImageData(newImg, (oc.width-w)/2, (oc.height-h)/2);
36         
37         };
38     }
39     
40     //函數功能：iAll，iNow(原數組長度，新數組長度) 返回新的數組
41     function randomArr(iAll, iNow){
42         var arr=[];
43         var newArr=[];
44         for(var i=0; i<iAll; i++) {
45            arr.push(i);
46         }
47         for(var i=0; i<iNow; i++) {
48            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
49         }
50         return newArr;
51     }
52     
53 };
54 </script>
55 </head>
56 
57 <body>
58     
59 <canvas id="canvas" width=500 height=500></canvas>
60 <ul style="float:left">
61 <li>我</li>
62 <li>愛</li>
63 <li>你</li>
64 <li>嗎</li>
65 </ul>
66 </body>
67 </html>
圖片像素生產10%的圖片文字 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function(){
    var oc=document.getElementById('canvas');
    var canvas=oc.getContext('2d');
    
    var aLi=document.getElementsByTagName('li');
    for(var i=0; i<aLi.length; i++){
        aLi[i].onclick=function() {
            var str=this.innerHTML;
            var h=180;
            var timer=null;
            var iNow=0; 
            clearInterval(timer);
            canvas.clearRect(0, 0, oc.width, oc.height);
            canvas.font=h+'px impact';
            canvas.textBaseline='top';
            canvas.fillStyle='red';
            var w=canvas.measureText(str).width;
            canvas.fillText(str, (oc.width-w)/2, (oc.height-h)/2);
            var oImg=canvas.getImageData((oc.width-w)/2, (oc.height-h)/2, w,h);
            canvas.clearRect(0,0,oc.width,oc.height);
            var arr=randomArr(w*h,w*h/10);
            var newImg=canvas.createImageData(w,h);  //創建一個新的img圖片像素
            timer=setInterval(function(){
                for(var i=0; i<arr[iNow].length; i++) {
                    //舊的像素數組，賦值給新的像素數組當中
                    newImg.data[4*arr[iNow][i]]=oImg.data[4*arr[iNow][i]];
                    newImg.data[4*arr[iNow][i]+1]=oImg.data[4*arr[iNow][i]+1];
                    newImg.data[4*arr[iNow][i]+2]=oImg.data[4*arr[iNow][i]+2];
                    newImg.data[4*arr[iNow][i]+3]=oImg.data[4*arr[iNow][i]+3];
                   }
                    //繪制像素圖片到canvas中
                canvas.putImageData(newImg, (oc.width-w)/2, (oc.height-h)/2);       
                if(iNow==9)  {
                    iNow=0;
                    clearInterval(timer);
                }
                else iNow++;            
            }, 200);
                        
        };
    }
    
    //函數功能：iAll，iNow(原數組長度，新數組長度) 返回復合的數組，allArr存的就是10個元素，每個元素也是一位數組，leng=w*h;
    function randomArr(iAll, iNow){
        var arr=[];
        var allArr=[];
        for(var i=0; i<iAll; i++) {
           arr.push(i);
        }
        
        for(var j=0; j<iAll/iNow; j++) {
            var newArr=[];
            for(var i=0; i<iNow; i++) {
               newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));
            }
            allArr.push(newArr);
        }
        
        return allArr;
    }
    
};
</script>
</head>

<body>
    
<canvas id="canvas" width=500 height=500></canvas>
<ul style="float:left">
<li>我</li>
<li>愛</li>
<li>你</li>
<li>嗎</li>
</ul>
</body>
</html>
動態生產每次10%文字像素 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function(){
    var oc=document.getElementById('canvas');
    var canvas=oc.getContext('2d');
    canvas.fillRect(0,0,100,100);
    var oImg=canvas.getImageData(0,0,100,100);
    alert(getXY(oImg, 3, 5));
    for(var i=0; i<oImg.width; i++){
        setXY(oImg, i, 5, [255,0,0,255]);
        canvas.putImageData(oImg,100,100);
    }
    function getXY(obj, x, y){
        var arr=[];
        var w=obj.width;
        var h=obj.height;
        var d=obj.data;
        
        arr[0]=d[4*(y*w+x)];
        arr[1]=d[4*(y*w+x)+1];
        arr[2]=d[4*(y*w+x)+2];
        arr[3]=d[4*(y*w+x)+3];
        return arr;
    }
    
    function setXY(obj, x, y,color){
        var arr=[];
        var w=obj.width;
        var h=obj.height;
        var d=obj.data;
        
        d[4*(y*w+x)]=color[0];
        d[4*(y*w+x)+1]=color[1];
        d[4*(y*w+x)+2]=color[2];
        d[4*(y*w+x)+3]=color[3];
    }
}
</script>
</head>

<body>
     
<canvas id="canvas" width=500 height=500></canvas>
</body>
</html>
封裝通過xy坐標生成像素圖片 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function(){ var oc=document.getElementById('canvas'); var canvas=oc.getContext('2d'); var yImg=new Image(); yImg.onload=function() { draw(this); }; yImg.src='2.png'; function getXY(obj, x, y){ var arr=[]; var w=obj.width; var h=obj.height; var d=obj.data; arr[0]=d[4*(y*w+x)]; arr[1]=d[4*(y*w+x)+1]; arr[2]=d[4*(y*w+x)+2]; arr[3]=d[4*(y*w+x)+3]; return arr; } function setXY(obj, x, y,color){ var arr=[]; var w=obj.width; var h=obj.height; var d=obj.data; d[4*(y*w+x)]=color[0]; d[4*(y*w+x)+1]=color[1]; d[4*(y*w+x)+2]=color[2]; d[4*(y*w+x)+3]=color[3]; } function draw(obj) { oc.width=obj.width; //oc.height=2*obj.height; canvas.drawImage(obj,0,0,obj.width, obj.height); var oImg=canvas.getImageData(0,0,obj.width, obj.height); var w=oImg.width; var h=oImg.height; var newImg=canvas.createImageData(w,h); //先循環列 for(var i=0; i<h; i++) { //循環行 for(var j=0; j<w; j++) { var result=[]; var color=getXY(oImg, j, i); result[0]=255-color[0]; result[1]=255-color[1]; result[2]=255-color[2]; result[3]=255*i/h; setXY(newImg, j,h-i, result); } } canvas.putImageData(newImg, 0, obj.height); } }; </script> </head> <body> <canvas id="canvas"></canvas> </body> </html>
canvas實現圖片反色、漸變、倒影 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload=function(){ var oc=document.getElementById('canvas'); var canvas=oc.getContext('2d'); var yImg=new Image(); yImg.onload=function() { draw(this); }; yImg.src='2.png'; function getXY(obj, x, y){ var arr=[]; var w=obj.width; var h=obj.height; var d=obj.data; arr[0]=d[4*(y*w+x)]; arr[1]=d[4*(y*w+x)+1]; arr[2]=d[4*(y*w+x)+2]; arr[3]=d[4*(y*w+x)+3]; return arr; } function setXY(obj, x, y,color){ var arr=[]; var w=obj.width; var h=obj.height; var d=obj.data; d[4*(y*w+x)]=color[0]; d[4*(y*w+x)+1]=color[1]; d[4*(y*w+x)+2]=color[2]; d[4*(y*w+x)+3]=color[3]; } function draw(obj) { //num分塊圖片 w/num, h/num var num=10; oc.width=obj.width; //oc.height=2*obj.height; canvas.drawImage(obj,0,0,obj.width, obj.height); var oImg=canvas.getImageData(0,0,obj.width, obj.height); var w=oImg.width; var h=oImg.height; var newImg=canvas.createImageData(w,h); //具體分塊 var stepW=w/num; var stepH=h/num; for(var i=0; i<stepH; i++) { for(var j=0; j<stepW; j++) { //提取顏色 var color=getXY(oImg, j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num)); //根據num塊循環，塊是個二維數組（如如很多方格） for(var k=0; k<num; k++) { for(var l=0; l<num; l++) { setXY(newImg, j*num+l, i*num+k, color); } } } } canvas.putImageData(newImg,0, obj.height); } }; </script> </head> <body> <canvas id="canvas"></canvas> </body> </html>
canvas實現圖片馬賽克

6、html5實現的播放器

屬性：
controls  :   顯示或隱藏用戶控制界面
autoplay  :  媒體是否自動播放
loop  : 媒體是否循環播放
currentTime  :  開始到播放現在所用的時間
duration  :  媒體總時間(只讀)
volume  :   0.0-1.0的音量相對值
muted  :   是否靜音
autobuffer  :   開始的時候是否緩沖加載，autoplay的時候，忽略此屬性
paused  :   媒體是否暫停(只讀)
ended   :   媒體是否播放完畢(只讀)
error   :  媒體發生錯誤的時候，返回錯誤代碼 (只讀)
currentSrc  :   以字符串的形式返回媒體地址(只讀)
poster  :   視頻播放前的預覽圖片
width、height  :   設置視頻的尺寸
videoWidth、 videoHeight  :   視頻的實際尺寸(只讀)

方法：
play()  :  媒體播放
pause()  :  媒體暫停
load()  :  重新加載媒體
事件：
loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange
HTML5 viedo屬性方法事件 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{ margin:0; padding:0;}
#div1{ width:300px; height:30px; background:#666; overflow:hidden; position:relative;} #div2{ width:60px; height:30px; background:red; position:absolute; left:0; top:0;} #div3{ width:300px; height:10px; background:#666; overflow:hidden; position:relative; top:10px;} #div4{ width:60px; height:10px; background:yellow; position:absolute; left:240px; top:0;} </style> <script> window.onload = function(){ var oV = document.getElementById('v1'); var aInput = document.getElementsByTagName('input'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); var oDiv4 = document.getElementById('div4'); var disX = 0; var disX2 = 0; var timer = null; aInput[0].onclick = function(){ if( oV.paused ){ oV.play(); this.value = '暫停'; nowTime(); timer = setInterval(nowTime,1000); } else{ oV.pause(); this.value = '播放'; clearInterval(timer); } }; aInput[2].value = changeTime(oV.duration); aInput[3].onclick = function(){ if( oV.muted ){ oV.volume = 1; this.value = '靜音'; oV.muted = false; } else{ oV.volume = 0; this.value = '取消靜音'; oV.muted = true; } }; aInput[4].onclick = function(){ oV.mozRequestFullScreen(); }; function nowTime(){ aInput[1].value = changeTime(oV.currentTime); var scale = oV.currentTime/oV.duration;  oDiv2.style.left = scale * 240 + 'px'; } function changeTime(iNum){ iNum = parseInt( iNum ); var iH = toZero(Math.floor(iNum/3600)); var iM = toZero(Math.floor(iNum%3600/60)); var iS = toZero(Math.floor(iNum%60)); return iH + ':' +iM + ':' + iS; } function toZero(num){ if(num<=9){ return '0' + num; } else{ return '' + num; } } oDiv2.onmousedown = function(ev){ var ev = ev || window.event; disX = ev.clientX - oDiv2.offsetLeft; document.onmousemove = function(ev){ var ev = ev || window.event; var L = ev.clientX - disX; if(L<0){ L = 0; } else if(L>oDiv1.offsetWidth - oDiv2.offsetWidth){ L = oDiv1.offsetWidth - oDiv2.offsetWidth; } oDiv2.style.left = L + 'px'; var scale = L/(oDiv1.offsetWidth - oDiv2.offsetWidth);  oV.currentTime = scale * oV.duration; nowTime(); }; document.onmouseup = function(){ document.onmousemove = null; }; return false; }; oDiv4.onmousedown = function(ev){ var ev = ev || window.event; disX2 = ev.clientX - oDiv4.offsetLeft; document.onmousemove = function(ev){ var ev = ev || window.event; var L = ev.clientX - disX2; if(L<0){ L = 0; } else if(L>oDiv3.offsetWidth - oDiv4.offsetWidth){ L = oDiv3.offsetWidth - oDiv4.offsetWidth; } oDiv4.style.left = L + 'px'; var scale = L/(oDiv3.offsetWidth - oDiv4.offsetWidth); oV.volume = scale; }; document.onmouseup = function(){ document.onmousemove = null; }; return false; }; }; </script> </head> <body> <video id="v1"> <source src="Intermission-Walk-in.ogv"></source> <source src="Intermission-Walk-in_512kb.mp4"></source> </video><br /> <input type="button" value="播放" /> <input type="button" value="00:00:00" /> <input type="button" value="00:00:00" /> <input type="button" value="靜音" /> <input type="button" value="全屏" /> <div id="div1"> <div id="div2"></div> </div> <div id="div3"> <div id="div4"></div> </div> </body> </html>
HTML5播放器

7、地理位置、定位（后續）


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 前端小白之每天學習記錄----js簡單的組件封裝 如何簡單的封裝一個js庫 百度地圖 api 功能封裝類 (ZMap.js) 本地搜索,范圍查找實例 [源碼下載] 1.NetDh框架之數據庫操作層--Dapper簡單封裝，可支持多庫實例、多種數據庫類型等(附源碼和示例代碼) 最簡單的原生js和jquery插件封裝 用原生js簡單封裝 css樣式 簡單封裝分頁功能pageView.js JS封裝簡單后代選擇器 [百度地圖] 用於類似 DWZ UI 框架的 百度地圖 功能封裝類 [MultiZMap.js] 實例源碼 js簡單封裝：簡單把數據直接輸出到表格之中
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM