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>