Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>缓存数组的长度</title>
<style>
p{font-size:40px;}
</style>
</head>
<body>
<a href="javascript:void(0);">触发未缓存的操作</a>
<a href="javascript:void(0);">触发已缓存的操作</a>
<script>
window.onload=function(){
    //随机生成若干个div，并设置初始样式
    for(var i=0;i<5000;i++){
        var creat=document.createElement("div");
        document.body.appendChild(creat);       
        changefn(creat,i,{
            widthz:"100px",
            heightz:"14px",
            colorz:"green",
            mtz:"1px"
        })
        
    }
    //获取生成的div
    var divarra=document.getElementsByTagName("div"),
        len=divarra.length-1,
        btn=document.getElementsByTagName("a");
​
    btn[0].onclick=function(){
        testtime(divarra);
    }
    btn[1].onclick=function(){
        testtime0(divarra);
    }
    
    //主函数功能，根据bz标致变量的值来走缓存数组长度也没有缓存数据长度
    function testtime(divarr){
        var oldtime=new Date().getTime(),
            nexttime=0;
            for(var i=0;i<divarr.length;i++){
                changefn(divarr[i],"没缓存",{
                    widthz:"110px",
                    heightz:"16px",
                    colorz:"red",
                    mtz:"2px"
                })
                if(i===len){
                    nexttime=new Date().getTime();
                    console.log(oldtime,nexttime,nexttime-oldtime,"未缓存")
                }
            }
                
    }
    function testtime0(divarr){
        var oldtime=new Date().getTime(),
            nexttime=0;
        for(var j=0;j<=len;j++){
            changefn(divarr[j],"已绑存",{
                widthz:"120px",
                heightz:"18px",
                colorz:"blue",
                mtz:"3px"
            })
            if(j===len){
                nexttime=new Date().getTime();
                console.log(oldtime,nexttime,nexttime-oldtime,"有缓存")
            }
        }
    }
    //动态改变属性
    function changefn(obj,index,josnz){
        obj.innerHTML=index;
        obj.style.width=josnz.widthz;
        obj.style.height=josnz.heightz;
        obj.style.background=josnz.colorz;
        obj.style.marginTop=josnz.mtz;
    }
​
}
</script>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers