js案例

1、开关灯效果：

var oBody = document.getElementById("bodyEle");

oBody.onclick= function () {

        var bg=this.style.backgroundColor;

        switch(bg){

            case "white":

                this.style.backgroundColor="blue";

                break;

            case "blue":

                this.style.backgroundColor="red";

                break;

            case "red":

                this.style.backgroundColor="yellow";

                break;

            case "yellow":

                this.style.backgroundColor="green";

                break;

            default:

                this.style.backgroundColor="white";

        }

    }

 

2、隔行变色

var oList = document.getElementById("list");

    var oLis = oList.getElementsByTagName("li");

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

        var oLi = oLis[i];

        i % 2 === 0 ? (oLi.className = "c1", oLi.zhuFeng = "c1") : (oLi.className = "c2", oLi.zhuFeng = "c2");

        oLi.onmouseover = function () {

            this.className = "c3";

        }

        oLi.onmouseout = function () {

            var oldVal = this.zhuFeng;

            this.className = oldVal;

        }

}

3、冒泡排序

function sortAry(ary, type) {

        for (var i = 0; i < ary.length - 1; i++) {

            for (var j = 0; j < ary.length - 1 - i; j++) {

                if (ary[j] > ary[j + 1]) {

                    var temp = ary[j];

                    ary[j] = ary[j + 1];

                    ary[j + 1] = temp;

                }

            }

        }

        type === 1 ? ary.reverse() : void 0;

    }

    var ary = [12, 34, 23, 45, 23, 12, 23, 24, 35, 1, 26, 37, 45, 62, 0];

    sortAry(ary, 1);

    console.log(ary);

4、任意数求和加排序

function sortAry(ary, type) {

        var temp = null;

        for (var i = 0; i < ary.length - 1; i++) {

            for (var j = 0; j < ary.length - 1 - i; j++) {

                if (ary[j] > ary[j + 1]) {

                    temp = ary[j];

                    ary[j] = ary[j + 1];

                    ary[j + 1] = temp;

                }

            }

        }

        type === 1 ? ary.reverse() : void 0;

        return ary;

    }

    var ary = [12, 3, 2, 1, 4, 2, 3, 1, 5, 6, 2, 1, 2, 5, 4];

    var newAry = sortAry(ary, 1);

    console.log(newAry);

    function sum() {

        var total = 0;

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

            var val = Number(arguments[i]);

            if (isNaN(val)) {

                continue;

            }

            total += val;

        }

        return total;

    }

    var total=sum(1,2,3,4,5,6,7,8,9,0);

    console.log(total);

5、DOM属性案例

function getMyChildren(ele, tagName) {

        var ary = [], nodes = ele.childNodes;

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

        var cur = nodes[i];

        if (cur.nodeType === 1) {

                if (tagName) {

                 if(cur.nodeName.toLowerCase()===tagName.toLowerCase())

{ ary.push(cur);

               } } else {

ary.push(cur);

                }

            }

        }

        return ary;

    }

    var oDiv = document.getElementById("div1");

    console.log(getMyChildren(oDiv,"ul"));

6、Math案例

function getRandom(n, m) {

        n = Number(n);

        m = Number(m);

        if (isNaN(n) || isNaN(m)) {

            return Math.random();

        }

        if (n > m) {

            var temp = n;

            n = m;

            m = temp;

        }

        return Math.round(Math.random() * (m - n) + n);

    }

  获取4位0-61之间的随机整数 ?获取4位不重复的如何处理

    var ary = [];

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

        ary.push(getRandom(0, 61));

    }

    console.log(ary);

7、String案例

var time = "2015-5-24 12:55:3";

function zero(value) {

        return value < 10 ? "0" + value : value;

    }

    function formatTime(timeStr) {

        var ary = timeStr.split(" ");

        var str1 = ary[0];

        var str2 = ary[1];

        var ary1 = str1.split("-");

        var ary2 = str2.split(":");

        return ary1[0] + "年" + zero(ary1[1]) + "月" + zero(ary1[2]) + "日 " + zero(ary2[0]) + "时" + zero(ary2[1]) + "分" + zero(ary2[2]) + "秒";

    }

    var res = formatTime(time);

    console.log(time);

    console.log(res);

