一，效果图。

二，代码。

<!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. java并发机制锁的类型和实现

    synchronized 和 volatile,是最基础的两个锁! volatile是轻量级锁,它在多核处理器开发中保证了共享变量的可见性.即当一个线程修改一个共享变量时,其他线程能够读到这个修改的值 ...

  2. 微信APP支付，支付宝APP支付demo

    最近公司新开发的APP中,需要集成微信支付和支付宝支付,2个平台申请的都是APP支付.这是个人第一次单独的,完整的做完2个平台的支付. 这里我主要用到了2个接口:支付接口,订单查询接口,虽然2个平台的 ...

  3. 向github提交代码不用输入帐号密码

    解决方案:方案一: 在你的用户目录下新建一个文本文件.git-credentials Windows:C:/Users/username Mac OS X: /Users/username Linux ...

  4. Collection 和 Collections；Array与Arrays的区别

    Collection 和 Collections 的区别. Collection 是个 java.util 下的接口 ,它是各种集合结构的父接口.继承与他的接口主要有 Set  和 List. Col ...

  5. JS日期相减得到天数

    废话不多说直奔主题,解决思路核心是时间戳相减  灵感来自于我经常用到一个工具方法:格式化时间,也是用时间戳 function GetNumberOfDays(date1,date2){//获得天数 / ...

  6. vue-manage-system 后台管理系统开发总结

    前言 vue-manage-system,一个基于 Vue.js 和 element-ui 的后台管理系统模板,从2016年年底第一个commit,到现在差不多两年了,GitHub上也有了 5k st ...

  7. 绑定Github上的个人博客到Godaddy域名

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. Go基础系列：struct和嵌套struct

    struct struct定义结构,结构由字段(field)组成,每个field都有所属数据类型,在一个struct中,每个字段名都必须唯一. 说白了就是拿来存储数据的,只不过可自定义化的程度很高,用 ...

  9. VRF在区块链中的应用

    最近区块链领域流行了一种"怪病",许多区块链项目或者设计方案都加入了一个叫做VRFs的算法.那么, (1) 什么是VRFs? (2) VRFs在区块链中解决了什么问题? 本文旨在介 ...

  10. OOP面向对象

    一:什么是面向过程 我们是怎么思考和解决上面的问题呢? 答案是:我们自己的思维一直按照步骤来处理这个问题,这是我们的常规思维,这就是所谓的面向过程POP编程   二:面向过程POP为什么转换为OOP ...