javascript循环
1.条件语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// if(表达式隐式转换后为true){
// // 执行语句块
// }
// if(条件为true){
// // 语句块
// }
// i=0 赋值会返回等号右侧的值
// i==0 比较，隐式转换后比较 i有可能是false "" 0这三种值都会进入条件
// i===0 精确比较 只有i是0的时候才可以进入条件
// var i=0;
// if(i=0){
// console.log("aaa");
// }
// var i=1;
// var j=0;
// if(i && j){
// }
var obj = "a";
if (obj && obj.a) {
console.log("a");
}
// var a=3;
// if(a<3){
// console.log("aaa");
// }
// if(a<3){
// console.log("aaa");
// }else{
// // 如果上面的条件不满足，否则执行该语句块
// console.log("aaa");
// }
// if(b>3){
// console.log("aaa");
// }else{
// console.log("bbb");
// }
/*
try{
尝试执行的语句块
}catch(e){
// 如果尝试执行的语句块错误，失败，执行该语句块
}finally{
// 不管上述那种都会执行该语句块
}
*/
// try{
// // console.log("aaa");
// s=a+b;
// }catch(e){
// s=1;
// // console.log("bbb");
// }finally{
// console.log(s);
// // console.log("ccc");
// }
// var s=1;
// try{
// s++;
// s+=b;//报错 不继续执行后续的语句，直接执行catch
// console.log(s);
// }catch(error){
// s+=c;
// console.log(s,error);
// }finally{
// console.log("aaa");
// }
// 多分支的条件语句
// if(a>3){
// }else if(a===3){
// // a>3条件不满足，并且a===3时执行
// }else{
// // 以上两个条件都不满足
// }
a = 90;
if (a >= 90 && a <= 100) {
console.log("甲等");
} else if (a >= 80) {
console.log("乙等");
} else if (a >= 70) {
console.log("丙等");
} else if (a >= 60) {
console.log("丁等");
} else {
console.log("不及格");
}
// 上面的一次判断，条件可以根据上次的省略部分
// 下面的多次判断,条件必须全面
if (a >= 90 && a <= 100) {
console.log("甲等");
}
if (a >= 80 && a < 90) {
console.log("乙等");
}
if (a >= 70 && a < 80) {
console.log("丙等");
}
if (a >= 60 && a < 70) {
console.log("丁等");
} else {
console.log("不及格");
}
var x = 200;
var y = 200;
// if(x<0){
// x=0;
// }
// if(x>200-50){
// x=200-50;
// }
// if(y<0){
// y=0;
// }
// if(y>200-50){
// y=200-50;
// }
// console.log(x,y)
// var x=-50;
// var y=200;
// if(x<0){
// x=0;
// }else if(x>200-50){
// x=200-50
// }
// if(y<0){
// y=0;
// }else if(y>200-50){
// y=200-50;
// }
// console.log(x,y)
// 遇到多分支条件时,触发条件次数多的写在上面,触发条件次数少的写在下面
// 如果语句块仅有一句话,可以省略{}
// var x=100;
// var y=200;
// if(x<0) x=0;
// else if(x>200-50)x=200-50;
// if(x>100) x++;
// else x--;
// if(x>100)
// x++;//如果没有{}默认仅执行条件后的第一句话,第二句话不再条件内
// x+=10;//这句话不属于条件内语句,不管是否满足,都需要执行
// if(x>100);
// x++;
// x+=10;
// console.log(x);
// switch
// switch(表达式)
// case 值1:
// break;
// default :
// switch(表达式){
// case "值1":
// // 当满足表达式的值绝对与值1相等(===)执行这里的语句
// case "值2":
// // 如果值1的语句后面没有使用break,则自动穿越值2,不判断相等,直接执行值2后面的内容
// // 当满足表达式的值绝对与值2相等(===)执行这里的语句
// break;//当使用break,不继续向下穿越跳出该条件语句
// default:
// // 默认如果表达式与以上所有值都不相等时,执行default后面的语句
// // 一般default中不需要写 相等条件和break
// }
// var state="run";
// state="jump";
// // 状态分支 状态机
// switch(state){
// case "run":
// console.log("播放跑的动画");
// break;
// case "jump":
// console.log("播放跳跃动画");
// break;
// case "walk":
// console.log("播放走路动画");
// break;
// case "play":
// console.log("播放打击动画");
// break;
// default:
// console.log("默认");
// }
// var state="skill3";
// 状态分支 状态机
// switch(state){
// case "skill1":
// console.log("流星火");
// break;
// case "skill2":
// console.log("死亡缠绕");
// break;
// case "skill3":
// console.log("冰晶防护");
// case "attack":
// console.log("挥杖");
// break;
// default:
// console.log("默认");
// }
// var source=90;
// switch(parseInt(source/10)){
// case 9:
// break;
// case 8:
// break;
// case 7:
// break;
// case 6:
// break;
// default:
// }
// var source=82;
// 如果switch判断的内容不是相等情况下,可以再switch使用true,做为表达式
// 在case中描述条件,以用来让条件为true执行对应的语句
// switch(true){
// case source>=90 && source<=100:
// console.log("aaa");
// break;
// case source>=80:
// console.log("bbb");
// break;
// case source>=70:
// console.log("ddd");
// break;
// case source>=60:
// console.log("eeee");
// break;
// default:
// }
// 当条件在处理时发生冲突,需要考虑使用状态来做为唯一判断标准
</script>
</body>
</html>
2.while语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
height: 30px;
line-height: 30px;
font-size: 20px;
text-align: center;
border: 1px solid #000000;
}
</style>
</head>
<body>
<ul id="ul1"></ul>
<table id="table1"></table>
<script>
//
var ul1 = document.getElementById("ul1");
var str = "";
/*
1、初始变量
2、进入循环的条件
3、有不断向循环外变化的表达式
while(表达式) 如果表达式隐式转换为布尔值时是true，则进入循环
*/
var i = 1;
while (i < 7) {
str += "<li>" + i + "</li>";
i++;
}
ul1.innerHTML = str;
var i = 0;
var sum = 0;
while (i <= 100) {
sum += i;
i++;
}
while (i++ < 100) sum += i;
console.log(sum);
// var i=1;
// var s=50;
// while(i<=50){
// s+=i+(100-i);
// i++;
// }
// console.log(s);
// var i=0;
// var s=0;
// while(i++<100) s+=i;
// console.log(s);
var i = 16;
var n = 1;
while ((i = i & (i - 1))) n++;
console.log(n);
// var i=15;
// var n=1;
// while(i=i&(i-1))n++;
// console.log(n);
/* 0+1+1+2+3+5+8+13
var n=0;
var m=1;
______________________
s=n+m;
var o=m; o=1
m=n+m; m=0+1
n=o; n=1
_____________
n=1 m=1
_________________________
var o=m; o=1
m=n+m; m=2
n=o; n=1
n=1 m=2
___________________________
var o=m o=2
m=n+m m=3
n=o n=2
n=2 m=3
______________________
*/
// 斐波那契数列
var n = 0;
var m = 1;
var s = n + m;
var o;
var str = n + "+" + m;
while (m < 100) {
o = m;
m = n + m;
n = o;
s += m;
str += "+" + m;
}
console.log(s, str);
// 求水仙花数 100-999 135=1*1*1+3*3*3+5*5*5
var i = 100;
while (i < 999) {
var a = parseInt(i / 100);
var b = parseInt((i % 100) / 10);
var c = parseInt(i % 10);
if (i === a * a * a + b * b * b + c * c * c) console.log(i);
i++;
}
// 双重循环 循环不能交叉但是可以嵌套
// 需要循环解决多次内容，并且每次执行中也需要循环执行更多内容
// while(n<100){
// while(m<100){
// }
// }
var table1 = document.getElementById("table1");
var row = 1;
var col = 1;
var str = "";
while (row <= 10) {
str += "<tr>";
col = 1;
while (col <= 10) {
str += "<td>" + row + "行" + col + "列</td>";
col++;
}
str += "</tr>";
row++;
}
table1.innerHTML = str;
// var table1=document.getElementById("table1");
// var row=1;
// var col=1;
// var str="";
// while(row<10){
// str+="<tr>";
// col=1;//每次循环后必须重新归位
// while(col<10){
// if(col>row) break;
// str+="<td>"+row+"*"+col+"="+row*col+"</td>";
// col++;
// }
// str+="</tr>";
// row++;
// }
// table1.innerHTML=str;
// var i=0;
// while(i<10){
// console.log(i);
// if(i>4)break;//break 跳出当前循环
// i++;
// }
// 给数组中添加30个不同的随机数
// var arr=[];//设置初始数组
// var n=parseInt(Math.random()*100);//求随机数
// arr.push(n);//给数组尾部添加一个元素
// console.log(arr.length);//数组有多少个元素
var arr = [];
while (arr.length < 30) {
var n = parseInt(Math.random() * 100);
var i = 0;
var flag = true;
while (i < arr.length) {
if (n === arr[i]) flag = false;
i++;
}
arr.push(n);
}
console.log(arr);
var i = 0;
var n;
// 给循环增加别称,可以通过break 别称;跳出指定的循环
xietian: while (i < 10) {
n = 0;
while (n < 10) {
n++;
if (n * i > 70) {
console.log(n, i);
break xietian;
}
}
i++;
console.log("aaa");
}
/* var i=0;
a: while(i<10){
switch(i){
case 5:
console.log("aaa");
break a;
case 6:
console.log("bbb");
break;
}
i++;
}
*/
// continue; 继续
// 如果满足条件,continue后面的语句不继续执行,仍然循环,而break是直接跳出当前循环
/* var i=0;
var n;
while(i<10){
n=0;
while(n<10){
n++;
if(i===5 && n>=5) continue;
console.log(i,n);
}
i++;
} */
/* var i=0;
while(i<10){
if(i===5){
i++;
continue;
}
console.log(i);
i++;
} */
/* var i=0;
while(i<10){
i++;
if(i===5) continue;
console.log(i);
} */
// 0 48
// 9 57
// A 65
// Z 90
// a 97
// z 122
// var str="azAZ09";
// console.log(str.charCodeAt(5));//获取字符串中指定位置的字符的Ascii码
// console.log(String.fromCharCode(97));//将Ascii转换为字符
var i = 48;
while (++i < 123) {
if ((i > 57 && i < 65) || (i > 90 && i < 97)) {
i++;
continue;
}
console.log(String.fromCharCode(i));
}
/* var i=48;
while(i<58){
console.log(String.fromCharCode(i));
i++;
}
i=65;
while(i<91){
console.log(String.fromCharCode(i));
i++;
}
i=97
while(i<123){
console.log(String.fromCharCode(i));
i++;
} */
/* var i=48;
while(i<123){
if(i<58){
console.log(String.fromCharCode(i));
}else if(i>64 && i<91){
console.log(String.fromCharCode(i));
}else if(i>96 && i<123){
console.log(String.fromCharCode(i));
}
i++;
} */
// continue在多个条件中间不进入时使用最为方便
/* var i=48;
while(i<123){
if(i>57 && i<65 || i>90 && i<97){
i++;
continue;
}
console.log(String.fromCharCode(i));
i++;
} */
// 求2-100之间所有的质数
// 只能被1和自身整除的自然整数 叫做质数
// 57 2-56
/* var i=2;
var n;
var flag;
while(i<100){
n=2;
flag=true;
while(n<i){
if(i%n===0){
flag=false;
break;
}
n++;
}
if(flag) console.log(i);
i++;
} */
var i = 2;
var n;
var flag;
while (i < 100) {
n = 2;
flag = true;
while (n < i) {
if (i % n === 0) {
flag = false;
break;
}
n++;
}
if (flag) {
console.log(i);
}
i++;
}
/*
var i=2;
var n;
a: while(i<100){
n=2;
while(n<i){
if(i%n===0){
i++;
continue a;
}
n++;
}
console.log(i);
i++;
} */
// var link={value:1,next:{value:2,next:{value:3,next:{value:4,next:null}}}};
// var o1={value:1};
// var o2={value:2};
// var o3={value:3};
// var o4={value:4};
// o1.next=o2;
// o2.next=o3;
// o3.next=o4;
// o4.next=null;
// console.log(o1,link);
// 广度遍历 深度遍历
// while(link){
// console.log(link.value);
// link=link.next;
// }
// var tree={value:1,left:{value:2,left:{value:3,left:{value:4,left:null,right:null}},right:null},right:null};
// 周六看
// var arr=["a","b","c","d","e"];
// var o={value:1,a:{value:2,b:{value:3,c:{value:4,d:{value:5,e:{value:6}}}}}}
// var i=0;
// while(o){
// console.log(o.value);
// var key=arr[i];
// o=o[key];
// i++;
// }
</script>
</body>
</html>
3.do…while 和 for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 先执行,后判断条件是否继续循环
// do{
// }while(条件);
// var i=0;
// var s=0;
// do{
// s+=i;
// i++;
// }while(i<100);
// console.log(s);
// 当使用do while 尽量规定左侧条件,以根据第一次执行语句块完成后判断是否继续循环
// var i=-1;
// do{
// s+=i;
// i++;
// }while(i<100 && i>=0);
// 适合用于循环条件不确定,并且没有初值
// var s;
// do{
// s=parseInt(Math.random()*100);
// console.log(s,"___________________");
// }while(s<50);
// console.log(s);
// var s1;
// while(true){
// s1=parseInt(Math.random()*100);
// console.log(s1,"___________________");
// if(s1>=50) break;
// }
// console.log(s1);
// for
// var i=0 在循环前仅作1次
// i<10 在循环前判断是否进入循环 ,每次判断
// i++ 在循环语句块执行完成后,下一次循环条件判断之前执行表达式
// for(var i=0;i<10;i++){
// }
// for(var i=0;i<10;i++){
// if(i===5) continue;
// console.log(i);
// }
// for(var i=10;i;i--){
// console.log(i);
// }
// var s=0;
// for(var i=0;i<=100;i++){
// s+=i;
// }
// console.log(s);
// for(var s=0,i=0;i++<100;s+=i,console.log(s));
// console.log(s);
/* for(var i=0,j=0;i++<10;){
j=i;
for(;j++<10;){
}
} */
/* for(;;){
}
while(true){
} */
// var s;
// do{
// s=parseInt(Math.random()*100);
// console.log(s,"___________________");
// }while(s<50);
// console.log(s);
// for(var s;;){
// s=parseInt(Math.random()*100)
// if(s>50)break;
// }
// console.log(s);
// a: for(var i=2,j;i<100;i++){
// for(j=2;j<i;j++){
// if(i%j===0)continue a;
// }
// console.log(i);
// }
var link = {
value: 1,
next: { value: 2, next: { value: 3, next: { value: 4, next: null } } },
};
for (; link; link = link.next) console.log(link.value);
// 纯函数
</script>
</body>
</html>
4.状态处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 50px;
height: 50px;
background-color: #ff0000;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
var div1 = document.getElementById("div1");
// div1.style.left="100px";//设置div1的行内样式
// setInterval(function(){
// console.log("aaa");
// },16)
var x = 0;
var y = 0;
const RIGHT = "right";
const BOTTOM = "bottom";
const LEFT = "left";
const TOP = "top";
var state = "";
state = RIGHT;
setInterval(function () {
switch (state) {
case RIGHT:
x++;
if (x > 300) state = BOTTOM;
break;
case BOTTOM:
y++;
if (y > 300) state = LEFT;
break;
case LEFT:
x--;
if (x <= 0) state = TOP;
break;
case TOP:
y--;
if (y <= 0) state = RIGHT;
break;
}
div1.style.left = x + "px";
div1.style.top = y + "px";
}, 16);
// "#FF0000";
// "#FFFF00";
// "#FF9900";
// "#00FF00";
// "#0000FF";
// "#FF00FF";
// "#FF0099";
// "#00FFFF";
// 红色 绿色 蓝色 (RGBA)
// #FF FF FF FF
// 红色+绿色=黄色
// 蓝色+绿色=靛色
// 蓝色+红色=紫色
// 红 黄 绿 靛 蓝 紫 红
// rgba(255,0,0);
// rgba(255,255,0);
// rgba(0,255,0);
// rgba(0,255,255);
// rgba(0,0,255);
// rgba(255,0,255);
// rgba(255,0,0);
// FF9900 000000黑色
// FFFF00 FFFFFF白色
var r = 255;
var g = 0;
var b = 0;
// div1.style.backgroundColor="rgba("+r+","+g+","+b+",1)";
var state = 0;
setInterval(function () {
switch (state) {
case 0:
g++;
if (g === 255) state = 1;
break;
case 1:
r--;
if (r === 0) state = 2;
break;
case 2:
b++;
if (b === 255) state = 3;
case 3:
g--;
if (g === 0) state = 4;
break;
case 4:
r++;
if (r === 255) state = 5;
break;
case 5:
b--;
if (b === 0) state = 0;
break;
}
div1.style.backgroundColor = "rgba(" + r + "," + g + "," + b + ",1)";
}, 1);
</script>
</body>
</html>
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