8、验证码

varcodeStr="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

    var oDiv = document.getElementById("code");

    function getRandom(n, m) {

        n = Number(n);

        m = Number(m);

        if (isNaN(n) || isNaN(m)) {

            return Math.random();

        }

        if (n > m) {

            var temp = n;

            n = m;

            m = temp;

        }

        return Math.round(Math.random() * (m - n) + n);

    }

    function getCode() {

        var str = "";

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

            var ran = getRandom(0, 61);

            str += codeStr.charAt(ran);

        }

        oDiv.innerHTML = str;

    }

    getCode();

    oDiv.onclick = getCode;

9、Date获取当前时间

var oDiv = document.getElementById("div1");

    var timeStr = formatTime();

    oDiv.innerHTML += timeStr;

    var timer = setInterval(function () {

        var timeStr = formatTime();

        oDiv.innerHTML = "北京时间：" + timeStr;

    }, 1000);

 

    function formatTime() {

        var time = new Date();

        var year = time.getFullYear();

        var month = time.getMonth() + 1;//0-11代表我们的1-12月

        var day = time.getDate();

        var w = time.getDay();//0-6代表周日-周六

        var wStr = "日一二三四五六", week = wStr.charAt(w);

        var hours = time.getHours();

        var minutes = time.getMinutes();

        var seconds = time.getSeconds();

        var mlSeconds = time.getMilliseconds();//毫秒

        return year + "年" + zero(month) + "月" + zero(day) + "日 星期" + week + " " + zero(hours) + "时" + zero(minutes) + "分" + zero(seconds) + "秒";

    }

    function zero(value) {

        return value < 10 ? "0" + value : value;

    }

10、倒计时

把时间格式的字符变成我们的标准时间格式

var tar=new Date("2015-05-24 17:59:59");

对字符串的格式有要求

中间用"-"在IE6~8下不兼容，需要改成"/"

getTime:获取距离1970年1月1日午夜(00:00)之间的毫秒差

    var oDiv = document.getElementById("div1");

    var str = getSpanTime();

    oDiv.innerHTML = "距离下课：" + str;

    var timer=window.setInterval(function(){

        var str = getSpanTime();

        oDiv.innerHTML = "距离下课：" + str;

    },1000);

    function getSpanTime() {

        var tarTime = new Date("2015/05/24 17:59:59");

        var nowTime = new Date();

        var tarSpan = tarTime.getTime();

        var nowSpan = nowTime.getTime();

        var diffTime = tarSpan - nowSpan;//当前时间距离目标时间的毫秒差

        //接下来我们用毫秒差算出包含都少个小时、分钟、秒就好了

        1、算出总毫秒差中包含的小时有几个

        var hour = Math.floor(diffTime / (1000 * 60 * 60));

        2、算出当前这几个小时占了多少毫秒

        var hourMs = hour * 60 * 60 * 1000;

        3、接下来算分钟的时候，需要把小时占用的减去

        var spanMs = diffTime - hourMs;

        4、开始算spanMs中包含多少分钟

        var minute = Math.floor(spanMs / (1000 * 60));

        5、算这么多分钟占用多少毫秒

        var minuteMs = minute * 60 * 1000;

        6、算秒的时候把分钟占用的也减去

        spanMs = spanMs - minuteMs;

        7、算剩下的包含多少秒

        var second = Math.floor(spanMs / 1000);

        return zero(hour) + ":" + zero(minute) + ":" + zero(second);

    }

    function zero(value) {

        return value < 10 ? "0" + value : value;

    }

11、定时器简单动画

