冒泡排序、二维数组、数组练习、计时器

冒泡排序

<script>
let arr=[3,5,4,2,1];
// 第一趟，比较4次
for(let i=0;i<4;i++){
    // 比较两个相邻的大小，如果 i位置的值 大于i+1位置的值，则交换数据
    if(arr[i]>arr[i+1]){
        let temp=arr[i];
        arr[i]=arr[i+1];
        arr[i+1]=temp;
    }
}
console.log(arr); // [3, 4, 2, 1, 5]
// 第二趟，比较3次
for(let i=0;i<3;i++){
    if(arr[i]>arr[i+1]){
        let temp=arr[i];
        arr[i]=arr[i+1];
        arr[i+1]=temp;
    }
}
console.log(arr); //[3, 2, 1, 4, 5]
// 第三趟，比较2次 
for(let i=0;i<2;i++){
    if(arr[i]>arr[i+1]){
        let temp=arr[i];
        arr[i]=arr[i+1];
        arr[i+1]=temp;
    }
}
console.log(arr); // [2, 1, 3, 4, 5]

// 第四趟，比较1次 //[1, 2, 3, 4, 5]

/*
比较的数组，每一次比较的趟数，和对应比较的次数关系是 
一共比较的趟数是 arr.length-1
每一轮比较的次数是 arr.length-当前的趟(轮)数 

*/
// 外层控制比较的趟数，或者轮数
for(let i=1;i<arr.length;i++){
    // 内层控制比较的次数
    for(let j=0;j<arr.length-i;j++){
        if(arr[j]>arr[j+1]){
        let temp=arr[j];
        arr[j]=arr[j+1];
        arr[j+1]=temp;
    }
    }
}
console.log(arr);

// 练习 随机生成 [10,，80]的10个整数，然后进行冒泡排序

let arr1=[];
for(let z=0;z<10;z++){
    let n=Math.floor(Math.random()*71+10);
    arr1.push(n);

}
console.log(arr1);
for(let i=1;i<arr1.length;i++){
    for(let j=0;j<arr1.length-i;j++){
        if(arr1[j]<arr1[j+1]){
        let temp=arr1[j];
        arr1[j]=arr1[j+1];
        arr1[j+1]=temp;
        }
    }
}
console.log('冒泡排序');
console.log(arr1);
console.log('最大值是'+arr1[0]);
console.log('最小值是'+arr1[arr1.length-1]);

</script>

二维数组

<script>
let arr1=['姜桓楚','苏护','姜子牙'];
let arr2=['李信','苏烈','盾山'];
let arr3=['百里守约','百里玄策','百里屠苏'];

let arr4=[ arr1,arr2,arr3,['黄海波','李易峰','吴亦凡','王力宏'] ];
/*
此刻，arr4就是一个二维数组，二维数组，指的是数组的每一个元素也是一个数组
获取数组中的元素 arr4[1][1]
第一个下标表示的是arr4数组中的第几个数组，
第二个下标表示的是该数组中的第几个元素
遍历二维数组，需要使用双重for循环
*/
console.log(arr4);
console.log(arr4[2][2]);

for(let i=0;i<arr4.length;i++){
    for(let j=0;j<arr4[i].length;j++){
        document.write(arr4[i][j]+'<br>');
    }
    document.write('<hr>');
}

let arr5=[[1,34,2],[2,45,6],[2,3,67]];
// 求最大值和最小值
let max=arr5[0][0];
let min=arr5[0][0];

for(let i=0;i<arr5.length;i++){
    for(let j=0;j<arr5[i].length;j++){
        if(arr5[i][j]>max){
            max=arr5[i][j];
        }
        if(arr5[i][j]<min){
            min=arr5[i][j];
        }
        
    }
}
document.write('最大值是'+max+';最小值是:'+min)


</script>

数组练习

<script>
let arr=['百里守约','百里玄策','百里屠苏','姜桓楚','苏护','姜子牙'];

let txt =document.getElementById('txt');
let btn =document.getElementById('btn');
console.log(arr);
btn.onclick=function(){

    let n=txt.value;
        if(arr.indexOf(n)==-1){
            alert('该用户不存在');
        }else{
            arr.splice(arr.indexOf(n),1);
            alert('已删除');
        }
        //复位输入框
        txt.value='';
    console.log(arr);
}
</script>

模板字符串

<script>
let username='岳飞';
let age=36;
let story='打败金兀术';

