js封装、简单实例源码记录

时间：2022-11-01 17:01:23

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: ;}

#ul1 {width: 1080px; margin: 100px auto ;}

li { width: 247px; list-style: none; float: left; margin-right: 10px; }

li div {border: 1px solid #; 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=;

    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=; 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 * (  / 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=;

        var s=aLi[index].offsetHeight;

        for(var i=; i<aLi.length; i++) {

            if(s>aLi[i].offsetHeight) {

                index=i;

                s=aLi[i].offsetHeight;

            }

        }

        return index;

    }

    //最小的高度obj的top值

    function getTop(obj) {

        var iTop = ;

        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像素操作

 <!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;

             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图片像素

             for(var i=0; i<arr.length; i++) {

                 //旧的像素数组，赋值给新的像素数组当中

                 newImg.data[4*arr[i]]=oImg.data[4*arr[i]];

                 newImg.data[4*arr[i]+1]=oImg.data[4*arr[i]+1];

                 newImg.data[4*arr[i]+2]=oImg.data[4*arr[i]+2];

                 newImg.data[4*arr[i]+3]=oImg.data[4*arr[i]+3];

             }

             //绘制像素图片到canvas中

             canvas.putImageData(newImg, (oc.width-w)/2, (oc.height-h)/2);

         };

     }

     //函数功能：iAll，iNow(原数组长度，新数组长度) 返回新的数组

     function randomArr(iAll, iNow){

         var arr=[];

         var newArr=[];

         for(var i=0; i<iAll; i++) {

            arr.push(i);

         }

         for(var i=0; i<iNow; i++) {

            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));

         }

         return newArr;

     }

 };

 </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');

    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、地理位置、定位（后续）

js封装、简单实例源码记录的更多相关文章

  1. 百度地图 api 功能封装类 &lpar;ZMap&period;js&rpar; 本地搜索&comma;范围查找实例 &lbrack;源码下载&rsqb;

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  2. 百度地图整合功能分享修正版&lbrack;ZMap&period;js&rsqb; 实例源码&excl;

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  3. &lbrack;百度地图&rsqb; 用于类似 DWZ UI 框架的 百度地图 功能封装类 &lbrack;MultiZMap&period;js&rsqb; 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  4. JAVA上百实例源码以及开源项目

    简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级.中级.高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情.执着,对IT的憧憬. ...

  5. JAVA上百实例源码网站

    JAVA源码包1JAVA源码包2JAVA源码包3JAVA源码包4 JAVA开源包1 JAVA开源包2 JAVA开源包3 JAVA开源包4 JAVA开源包5 JAVA开源包6 JAVA开源包7 JAVA ...

  6. 45个android实例源码

    分享45个android实例源码,很好很强大http://www.apkbus.com/android-20978-1-1.html andriod闹钟源代码http://www.apkbus.com ...

  7. 分享45个android实例源码，很好很强大

    分享45个android实例源码,很好很强大 http://www.apkbus.com/android-20978-1-1.html 分享45个android实例源码,很好很强大http://www ...

  8. diff&period;js 列表对比算法 源码分析

    diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...

  9. 分享45个android实例源码，很好很强大&period;收藏吧！！！

    andriod闹钟源代码 http://www.apkbus.com/android-20974-1-1.html android源码分享之指南针程序 http://www.apkbus.com/an ...

随机推荐

  1. C&num; 线程（二）：关于线程的相关概念

    From : http://kb.cnblogs.com/page/42528/ 什么是进程? 当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源. 而一个进程又 ...

  2. webStorm快捷键总结

    Ctrl+Shift+a:快速查找使用编辑器所有功能1.左侧栏目录显影:Ctrl+Shift+F122.文件模板配置:File>Settings>Editor>File and Co ...

  3. openresty nginx 安装过程记录

    转载请注明原始地址 http://www.cnblogs.com/dongxiao-yang/p/4877799.html 一 :系统版本 1 cat /etc/issue: CentOS relea ...

  4. uva 12096

    优先队列,主要是STL应用所以复制一下 #include <iostream> #include <cstdio> #include <cstdlib> #incl ...

  5. linux ll命令参数的详解

    用法:ls [选项]... [文件]... 列出 FILE 的信息(默认为当前目录). 如果不指定-cftuvSUX 或--sort 选项,则根据字母大小排序. 长选项必须使用的参数对于短选项时也是必 ...

  6. Vijos P1786 质因数分解【暴力】

    质因数分解 背景 NOIP2012普及组第一题 描述 已知正整数n是两个不同的质数的乘积试求出较大的那个质数. 格式 输入格式 输入只有一行包含一个正整数n. 输出格式 输出只有一行包含一个正整数p, ...

  7. dl在不同浏览器下显示不同

    dl在chrome浏览器和在火狐浏览器下的默认样式是不一样的,解决方法将dl换成ol或ul样式就正常了.

  8. Matlab绘图基础——绘制三维曲线

    %% 绘制三维曲线 %plot3函数,其中每一组x,y,z组成一组曲线的坐标参数,选项的定义和plot函数相同. %1.当x,y,z是同维向量时,则x,y,z 对应元素构成一条三维曲线. x0 = 0 ...

  9. Python量化交易

    资料整理: 1.python量化的一个github 代码 2.原理 + python基础 讲解 3.目前发现不错的两个量化交易 学习平台: 聚宽和优矿在量化交易都是在15年线上布局的,聚宽是15年的新 ...

  10. &equals;&gt&semi; js 中箭头函数使用总结

    箭头函数感性认识 箭头函数 是在es6 中添加的一种规范 x => x * x 相当于 function(x){return x*x} 箭头函数相当于 匿名函数, 简化了函数的定义. 语言的发展 ...

相关文章