var oBox = document.getElementById("box");

    var cw = document.documentElement.clientWidth || document.body.clientWidth;

    var tarLeft = cw - 100;//到屏幕最右边的目标left值

 

    var timer = null, startLeft = 0;

    function move() {

        window.clearTimeout(timer);

        timer = null;

        startLeft += 10;

        if (startLeft >= tarLeft) {

            oBox.style.left = tarLeft + "px";

            return;

        }

        oBox.style.left = startLeft + "px";

        timer = window.setTimeout(move, 20);

    }

    oBox.onclick = function () {

        if (timer) {

            window.clearTimeout(timer);

            timer = null;

        } else {

            move();

        }

    }

12、正则案例

1）判断是否为有效数字的正则

var reg = /^[+-]?(?:\d|([1-9]\d+))(?:\.\d+)?$/;

2）正整数

var reg=/^[+]?(\d|([1-9]\d+))$/;

3）负整数

var reg=/^-(\d|([1-9]\d+))$/;

4）整数

var reg=/^[+-]?(\d|([1-9]\d+))$/;

5）小数

var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)$/;

6）身份证

var reg = /^(\d{3})(\d{3})(\d{4})(\d{2})(\d{2})(?:\d{2})(\d)(?:\d|X)$/;

7）在18-65之间的年龄

var reg=/^(?:1[8-9])|(?:[2-5]\d)|(?:6[0-5])$/;

8）中国标准真实姓名:2-4位汉字

var reg=/^[\u4e00-\u9fa5]{2,4}$/;

9）昵称:只能包含数字、字母、下划线、-，3位及以上

var reg=/^[0-9a-zA-Z_-]{3,}$/;

10）手机号

var reg=/^1\d{10}$/;

11）邮箱

var reg = /^(?:[0-9a-zA-Z._-]+)@(?:[0-9a-zA-Z]+)(?:\.[a-zA-Z]+){1,2}$/;

12）密码：数字、字母、_ 6-16

var reg=/^\w{6,16}$/;

13、表格排序

Tab.js:

var oTab = document.getElementById("tab");

var tBody = oTab.tBodies[0];//在table表格中提供获取tBody的方法，是一个HTMLCollection集合,我们只要第一个tBody就好了

var oRows = tBody.rows;

var oScore = document.getElementById("score");

var oAge = document.getElementById("age");

实现的是隔行变色

function changeColor(oRows) {

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

        var oRow = oRows[i];

        i % 2 !== 0 ? oRow.className = "c" : oRow.className = "";

        oRow.oldClass = oRow.className;

        oRow.onmouseover = function () {

            this.className = "cY";

        }

        oRow.onmouseout = function () {

            this.className = this.oldClass;

        }

    }

}

changeColor(oRows);

将数据显示在我们的页面中:数据绑定

function show() {

    var str = "";

    if (jsonData && jsonData.length > 0) {

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

            var cur = jsonData[i];

            str += "<tr>";

            str += "<td><input type='checkbox' name='tabInput'/></td>";

            for (var key in cur) {

                str += "<td>" + cur[key] + "</td>";

            }

            str += "</tr>";

        }

    }

    tBody.innerHTML = str;

    changeColor(tBody.rows);

}

show();

function sortRows(n) {

    var oRows = tBody.rows;

    var oRowsAry = tools.likeToArray(oRows);

给所有行对应的数组进行排序

    oRowsAry.sort(function (a, b) {

        var as = parseFloat(a.cells[n].innerHTML);

        var bs = parseFloat(b.cells[n].innerHTML);

        return as - bs;

    });

   实现升降序处理

    if (this.flag === "asc") {

        oRowsAry.reverse();

        this.flag = "desc";

    } else {

        this.flag = "asc";

    }

    按照最新的顺序，把我们的每一行重新的添加到页面中

    var frg = document.createDocumentFragment();

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

        frg.appendChild(oRowsAry[i]);

    }

    tBody.appendChild(frg);

    changeColor(oRows);

}

oScore.onclick = function () {

    sortRows.call(this, 5);

}

