一, 效果图.
二, 代码.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- JavaScript while 循环
- </title>
- </head>
- <body>
- <!--while 循环 -->
- <p>
- 点击下面的按钮, 只要 i 小于 5 就一直循环代码块.
- </p>
- <button onclick="myFunction()">
- 点击这里
- </button>
- <p id="demo">
- </p>
- <script>
- function myFunction() {
- var x = "",
- i = 0;
- while (i < 5) {
- x = x + "The number is" + i + "<br>";
- i++;
- }
- document.getElementById("demo").innerHTML = x;
- }
- </script>
- <!--do-while 循环 -->
- <p>
- 点击下面的按钮, 只要 i 小于 5 就一直循环代码块
- </p>
- <button onclick="myFunction()">
- 点击这里
- </button>
- <p id="demo1">
- </p>
- <script>
- function myFunction() {
- var x = "",
- i = 0;
- do {
- x = x + "the number is" + i + "<br>";
- i++;
- } while ( i < 5 ) document.getElementById("demo1").innerHTML = x;
- }
- </script>
- </body>
- </HTML>
参考资料:《菜鸟教程》
来源: http://www.bubuko.com/infodetail-2891911.html