一，效果图。

二，代码。

<!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>

参考资料：《菜鸟教程》

【代码笔记】Web-JavaScript-javascript while循环的更多相关文章

  1. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  2. WEB前端--JavaScript

    JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...

  3. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  4. JavaScript基础——实现循环

    循环是多次执行同一段代码的一种手段.当你需要在一个数组或对象集上重复执行相同的任务时,这是非常有用的. JavaScript提供执行for和while循环的功能. 1.while循环 JavaScri ...

  5. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  6. Web开发——JavaScript基础

    参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...

  7. JavaScript数组forEach循环

    JavaScript数组forEach循环 今天写JavaScript代码把forEach循环数组忘记写法了,在此记录一下以防止未来忘记. let a = [1, 2, 3]; a.forEach(f ...

  8. [译] JavaScript 的事件循环

    译者注 本译文基本是按原文的意思来翻译,但对于 JavaScript 的事件循环,个人感觉还是 Philip Roberts 的视频讲解更形象些,思路和本文大致相同,不过他把事件表理解为 Web AP ...

  9. JavaScript 中 for 循环

    在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...

  10. 【转】Web Worker javascript多线程编程（一）

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

随机推荐

  1. 《http权威指南》读书笔记11

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  2. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  3. conda添加多个版本的python

    在conda下,新添加一个python环境,如下再添加一个python3.6conda create --name py36 python=3.6然后通过source activate py36来激活 ...

  4. 深入理解Java Stream流水线

    前面我们已经学会如何使用Stream API,用起来真的很爽,但简洁的方法下面似乎隐藏着无尽的秘密,如此强大的API是如何实现的呢?Pipeline是怎么执行的,每次方法调用都会导致一次迭代吗?自动并 ...

  5. 使用docker搭建数据分析环境

    注:早在学习<云计算>这门课之前就已经知道docker,学习这门课时老师还鼓励我们自己尝试一下:但是直到去年年底才有机会尝试,用过之后感觉确实很好用.最近需要部署几个shiny应用,又回顾 ...

  6. eclipse使用maven打包的时候发现静态资源没包含进去

    今天在打包的时候,发现传上去的包里没有配置静态资源. (右键项目--->Run As ---> 8 Maven install  ) 后来发现是因为在pom.xml里没有配置打包静态资源的 ...

  7. 微信分享JS-SDK

    微信JS-SDK,提供给开发者的基于微信内的网页开发工具包 使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微 ...

  8. 微信小程序--帮助选择困难症者

    用户登录小程序成功后,通过传来的code获取openid,后端用的是PHP //获取code值换取openid public function code_weixin(Request $request ...

  9. linux学习基础1

    简介 包含计算机组成,发行.核心思想.主要目录,一些命令ifconfig.echo.tty.startx.export.pwd.history.shutdown.poweroff.reboot.hwc ...

  10. SpringBoot学习(五)-->SpringBoot的核心

    SpringBoot的核心 1.入口类和@SpringBootApplication Spring Boot的项目一般都会有*Application的入口类,入口类中会有main方法,这是一个标准的J ...