oAge.onclick = function () {

    sortRows.call(this, 2);

tools.js:

var tools = {

formatJSON: function (jsonStr) {

        var jsonObj = null;

        try {

            jsonObj = JSON.parse(jsonStr);

        } catch (e) {

            jsonObj = eval("(" + jsonStr + ")");

        }

        return jsonObj;

    },

isType: function (val, type) {

        return Object.prototype.toString.call(val) === "[object " + type + "]";

    },

likeToArray: function (likeAry) {

        var ary = [];

        try {

            ary = [].slice.call(likeAry, 0);

        } catch (e) {

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

                ary.push(likeAry[i]);

            }

        }

        return ary;

    }

};

14、点赞

var oCount = document.getElementById("count");

    var oSpan = oCount.getElementsByTagName("span")[0];

    oCount.onclick = (function () {

        var n = 0;

        return function () {

            n++;

            oSpan.innerHTML = "(" + n + ")";

        }

    })();

15、数组去重

function distinct(ary) {

        var obj = {};

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

            var cur = ary[i];

            if (obj[cur] == cur) {

                ary.splice(i, 1);

                i--;

                continue;

            }

            obj[cur] = cur;

        }

        obj = null; 我们在不用这个obj的时候，让obj=null，这样之前开辟的那个堆内存xxxfff222就没有变量占用了，浏览器空闲的时候，会自动的销毁这个堆内存(浏览器的垃圾回收机制)

        return ary;

    }

    var ary=[1,2,1,2,1,2,2,1,2,3,2,3,1,2,3,2,1,2,3];

    var newAry=distinct(ary);把全局下的ary变量的值传给我们的函数

    var a=distinct(ary);

console.log(newAry);

16、投票

var oBtn1 = document.getElementById("btn1");

    var oBtn2 = document.getElementById("btn2");

    var ary = [oBtn1, oBtn2];

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

        var cur = ary[i];

        cur.onclick = (function () {

            var n = 0;

            return function () {

                var oSpan = this.getElementsByTagName("span")[0];

                var oDiv = this.getElementsByTagName("div")[0];

                //var c = n;

                n += 10;

                if (n <= 100) {

                    oSpan.innerHTML = "( " + n + " )";

                    oDiv.style.width = n + "px";

                    //move(c, oDiv);

                }

            }

        })();

    }

    function move(cur, ele) {

        var count = 0;

        var timer = window.setInterval(function () {

            count++;

            if (count <= 10) {

                ele.style.width = cur + count + "px";

            } else {

                window.clearInterval(timer);

            }

        }, 13);

    }

17、原型链数组去重加排序

Array.prototype.distinct = function () {

        var obj = {};

        //this就是当前要操作的那个数组

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

            var cur = this[i];

            if (obj[cur] == cur) {

                this.splice(i, 1);

                i--;

                continue;

            }

            obj[cur] = cur;

        }

        return this;

    }

    var ary = [1, 2, 3, 2, 3, 2, 1, 3, 0, 4, 5, 6, 2, 3, 4, 5, 6, 2, 3, 4, 8, 9, 0, 211, 3, 4, 45];

    ary.distinct().sort(function (a, b) {

        return a - b;

    });//链式写法

    console.log(ary);

18、将json格式的对象，转化为json格式的字符串

var str='{';

    for(var key in obj){

        if(key=="student"){

            str+='"'+key+'":';

            str+='[';

                for(var i=0;i<obj[key].length;i++){

                    str+='"'+obj[key][i]+'",';

                }

                str+='';

            str+=']';

        }else{

            str+='"'+key+'":"'+obj[key]+'",';

        }

    }

    str+='}';

    console.log(str);

 

    var str='{"name":"zhufeng","student":["崔国伟","刘骥","刘洁琼","樊庆堂"]}';//只有属性名是""才是json格式的字符串

    console.log(tools.formatJSON(str));

19、求数组中的最大值最小值

方案1：假设法

假设第一个是最大的，然后和后面的每一项去比较，如果后面的比我们假设的大，说明我们假设的错了，让max变成当前最大的那个数就好了

    var max = ary[0], min = ary[0];

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

        var cur = ary[i];

        if (cur > max) {

            max = cur;

        }

    }

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

        var cur = ary[i];

        if (cur < min) {

            min = cur;

        }

    }

方案2：

用Math.max和Math.min

