奇葩for循环、文档流写入和元素写入、随机数

奇葩for循环

<script>
// 正常for循环的写法
for(let i =0;i<10;i++){
    console.log(i);
}
// 没有初始值
let k=0;
for(;k<10;k++){
    console.log(k);
}
// 没有初始值和判断是否满足循环条件
// 如果 for循环中没有判断条件，那么他的判断条件在循环体内部，并且需要开发者手动书写跳出循环的操作，因为不会主动跳出循环
let m = 0;
for(;;m++){
    //code
    if(m<10){
        console.log(m);
    }else{
        break;
    }
}

// 没有初始值，没有判断条件，没有递增
let n=0;
for(;;){
    if(n<10){
        console.log(n);
        n++; // 递增
    }else{
        break;
    }
}
</script>

文档流写入和元素写入

<script>
/*
把元素直接写入文档流 使用
document.write(str)
1.会把内容渲染到body
2.str 可以是标签，也可以是文本内容
3.后面写入的内容不会覆盖前面写入的内容
*/
document.write('<h1>秦琼</h1>');
document.write('<h1>秦用</h1>');
document.write('秦桧');
document.write('<div class="cell"></div><div class="cell"></div><div class="cell"></div>');


/*
innerHTML
他是dom元素的一个属性，可以通过 innerHTML 设置和获取元素的内容
特点:
1.后写入的内容会覆盖之前写入的内容
2.可以写入标签，也可以写入文本

设置内容
    dom.innerHTML = '内容' 如果内容是html结构，可以被渲染成html
获取内容 
    dom.innerHTML 获取到了dom元素中的html结构

innerText  
他是dom元素的一个属性，可以通过 innerText 设置和获取元素的文本内容
特点:
1.后写入的内容会覆盖之前写入的内容
2.设置的时候如若是html结构，html结构不会被渲染，会原样写入

和 innerHTML 一样也可以设置和获取内容
注意 获取的结果 会 过滤掉标签名，只会显示文本内容
*/
let aa= document.getElementById('aa');
aa.innerHTML = '铁木真';
aa.innerHTML += '术赤'; // aa.innerHTML =  aa.innerHTML +  '术赤';
aa.innerHTML += '<h1>察合台</h1>';
console.log( aa.innerHTML );

let bb= document.getElementById('bb');
console.log(bb.innerHTML);
console.log(bb.innerText);
bb.innerText = '<h1>周末吃顿好的</h1>';
bb.innerText = '<h1>周末吃顿红烧大肠</h1>';
</script>

循环嵌套

<script>
/*
循环嵌套
*/
// 外层控制的是行
for(let i=0; i<5;i++){
    // 内层控制的是 列
    for(let k=0;k<=i;k++){
    document.write(k);
    }
    document.write('<br/>');
}
// 双重for循环绘制
for(let i=0;i<4;i++){
    for(let k=0;k<4;k++){
        document.write('<div class="wp"></div>');
    }
    document.write('<br/>')
}


for(let i=0;i<4;i++){
    for(let k=0;k<=i;k++){
        document.write('<div class="wp"></div>');
    }
    document.write('<br/>')
}
document.write('<div class="wp">');
    document.write('<span>袁洪</span>');
document.write('</div>');

// 创建表格
document.write('<table border=1 width="500">');
for(let i=0;i<4;i++){
    document.write('<tr>');
    for(let j=0;j<4;j++){
        document.write('<td>'+j+'</td>');
    }
    document.write('</tr>');
}
document.write('</table>');

// 九九乘法表
document.write('<table border=1 width="600">');
for(let i=1;i<=9;i++){
    document.write('<tr>');
    for(let j=1;j<=9;j++){
        if(j<=i){
            document.write('<td>'+i+'×'+j+'='+i*j+'</td>');
        }else{
            document.write('<td></td>')
        }
 
    }
    document.write('</tr>');
}
document.write('</table>');
</script>

随机数

<script>
/*
数学方法
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入

Math.random() 随机数，返回的是[0,1) 的值
*/
document.write(Math.random() +'<br />');  
document.write(Math.random()*100 +'<hr />'); 
// 0-100整数
let num = Math.floor(Math.random()*101);
document.write(num +'<br/>');

// [40,60]之间的数
let num1 = Math.floor(Math.random()*21)+40;
document.write(num1 +'<hr/>');

/*
[m,n]之间的随机整数
Math.floor(Math.random()*(n-m+1))+m;
*/
// 随机输出 10个[20,70] 之间的整数
document.write('20到70之间的数<hr/ >')
for(let i=0;i<=9;i++){
    let num2=Math.floor(Math.random()*51)+20;
    document.write(num2 +'<hr/>');
}


/*
for循环中，如果判断条件具有多个，如下，具有 i<6,j<20 两个条件，那么只有 最后一个条件起到了判断条件的作用，其他判断条件作废

*/
for(let i=0,j=0;i<6,j<20;i++,j++){
    sum = i+j;
}
document.write(sum +'<hr/>');
</script>