for循环的简单应用-自动生成div

html部分:





css部分:

        #box{
            height: 600px;
            widows: 600px;
            border:1px solid black;
            position: relative;}
        #box div{height: 50px;
                width: 50px;
                position: absolute;}

javascript部分:

 window.onload = function () {
            var aBtn = document.getElementsByTagName('input');
            var oBox = document.getElementById('box');
            var str = '';
            var num = 0;
            var flag = 0;
            var aColor = ['red','blue','green','yellow','purple','pink','gray'];
//自动生成100个10*10的div
            aBtn[0].onclick = function () {
                str = '';
                num = 100;
                for (var i=0;i
'; } oBox.innerHTML = str; } //v字基础 aBtn[1].onclick = function () { str = ''; var len = 11; var cen = Math.floor(len/2); for (var i=0;i
'; }else { alert(i); str += '
';} } oBox.innerHTML = str; } //v字提高版 //通过改变flag的值判断(flag相当于一个开关) aBtn[2].onclick = function () { str = ''; var len = 11; var cen = Math.floor(len/2); if (flag ==0 ){ alert('上'); for (var i=0;i
'; }else { str += '
';} } flag ++; }else if (flag ==1 ){ alert('右'); for (var i=0;i
'; }else { str += '
';} } flag ++; }else if (flag ==2 ){ alert('下'); for (var i=0;i
'; }else { str += '
';} } flag ++; } else{ alert('左'); for (var i=0;i
'; }else { str += '
';} } flag =0; } oBox.innerHTML = str; } }


你可能感兴趣的:(前端学习总结)