这两个方法默认是比较多个数之间的最大值和最小值，需要把传递的参数一个个穿进来可以，不能直接的传一个数组

    var ary = [1, 2, 3, 4, 5, 2, 3, 4, 5, 1, 2, 6];

    var max = Math.max.apply(null, ary);

    var min = Math.min.apply(null, ary);

方案3：

先排序，头尾就是我们想要的

ary.sort(function (a, b) {

return a - b;

});

console.log(ary[0]);

console.log(ary[ary.length-1]);

20、求平均数

function average1(){

var a=arguments;

[].sort.call(a,function(a,b){return a-b});

[].pop.call(a);

[].shift.call(a);

var count=null;

var count=eval([].join.call(a,"+"));

return count/a.length;

}

function average(){

var a=DOM.listToArray(arguments);

a.sort(function(a,b){return a-b});

a.pop();

a.shift();

var count=eval(a.join("+"));

return count/a.length;

}

var score=average(90,88,94,78,84,69,77,86,89,66);

21、排序

var oLis=document.getElementsByTagName(

"li");

var a=[];

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

a.push(oLis[i]);

}

a,oLis

var list=[{name:"a",age:33},{name:"b",age:97},{name:"c",age:22},{name:"d",age:13}];

list.sort(function(a,b){return a.age-b.age});

list.sort(function (a,b){return -(a.name.charCodeAt(0)-b.name.charCodeAt(0))});

//localeCompare

a.sort(function(a,b){return a.innerHTML-b.innerHTML})

 

var parent=a[0].parentNode;//就是为了得到ul，

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

按着数据里的顺序，把这些li重新移动一遍;

alert(i);

parent.appendChild(a[i]);

a[i].parentNode.appendChild(a[i])

}

;[1,19,21,23,]

22、把DOM集合转为数组

1）var oLis=document.getElementsByTagName("li");

var a=[].slice.call(oLis,0);

Array.prototype.slice2=function(b,e){

b=b||0;

e=e||this.length;

var a=[];

for(;b<e;b++){

a.push(this[b]);

}

return a;

}

var ary=[];

ary.slice2(3,9)

2）var a=DOM.listToArray(oLis);

a.sort(function(a,b){return a.innerHTML-b.innerHTML});

var oUl=a[0].parentNode;//找到Li的父亲节点

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

oUl.appendChild(a[i]);

}

23、异常捕获机制

try{

alert("abcd");

}catch(abcd){

console.log(abcd);

alert("try里出错了");

throw new Error("我是自己制造的麻烦");

}finally{

alert("不管上边有千万个错，我都要一如既往的执行");

}

24、正则trim、substr

~function () {

        var strPro = String.prototype;

        //去除字符串首尾空格

        strPro.myTrim = function () {

            return this.replace(/(^\s*|\s*$)/g, "");

        }

        //区分汉字和字母的截取字符串

        strPro.mySub = function () {

            var len = arguments[0] || 10;

            var isD = arguments[1] || false;//默认是不加的，想加的话传true

            var str = "", n = 0;

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

                var s = this.charAt(i);

                /[\u4e00-\u9fa5]/.test(s) ? n += 2 : n++;

                if (n > len) {

                    isD ? str += "..." : void 0;

                    break;

                }

                str += s;

            }

            return str;

        }

    }();

 

    var str = "     【网络营销】网络营销是asd一种利用互联网的营销形式，建立在互联网的基础上，以线上营销为导向，网络为工具，由营销人员利用专业的网络营销工具，面向广大网民开展一系列营销活动的新型营销方式。虽然网络营销很受大小企业喜欢，但真正能够让网络营销产生执行力的却少之又少，该如何增加其执行力？    ";

    str = str.myTrim();

    str = str.mySub(38, true);

25、表单验证

