目录
程序三大结构:
一、循环结构
循环结构:根据某些给出的条件,重复的执行同一段代码
三要素:初始值、条件、改变条件的语句
注:必须要有改变条件的语句,否则会成为死循环。
1.while循环
while(条件表达式){
//循环体->循环执行的语句块
}
示例: 使用while循环倒序输出1-5
<script>
//1.初始条件
var num=5
//2.条件判断
while(num>0){
//3.要执行的代码
console.log(num)
//4.自身改变
num--
}
</script>
2.do-while循环
先执行,再进行条件判断
do{
//要执行的代码
}while(条件)
示例:控制台输出“first implement”一次
<script>
var num=10
do{
console.log('first implement');
num++
}while(num<10);
</script>
3.for循环
for(var i=0;i<n;i++){
要执行的代码
}
示例:输出1-10
<script>
for (var i=1;i<=10;i++){
console.log(i)
}
</script>
二、跳转语句
1.break语句:终止循环
break与循环一起使用,在循环没有结束时,因满足设置的条件,提前终止循环。
示例:有五个包子,吃完第三个就饱了,提前结束循环
<script>
/*有五个包子,吃完第三个就饱了,结束*/
for(var i=1;i<=5;i++){
console.log('吃第'+i+'个包子');
if(i==3){
break
}
}
</script>
2.continue语句:结束本次循环
在循环中,把本次的循环跳过去,继续执行后面的循环
示例:有五个包子,吃到第三个掉地上了,接着吃后面的
<script>
/*有五个包子,吃到第三个掉地上了,接着吃后面的*/
var s=0
for(var j=1;j<=5;j++){
if(j==3)
continue
console.log('吃第'+j+'个包子');
s++
}
console.log('一共吃了'+s+'个包子');
</script>
三、计数器
定义一个变量充当计数器功能,初始值为0(不一定,根据题目来),每达到所设条件,就执行一次计数器功能
示例:100以内能被4整除的前五个数
<script>
/*100以内能被4整除的前五个数*/
var count=0 //计数器count
for(var i=0;i<100;i++){
if((i+1)%4 == 0){ //满足条件
console.log(i+1);
count++ //执行计数器累加功能
}
if(count == 5)
break
}
</script>
四、document.write()
document.write('内容'),将结果打印到页面上,而不是控制台
示例:
<script>
document.write('hello world') //显示内容到页面
document.write('<br>') //换行
document.write('<h3>hello world<h3>') //加标签
</script>
五、双重for循环
循环的嵌套:外层循环循环一次,内层要循环完
编程思想:
外层循环 -> 打印行数
内层循环 -> 打印每行元素
关键点:计算每行打印多少个元素,根据外层循环变量直到确定
示例:输出三角形
<body>
<script>
for(var i=0;i<6;i++){
for(var j=0;j<=i;j++){
document.write("*")
}
document.write('<br>')
}
</script>
</body>
打印结果:
六、累加算法
类型诸如:
_ + _ + ... + _ + _
若设i为循环变量,s为前n项累加之和,则程序的基本结构为:
s=0;
for(i=1;i<=n;i++)
s = s + _ ;
示例:
<body>
<script>
var sum=0
var n=1
while(n<101){
sum =sum + n
n++
}
console.log(sum); //sum=5050
</script>
</body>
七、练习
1.九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>九九乘法表</title>
</head>
<body>
<script>
var str=""
for (var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
str += j+"x"+i+"="+(j*i)+"\t";// \t:水平制表(ht) ,跳到下一个tab位置
// document.write(j+"x"+i+"="+(j*i)+'\t')
}
str += "\n"
// document.write("<br/>")
}
console.log(str);
</script>
</body>
</html>
2.1-100的所有偶数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偶数</title>
</head>
<body>
<script>
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
console.log(i);
}
}
</script>
</body>
</html>
结果太长,就不截图了。
3.1-100内7的倍数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>7的倍数</title>
</head>
<body>
<script>
for(var i=1;i<=100;i++){
if(i%7==0){
console.log(i);
}
}
</script>
</body>
</html>
4.20-80之间能被3整除的,输出每5个一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*20-80之间能被3整除的,每五个一行*/
var count=0
for(var i=20;i<=80;i++){
if(i%3 == 0){
document.write(i+' ')
count++
}
// if(count%5 == 0){
// document.write("<br>")
// }
if(count === 5){
document.write("<br>")
count=0
}
}
</script>
</body>
</html>
5.打印菱形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*
n上三角形行数
i行数 空格 星
i n-i 2*i-1
*/
var n=5
for(var i=1;i<=n;i++){
//打印空格
for(var j=1;j<=n-i;j++){
document.write(' ')
}
//打印星
for(var t=1;t<=2*i-1;t++){
document.write('*')
}
document.write('<br>')
}
/*
*1 2*1-1
***3 2*2-1
*****5 2*3-1
*******7 2*4-1
*********9 2*5-1
*******7 2*4-1
*****5 2*3-1
***3 2*2-1
*1 2*1-1
*/
m=4
for(var i=m;i>0;i--){
for(var j=m-i+1;j>=1;j--){
document.write(' ')
}
for(var t=2*i-1;t>0;t--){
document.write('*')
}
document.write('<br>')
}
</script>
</body>
</html>
6.分数求和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var s=0
for(var i=1;i<=100;i++){
if(i%2==0){
s += (-1/i)
}else{
s += 1/i
}
}
document.write("1 - 1/2 + 1/3 - 1/4 + 1/5 ... +1/99 - 1/100的结果为:" + s)
</script>
</body>
</html>
7.50年后的工资
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/*入职薪资10k/月,每年涨幅5%,50年后工资多少?*/
var salary=10000*12
for(var i=1;i<50;i++){
salary += salary*0.05
}
document.write('50年后的工资为' + salary.toFixed(2))
</script>
</body>
</html>