let str='姓名:'+username+'年龄:'+age+'事迹:'+story;

console.log( str );
/*
模板字符串
使用 反引号 ``作为字符串的标识
在模板字符串中 使用变量，使用方式是 ${变量名}
*/
let str1= `姓名:${username},年龄:${age},事迹:${story}`;
console.log( str1 );

/*
模板字符串 支持换行

*/
let str2=`
    姓名:${username},
    年龄:${age},
    事迹:${story}
`;
console.log( str2 );

let btn=document.getElementById('btn');
let list=document.getElementById('list');
btn.onclick=function(){
    let html='';
    for(i=0;i<10;i++){
        html+=`
        <li>
            <h1>${username}</h1>
            <p>${age}</p>
            <p>${story}</p>
        </li>
        `;
    }
    list.innerHTML+=html
};
/*
模板字符串中，可以运行表达式
*/
let str3=`1+1=${1+1}`;
console.log(str3);

let str4=`同是天涯沦落人,${3>4?'莫愁前路无知己':'从此萧郎是路人'}`;
console.log(str4);

/*
模板字符串中可以运行函数
*/
function show(){
    return '莫愁前路无知己';
}
let str5=`${show()},凭君传语报平安`;
console.log(str5);
</script>

计时器

<script>
/*
计时器:
1.属于BOM中的内容
2.计时器分为两种
    间隔计时器: 设置每隔多久执行一次
    延迟计时器: 设置延迟多久才执行操作或者函数
3.创建计时器的方式
    创建间隔计时器
    使用方法是 setInterval()
    参数有两个
    参数1: 执行的函数
    参数2: 时间间隔，单位是 ms, 1s = 1000ms

    创建方式三种
    1.匿名函数
    setInterval(function(){
        // code
    },1000);

    2.使用函数直接作为计时器的执行函数
    function show(){}
    setInterval(show,1000);

    3.使用函数直接作为计时器的执行函数, 使用字符串形式写入
    function show(){}
    setInterval('show()',1000);

计时器的返回值，返回值是当前浏览器分配给计时器的编号，谷歌从1开始，火狐从2开始，edge是从1开始

计时器函数里面的变量，属于局部变量，因此外面的操作不能直接操作计时器内部的变量，可以理解为外部的操作不会被计时器内部造成影响

清除计时器: 
    清除间隔计时器
        clearInterval(计时器对应的编号)

延时计时器
      setTimeout(function(){
        // code
    },1000);
    含义是 1秒钟之后在执行函数中的代码

    清除延时计时器，一般不清除
        clearTimeout(计时器对应的编号)
*/
let num = 10;
let n =null;
let timmer;
n= setInterval(function(){
    num--;
    time.innerHTML=num;
    // 清除计时器
    if(num<=0){
        clearInterval(n);
    }
},1000);
console.log(n,num);

// 点击停止倒计时
stop1.onclick=function(){
    clearInterval(n);
};

// 随机改变元素的背景色
function show(){
    let r=Math.floor(Math.random()*256);
    let g=Math.floor(Math.random()*256);
    let b=Math.floor(Math.random()*256);
    time.style.background=`rgb(${r},${g},${b})`;
    start.style.background=`rgb(${r},${g},${b})`;
    stop1.style.background=`rgb(${r},${g},${b})`;
    btn.style.background=`rgb(${r},${g},${b})`;
}
start.onclick=function(){
    
    // 在使用前先清除，防止计时器累加
    clearInterval(timmer);
    timmer=setInterval(show,100);
};

// 延时计时器
btn.onclick=function(){
    setTimeout(function(){
        alert('计时器真好玩儿');
    },2000);
};


</script>

计时器的使用

<script>
let arr=["姚朋辉","李栋宇","卢自豪","邓医功","李道赓","魏义豪","贾祥磊","董宴斌","张继坤","熊家宝","罗开心","陈奕行","姜特","刘佳辉","栾艺朋","高学文","张盈迪","朱亚柯","屈龙飞","刘哲","李圣卓","张帅","许振磊","闫寅龙","李世玮","张洪瑞","冯梦林","陈世航"];
let timmer;
btn.onclick=function(){
    clearInterval(timmer);
    timmer=setInterval(function(){
        let n=Math.floor(Math.random()*(arr.length));
        txt.innerHTML=arr[n];
    },2);
  
};
btn2.onclick=function(){
    clearInterval(timmer);
}
</script>