String.prototype.myTrim = function () {

        return this.replace(/(^\s*|\s*$)/g, "");

    }

 

    var oEmail = document.getElementById("txtEmail");

    var oSpan = document.getElementById("emailError");

 

    oEmail.onfocus = function () {

        var val = this.value.myTrim();

        if (val === this.getAttribute("default")) {

            this.value = "";

        }

    }

    oEmail.onblur = function () {

        var val = this.value.myTrim();

        if (val === "") {

            this.value = this.getAttribute("default");

            oSpan.innerHTML = "";

            return;

        }

        check(val);

    }

    oEmail.onkeyup = function () {

        var val = this.value.myTrim();

        check(val);

    }

 

    function check(val) {

        var reg = /^(?:\w|\.|-)+@(?:[0-9a-zA-Z-]+)(?:\.[0-9a-zA-z]+){1,2}$/;

        if (!reg.test(val)) {

            oSpan.innerHTML = "您输入的邮箱格式有误！";

            oSpan.className = "";

        } else {

            oSpan.innerHTML = "输入正确！";

            oSpan.className = "c";

        }

    }

26、返回顶部

function getWin(attr) {

        return document.documentElement[attr] || document.body[attr];

    }

    var ch = getWin("clientHeight"), oDiv = document.getElementById("div1");

    window.onscroll = function () {

        var sT = getWin("scrollTop");

        if (sT >= ch) {

            oDiv.style.display = "block";

        } else {

            oDiv.style.display = "none";

        }

    }

    function move() {

        oDiv.style.display = "none";

        window.clearTimeout(this.timer);

        oDiv.timer = null;

        document.body.scrollTop -= 300;

        if ((document.body.scrollTop - 300) <= 0) {

            document.body.scrollTop = 0;

            return;

        }

        oDiv.timer = window.setTimeout(move, 10);

    }

    oDiv.onclick = move;

27、多张图片延迟加载

var tool = new Tool;

    var oDiv = document.getElementById("con"), oUl = oDiv.getElementsByTagName("ul")[0], oTop = document.getElementById("top");

    //init data

    var frg = document.createDocumentFragment();

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

        var cur = data[i];

        var oLi = document.createElement("li");

        oLi.innerHTML = "<img src='img/ddd.jpg' trueImg='" + cur.img + "' alt=''/><p>" + cur.txt + "</p>";

        frg.appendChild(oLi);

    }

    oUl.appendChild(frg);

 

    window.setTimeout(loadImg, 100);//默认加载第一屏显示的图片

    window.onscroll = loadImg;//当滚动的时候，还要加载之前没有显示的图片，问题：之前加载过的图片存在多次重新的加载的问题

    oTop.onclick = toTop;

 

    function loadImg() {

        var winTop = getWin("clientHeight") + getWin("scrollTop");

        var images = oUl.getElementsByTagName("img");

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

            var cur = images[i], curTop = tool.offset(cur).top, trueImg = cur.getAttribute("trueImg");

            if (curTop <= winTop && !cur.isLoad) {

                showTrueImg(cur, trueImg);

            }

        }

        //回到顶部

        var cH = getWin("clientHeight");

        if (!oTop.isMove) {

            oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";

        }

    }

    function showTrueImg(cur, trueImg) {

        var oImg = new Image;

        oImg.src = trueImg;

        oImg.onload = function () {

            cur.src = trueImg;

            cur.isLoad = true;

            move(cur);

        }

    }

    function getWin(attr) {

        return document.documentElement[attr] || document.body[attr];

    }

    //jQuery-->fadeIn

    function move(curEle) {

        var count = 0;

        _move();

        function _move() {

            window.clearTimeout(curEle.timer);

            count += 0.02;

            if (count >= 1) {

                tool.setCss(curEle, "opacity", 1);

                return;

            }

            tool.setCss(curEle, "opacity", count);

            curEle.timer = window.setTimeout(_move, 10);

        }

    }

    function toTop() {

        this.style.display = "none";

        this.isMove = true;

        var count = document.body.scrollTop, cur = this;

        _toTop();

        function _toTop() {

            window.clearTimeout(cur.timer);

            if (count - 200 <= 0) {

                document.body.scrollTop = 0;

                cur.isMove = false;

                return;

            }

            count -= 200;

            document.body.scrollTop = count;

            cur.timer = window.setTimeout(_toTop, 10);

        }

    }

