while、数组简介

while

<script>
/*
while(循环条件){
    循环体
}
当满足循环条件的时候，进入循环体，当不满足循环条件的时候，跳出循环体，循环结束
*/
let i=0;
while (i<=10) {
    document.write('她在丛中笑'+i+'<br />');
    i++;
}
// 此刻i=11 只是没有进入到循环体
document.write('残阳如血'+i+'<br />')

/*
do{
    循环体
}while(循环条件)

do-while 和 while 的区别，do 首先先执行一次循环体中的代码，然后在判断是否满足循环条件，如果满足则执行循环体，否则跳出循环
do-while 要比 while 多执行一次循环体代码

*/
while (false){
    document.write('言寡尤行寡悔'+i+'<br>');
}

do{
    document.write('道德经<br>')
}while (false);
 
// 辗转相除法，求最大公约数
//大数除以小数。然后 以除数和余数反复做除法运算，当余数为 0 时，取当前算式除数为最大公约数
let a=99;
let b=54;

let max= a>b? a:b;
let min= a>b? b:a;
let yu=max%min;  // 余数
let gy=0;
while(yu!=0){
   
        gy=min%yu;
        // 为了使循环体中的代码循环，需要不断更改变量的值
        min=yu;
        yu=gy;
    
}
document.write(min);
</script>

选中菜单

<script>
// 获取 class='wp'的元素
let wp=document.getElementsByClassName('wp')[0];
// 根据标签获取wp下的 所有 span
let span =wp.getElementsByTagName('span');
/*
span[0].οnclick=function(){
    // 给元素添加类名，需要使用属性 className，而不是class，因为class是js中的保留字，他是类的意思，所以为了避免冲突，给元素使用className
    span[0].className='active';
    span[1].className='';
    span[2].className='';
    span[3].className='';
}
span[1].οnclick=function(){
    span[0].className='';
    span[1].className='active';
    span[2].className='';
    span[3].className='';
}
span[2].οnclick=function(){
    span[0].className='';
    span[1].className='';
    span[2].className='active';
    span[3].className='';
}
span[3].οnclick=function(){
    span[0].className='';
    span[1].className='';
    span[2].className='';
    span[3].className='active';
}
*/
// 获取数组长度，使用length属性
for(let i=0;i<span.length;i++){
    span[i].onclick=function(){
        // 判断其他选中的状态，删除选中
        for(let j=0;j<span.length;j++){
        //     if(span[j].className=='active'){
        //         span[j].className='';
        //     }
        //     span[j].className=='active'&&(span[j].className='');
            //重置所有类名为空
            span[j].className='';
        }
        span[i].className='active';
    };
}
</script>

tab切换

<script>
let wp=document.getElementsByClassName('wp')[0];
let span=wp.getElementsByTagName('span');
// 获取tab切换的内容
let tab=document.getElementsByClassName('tab')[0];
let box=tab.getElementsByTagName('div');
/*
for 循环当中，声明变量的区别
如果使用 var 声明，则循环体中的延迟操作都会获取变量的最终值
如果使用 let 声明，由于let是块级作用域，所以循环体中的延迟操作的变量不会受到影响

如果在当前实例中，不使用let声明，可以使用以下方法获取元素的下标
1.给元素设置自定义属性，属性值是元素下标
*/
for(var i=0;i<span.length;i++){

    // 设置自定义属性 aa
    span[i].aa=i;
    console.log(span[i].aa);

    span[i].onclick=function(){
        // alert(this.index);
        /*
        每一个函数中，都有一个this，这个this指代的是触发这个函数的对象
        本例中，谁被点击，this就是谁
        */
        var n=this.aa;
        for(var j=0;j<span.length;j++){
            span[j].className='';
            box[j].className='';

        }
        span[n].className='active';
        box[n].className='show';
    }
}
console.log(i);
</script>

数组简介

<script>
/*
数组
1.数组属于对象类型(复杂类型)
2.string、boolean、number、undefined 属于基础类型(简单类型)

数组中可以存放任意数据类型的数据

数组的声明
1.let arr=[1,2,3,4]
2.结合构造函数，创建数组
    let arr4= new Array(4);

    注意，使用 构造函数声明数组的时候，如果只有一个number的参数，则表示数组长度，而数组内容为空，如果参数是两个及其以上的数字，则表示数组元素

*/
let arr1=[1,2,'封神榜','妲己'];
console.log(arr1);
// 使用 Array() 构造函数创建数组
let arr2= new Array();
console.log(arr2);

let arr3= new Array('殷寿');
console.log(arr3);

// 如果 Array的参数是一个数字类型数据，表示数组长度，该数组中的数据都是空
let arr4= new Array(4);
console.log(arr4);
// 如果是两个及其以上的数字，则表示数组中的元素
let arr5= new Array(4,5);
console.log(arr5);

/*
数组长度的设置和获取
使用 数组的length 属性，既可以设置数组长度，也可以获取数组长度

*/
let arr6=[false,'灰太狼',23,'刘备'];
console.log(arr6.length);// 获取数组的长度，也就是数组中有几个元素，称为数组长度
// 删除数组元素
arr6.length =2;
console.log(arr6);
// 清空数组
arr6.length = 0;
console.log(arr6);
</script>

获取数组元素和数组遍历

<script>
/*
形如 let arr2 = [,,,];
在计算该数组长度的时候，最后一个逗号后面如果为空，则不计算入数组长度
*/
let arr1=[,,,3,4];
let arr2=[,,,];
console.log(arr1.length,arr2.length);

/*
数组当中的每一个元素，都对应一个数组下标(索引)，下标从0开始计算，获取数组中的数据可以通过 arr[下标] 的方式获取

*/

let arr3=['武松','武大郎','潘金莲','宋江'];
console.log( arr3[2] );
// 随机获取下标,范围是 [0,3]
let num =Math.floor(Math.random()*4);
console.log(arr3[num]);
/*
遍历数组
1. for 循环
2. for~in循环
3. forEach 函数
*/
let arr4=['赑屃','霸下','腾蛇','白溪'];
// for 循环
for(let i=0;i<arr4.length;i++){
    console.log(arr4[i]);
    document.write(arr4[i]+'<br/>')
}
document.write('<hr/>');

// for-in 循环，还可以循环对象
/**
for(let key in arr4){
    key 是循环的下标,key 是变量，可以随意命名
    arr4 是要循环的对象
}
*/
for(let aa in arr4){
    document.write(arr4[aa]+'<br/>');
}

/*
es6中推荐使用 数组方法，forEach()
他里面传入的是一个函数，该函数具有一个形参 item，item就是当前循环的数组元素
*/
arr4.forEach(function(item){
    document.write(item+'<br/>');
})

</script>