HTML5+CSS3+JavaScript从入门到精通
作者：王征，李晓波
第十四章 Javascript编程的循环结构
案例
14-01 利用while循环显示100以内的自然数
<!DOCTYPE html>
<!--web14-01-->
<html>
<head>
<meta charset="utf-8" />
<title>利用while循环显示100以内的自然数</title>
</head>
<body>
<h3 align="center">利用while循环显示100以内的自然数</h3>
<hr />
<script type="text/javascript">
var i = 1;
while (i <= 100)
{
document.write("    ", i);
if (i % 10 == 0)
{
document.write("<br>");
}
i++;
}
</script>
</body>
</html>
复制
14-02 随机产生10个随机数，并显示最大的数
<!DOCTYPE html>
<!--web14-02-->
<html>
<head>
<meta charset="utf-8" />
<title>随机产生10个随机数，并显示最大的数</title>
</head>
<body>
<h3 align="center">随机产生10个随机数，并显示最大的数</h3>
<hr />
<script type="text/javascript">
var max=0, a, i=0;
while (i < 10)
{
i++;
a = Math.floor(Math.random() * 1000 + 1);
document.write("第", i, "个随机数是", a, "<br>");
max = max > a ? max : a;
}
document.write("<br>随机数中，最大数为:", max);
</script>
</body>
</html> 复制
14-03 猴子吃桃问题
<!DOCTYPE html>
<!--web14-03-->
<html>
<head>
<meta charset="utf-8" />
<title>猴子吃桃问题</title>
</head>
<body>
<h3 align="center">猴子吃桃问题</h3>
<hr />
<script type="text/javascript">
//每次吃剩下的一半，再多一个；到第10天早上想吃时，只剩下一个桃子；
var day = 9, x = 1;
document.write("第10天桃子的数量是：", x, "个<br>");
while (day > 0)
{
x = (x + 1) * 2
document.write("第", day, "天剩桃子 [", x, "]个<br>");
day--;
}
</script>
</body>
</html> 复制
14-04 计算1+2+3+...+100的和
<!DOCTYPE html>
<!--web14-04-->
<html>
<head>
<meta charset="utf-8" />
<title>计算1+2+3+...+100的和</title>
</head>
<body>
<h3 align="center">计算1+2+3+...+100的和</h3>
<hr />
<script type="text/javascript">
var i = 1, sum = 0;
do {
sum += i;
i++
} while (i < 101);
document.write("1+2+3+...+100 = ", sum);
</script>
</body>
</html> 复制
14-05 阶乘求和
</html>
<!DOCTYPE html>
<!--web14-05-->
<html>
<head>
<meta charset="utf-8" />
<title>阶乘求和</title>
</head>
<body>
<h3 align="center">阶乘求和</h3>
<hr />
<script type="text/javascript">
//var i = 1, sum = 0;
//do {
// var j = i, b = 1;
// while (j>1)
// {
// b *= j;
// j--;
// }
// document.write(i, "的阶乘是： ", b, "<br>");
// sum += b;
// i++;
//} while (i < 11);
//document.write("<hr><br>累积阶乘和为： ", sum);
var n = 0, t = 1, s = 0; //书本的这个思路比较好~
do {
n = n + 1;
t = t * n;
document.write(n, "的阶乘是： ", t, "<br>");
s = s + t;
} while (n < 10);
document.write("<hr><br>1!+2!+3!+...+10! = ： ", s);
</script>
</body>
</html> 复制
14-06 利用for循环显示100之内的偶数
<!DOCTYPE html>
<!--web14-06-->
<html>
<head>
<meta charset="utf-8" />
<title>利用for循环显示100之内的偶数</title>
</head>
<body>
<h3 align="center">利用for循环显示100之内的偶数</h3>
<hr />
<script type="text/javascript">
var i;
for (i = 1; i < 101; i++)
{
if (i % 2 == 0)
document.write(i, "    ");
if (i % 20 == 0)
document.write("<br>");
}
</script>
</body>
</html> 复制
14-07 小球反弹的高度
<!DOCTYPE html>
<!--web14-07-->
<html>
<head>
<meta charset="utf-8" />
<title>小球反弹的高度</title>
</head>
<body>
<h3 align="center">小球反弹的高度</h3>
<hr />
<script type="text/javascript">
var i, sum = 0, high = 300;
for (i = 1; i <= 15; i++)
{
sum += high + high / 2;
high = high / 2;
document.write("第", i, "次的反弹高度为：", high, "<br>");
}
document.write("<hr><br>15次后，反弹的总高度为：", sum);
//两个的逻辑思维不一样，上面的算法，多了一个第15次反弹时的高度和；
//下面的是第15次弹到地上就没算了，上面的算法是第15次弹到地上后起来的那部分也算进去了。
//var i, sum = 300, high = 300;
//for (i = 2; i <= 15; i++)
//{
// high = high / 2;
// sum += 2*high;
// document.write("第", i, "次的反弹高度为：", high, "<br>");
//}
//document.write("<hr><br>15次后，反弹的总高度为：", sum);
</script>
</body>
</html> 复制
14-08 for...in语句
<!DOCTYPE html>
<!--web14-08-->
<html>
<head>
<meta charset="utf-8" />
<title>for...in语句</title>
</head>
<body>
<h3 align="center">for...in语句</h3>
<hr />
<script type="text/javascript">
var x;
var mycars = new Array();//定义一个数组
mycars[0] = "张平";
mycars[1] = "李亮";
mycars[2] = "周涛";
mycars[3] = "赵杰";
mycars[4] = "李红波";
mycars[5] = "王可儿";
for (x in mycars)
{
document.write(mycars[x] + "<br>");
}
</script>
</body>
</html> 复制
14-09 九九乘法表
<!DOCTYPE html>
<!--web14-09-->
<html>
<head>
<meta charset="utf-8" />
<title>九九乘法表</title>
</head>
<body>
<h3 align="center">九九乘法表</h3>
<hr />
<script type="text/javascript">
for (i = 1; i < 10; i++)
{
for (j = 1; j <= i; j++)
{
document.write(j, "*", i, "=", i*j, "    ");
}
document.write("<br>");
}
</script>
</body>
</html>
复制
14-10 分解质因数
<!DOCTYPE html>
<!--web14-10-->
<html>
<head>
<meta charset="utf-8" />
<title>分解质因数</title>
</head>
<body>
<h3 align="center">分解质因数</h3>
<hr />
<script type="text/javascript">
//var num;
//num = parseInt(prompt("请输入一个合数", ""));
//document.write(num, "=");
//for (i = 2; i < num; i++)
//{
// if (num % i == 0)
// {
// document.write(i + "*");
// num = num / i;
// i = 2;
// }
//}
//document.write(num+"<br><hr>");
var i, n;
n = parseInt(prompt("请输入一个合数", ""));
document.write("合数分解质因数是：", n, "=");
for (i = 2; i <= n; i++)
{
while (n % i == 0) {
document.write(i);
n /= i;
if (n != 1)
document.write("*");
}
}
</script>
</body>
</html>
复制
14-11 绘制"#"号的菱形
14-12、14-13 省略
<!DOCTYPE html>
<!--web14-11-->
<!--web14-12_省略-->
<!--web14-13_省略-->
<html>
<head>
<meta charset="utf-8" />
<title>绘制"#"号的菱形</title>
</head>
<body>
<h3 align="center">绘制"#"号的菱形</h3>
<h3 align="center">12_杨辉三角_省略</h3>
<h3 align="center">13_弗洛伊德三角形_省略</h3>
<hr />
<script type="text/javascript">
//var num = 10;
//for (i = 0; i<10; i++ )
//{
// for (j = 0; j < 21; j++)
// {
// if (j < (num - i) || j > (num + i)) {
// document.write("  "); //要两个 ，否则#对不齐
// }
// else {
// document.write("#");
// }
// }
// document.write("<br>");
//}
//for (i = 10; i < 20; i++) {
// var m = (i - num + 1);
// for (j = 0; j < 21; j++) {
// if (j < m || j > (21-m)) {
// document.write("  ");
// }
// else {
// document.write("#");
// }
// }
// document.write("<br>");
//}
var i, j, k;
//绘制菱形的上半部分，利用i控制显示?的行数
for (i = 0; i <= 10; i++)
{
//利用j控制显示每行空格的个数
for (j = 0; j <= 9 - i; j++)
document.write("  ");
//利用k控制显示每行#的个数
for (k = 0; k <= 2 * i; k++)
document.write("#");
document.write("<br>");
}
//同理，利用for嵌套绘制菱形的下半部分
for (i = 0; i <= 9; i++)
{
for (j = 0; j <= i; j++)
document.write("  ");
for (k = 0; k <= 18 - 2 * i; k++)
document.write("#");
document.write("<br>");
}
</script>
</body>
</html>
复制