28、静态图片延迟加载

var tool = new Tool;

    var oDiv = document.getElementById("con"), oUl = oDiv.getElementsByTagName("ul")[0], oTop = document.getElementById("top");

    //init data

    var frg = document.createDocumentFragment();

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

        var cur = data[i];

        var oLi = document.createElement("li");

        oLi.innerHTML = "<img src='img/ddd.jpg' trueImg='" + cur.img + "' alt=''/><p>" + cur.txt + "</p>";

        frg.appendChild(oLi);

    }

    oUl.appendChild(frg);

 

    window.setTimeout(loadImg, 100);//默认加载第一屏显示的图片

    window.onscroll = loadImg;//当滚动的时候，还要加载之前没有显示的图片，问题：之前加载过的图片存在多次重新的加载的问题

    oTop.onclick = toTop;

 

    function loadImg() {

        var winTop = getWin("clientHeight") + getWin("scrollTop");

        var images = oUl.getElementsByTagName("img");

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

            var cur = images[i], curTop = tool.offset(cur).top, trueImg = cur.getAttribute("trueImg");

            if (curTop <= winTop && !cur.isLoad) {

                showTrueImg(cur, trueImg);

            }

        }

        //回到顶部

        var cH = getWin("clientHeight");

        if (!oTop.isMove) {

            oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";

        }

    }

    function showTrueImg(cur, trueImg) {

        var oImg = new Image;

        oImg.src = trueImg;

        oImg.onload = function () {

            cur.src = trueImg;

            cur.isLoad = true;

            move(cur);

        }

    }

    function getWin(attr) {

        return document.documentElement[attr] || document.body[attr];

    }

    //jQuery-->fadeIn

    function move(curEle) {

        var count = 0;

        _move();

        function _move() {

            window.clearTimeout(curEle.timer);

            count += 0.02;

            if (count >= 1) {

                tool.setCss(curEle, "opacity", 1);

                return;

            }

            tool.setCss(curEle, "opacity", count);

            curEle.timer = window.setTimeout(_move, 10);

        }

    }

    function toTop() {

        this.style.display = "none";

        this.isMove = true;

        var count = document.body.scrollTop, cur = this;

        _toTop();

        function _toTop() {

            window.clearTimeout(cur.timer);

            if (count - 200 <= 0) {

                document.body.scrollTop = 0;

                cur.isMove = false;

                return;

            }

            count -= 200;

            document.body.scrollTop = count;

            cur.timer = window.setTimeout(_toTop, 10);

        }

    }

29、动画原理

var box = document.getElementById("box"), btnLeft = document.getElementById("btnLeft"), btnRight = document.getElementById("btnRight");

    var cW = document.documentElement.clientWidth || document.body.clientWidth;

    var tool = new Tool;

 

    function move(target) {

        var start = tool.getCss("left", box), count = start;

        _move();

        function _move() {

            clearTimeout(box.timer);

            if (start < target) {//右

                if (count + 10 >= target) {

                    tool.setCss(box, "left", target);

                    return;

                }

                count += 10;

                tool.setCss(box, "left", count);

            } else if (start > target) {//左

                if (count - 10 <= target) {

                    tool.setCss(box, "left", target);

                    return;

                }

                count -= 10;

                tool.setCss(box, "left", count);

            } else {

                return;

            }

            box.timer = setTimeout(_move, 10);

        }

    }

 

    var tarR = cW - box.offsetWidth, tarL = 0;

    btnLeft.onclick = function () {

        move(tarL);

    }

    btnRight.onclick = function () {

        move(tarR);

    }

30、无缝滚动效果

var ele=document.getElementById("content");

    var timer=null;

    var strText=ele.innerHTML;

   function effect(){

       var t=ele.scrollTop;

       ele.scrollTop++;

       if(t==ele.scrollTop){

           ele.innerHTML+=strText;

       }

   }

    timer=window.setTimeout(arguments.callee,10);

    ele.onclick=function(){

        if(timer){

            clearTimeout(timer);

            timer=null;

        }else{

            effect();

        }

    }