一、引言

本文主要是利用一个例子，讲一下原生js中常用的四种循环方式的使用与区别：

实现效果：

  1. 在网页中弹出框输入0   网页输出“欢迎下次光临”
  2. 在网页中弹出框输入1   网页输出“查询中……”
  3. 在网页中弹出框输入2   网页输出“取款中……”
  4. 在网页中弹出框输入3   网页输出“转账进行中……”
  5. 在网页中弹出框输入其他字符   网页输出“无效按键”

四种循环：

  • for循环
  • while循环
  • for  in 循环
  • for  of 循环

二、for循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>for 循环</title>

 </head>

 <body>

 <script>

    var input=parseInt(prompt("请按键:"));

    for(var i=input;i!=;i++){

      if(i==1){

       document.write("查询中...");

       break;

       }else if(i==2){

       document.write("取款中...");

       break;

       }else if(i==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

    }

    if(input==0){

     document.write("欢迎下次光临！");

     }

 </script>

 </body>

</html>

三、while循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>while 循环</title>

 </head>

 <body>

 <script>

     var input=-1;

     while((input=parseInt(prompt("请按键")))!=){

       if(input==1){

       document.write("查询中...");

       break;

       }else if(input==2){

       document.write("取款中...");

       break;

       }else if(input==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

     }

     if(input==0){

     document.write("欢迎下次光临！");

     }

  </script>

 </body>

</html>

四、for in 循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>for in 循环</title>

 </head>

 <body>

   <script>

      var input=parseInt(prompt("请按键:"));

      var array=new Array();

      array.push(input);

      for(var key in array){

      if(array[key]==0){

       document.write("欢迎下次光临！");

       }else if(array[key]==1){

       document.write("查询中...");

       break;

       }else if(array[key]==2){

       document.write("取款中...");

       break;

       }else if(array[key]==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

      }

    </script>

 </body>

</html>

五、for of循环

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>for of循环</title>

 </head>

 <body>

   <script>

      var input=parseInt(prompt("请按键:"));

      var array=new Array();

      array.push(input);

      for(var val of array){

      if(val==0){

       document.write("欢迎下次光临！");

       }else if(val==1){

       document.write("查询中...");

       break;

       }else if(val==2){

       document.write("取款中...");

       break;

       }else if(val==3){

       document.write("转账进行中...");

       break;

       }else{

       document.write("无效按键");

      }

      break;

      }

   </script>

 </body>

</html>

【温故知新】——原生js中常用的四种循环方式的更多相关文章

  1. iOS中常用的四种数据持久化方法简介

    iOS中常用的四种数据持久化方法简介 iOS中的数据持久化方式,基本上有以下四种:属性列表.对象归档.SQLite3和Core Data 1.属性列表涉及到的主要类:NSUserDefaults,一般 ...

  2. js中this的四种使用方法

    0x00:js中this的四种调用模式 1,方法调用模式 2,函数调用模式 3,构造器调用模式 4,apply.call.bind调用模式 0x01:第一种:方法调用模式 (也就是用.调用的)this ...

  3. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

  4. 原生 js基础常用的判断和循环

    原生 js基础常用的判断和循环 以下部分是个人实践及和搜集的资料: 最常用的if判断语句: if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } 原生js的 ...

  5. 关于原生js中函数的三种角色和jQuery源码解析

    原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...

  6. Java中常用的四种线程池

    在Java中使用线程池,可以用ThreadPoolExecutor的构造函数直接创建出线程池实例,如何使用参见之前的文章Java线程池构造参数详解.不过,在Executors类中,为我们提供了常用线程 ...

  7. Android中Activity的四种启动方式

    谈到Activity的启动方式必须要说的是数据结构中的栈.栈是一种只能从一端进入存储数据的线性表,它以先进后出的原则存储数据,先进入的数据压入栈底,后进入的数据在栈顶.需要读取数据的时候就需要从顶部开 ...

  8. Spring中bean的四种注入方式

    一.前言   最近在复习Spring的相关内容,这篇博客就来记录一下Spring为bean的属性注入值的四种方式.这篇博客主要讲解在xml文件中,如何为bean的属性注入值,最后也会简单提一下使用注解 ...

  9. 读书笔记——spring cloud 中 HystrixCommand的四种执行方式简述

    读了<Spring Cloud 微服务实战>第151-154页, 总结如下: Hystrix存在两种Command,一种是HystrixCommand,另一种是HystrixObserva ...

随机推荐

  1. python 浮点数问题

    为什么 输入:0.2 + 0.1 得到的是:0.30000000000000004???? 0.1 * 3 = 0.30000000000000004????

  2. [python][django学习篇][8]django 视图(2) --简单模板

    在视图函数里返回的是一个 HttpResponse 类的实例,我们给它传入了一个希望显示在用户浏览器上的字符串.但是我们的博客不可能只显示这么一句话,它有可能会显示很长很长的内容.比如我们发布的博客文 ...

  3. Strut 2 ValueStack传送带机制

    源码与jar包下载(将rar改成jar,直接放在WEB_INF\lib目录中即可)    众所周知,Strut 2的Action类通过属性可以获得所有相关的值,如请求参数.Action配置参数.向其他 ...

  4. Hadoop入门第四篇：手动搭建自己的hadoop小集群

    前言 好几天没有更新了,本来是应该先写HDFS的相关内容,但是考虑到HDFS是我们后面所有学习的基础,而我只是简单的了解了一下而已,后面准备好好整理HDFS再写这块.所以大家在阅读这篇文章之前,请先了 ...

  5. Log4j官方文档翻译(二、架构设计)

    log4j遵循层次化架构,每个层都有不同的对象来执行不同的任务.这种层次话的结构灵活设计.易于未来的扩展. log4j框架中有两种对象: 核心对象:框架的支撑对象,是框架必不可少的组成部分. 支撑对象 ...

  6. 解决报错DEFAULT_INCOMPATIBLE_IMPROVEMENTS

    freemarker整合springMVC报错如下:警告: Exception encountered during context initialization - cancelling refre ...

  7. BZOJ4823 [Cqoi2017]老C的方块 【最小割】

    题目 老C是个程序员. 作为一个懒惰的程序员,老C经常在电脑上玩方块游戏消磨时间.游戏被限定在一个由小方格排成的R行C列网格上,如果两个小方格有公共的边,就称它们是相邻的,而且有些相邻的小方格之间的公 ...

  8. 笔记：CS231n+assignment2（作业二）（二）

    一.参数更新策略     1.SGD 也就是随机梯度下降,最简单的更新形式是沿着负梯度方向改变参数(因为梯度指向的是上升方向,但是我们通常希望最小化损失函数).假设有一个参数向量x及其梯度dx,那么最 ...

  9. 安装配置Vim中文帮助文档

    1.home/.vimrc是用户自己的vim配置文件,在这个配置文件中设置的配置只影响该用安装前的准备工作: 在home目录下列新建文件夹  : .vim ------------------> ...

  10. Cannot resolve symbol KeyEventCompat（android.support.v4.view.KeyEventCompat找不到）

    Cannot resolve symbol KeyEventCompat(android.support.v4.view.KeyEventCompat找不到) 解决方案 KeyEventCompat类 ...