一、引言

本文主要是利用一个例子，讲一下原生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. 使用make构建c程序

    1.Targets, Prerequisites, Commands Targets: 大意是生成的可执行文件. Prerequisites: 生成可执行文件的目标文件或C 语言源文件. Target ...

  2. [转]/dev/null 命令用法

    /dev/null :代表空设备文件 :代表重定向到哪里,例如:echo "123" > /home/123.txt 1 :表示stdout标准输出,系统默认值是1,所以&q ...

  3. 2015暑假训练（UVALive 5983 - 5992）线段树离线处理+dp

    A: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=83690#problem/A 题意:N*M的格子,从左上走到右下,要求在每个点的权值 ...

  4. linux开机关机自启动或自关闭服务的方式

    背景 由于迁移部门jira和confluence到linux,需要设置这两个服务在开机或关机时能够自动启动或关闭.这里我就拿配置confluence过程来记录. 方式1:chkconfig 特点:ch ...

  5. jQuery动态显示和隐藏datagrid中的某一列的方法

    在EasyUI中: 1)展示某列的方法:     $('#jgrid').datagrid('showColumn', 'XXX');  -----其中 XXX 是隐藏列的  field 属性值 2) ...

  6. 一些NGINX配置

    一些nginx配置 使用独立目录, 然后include具体配置 gzip on for multi processers static file cache proxy pass 静态目录 or 文件 ...

  7. [转]jQuery中attr() 和 val() 的区别

    [转](http://www.codeproject.com/Tips/780652/Difference-between-attr-and-val-in-jQuery)

  8. cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element 'mongo:mongo-client'.

    cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration can be found for element ...

  9. Start state is missing. Add at least one state to the flow

    springmvc配置过程中,会配置数据库文件,比如说如下文件:这个时候可能会出现“Start state is missing. Add at least one state to the flow ...

  10. cocoapods的安装使用

    本文非原创,只是看了别人的教程,自己做了下笔记 转载cocoapods其他详细教程 mac快速安装 由于天朝的那堵墙的阻挡,我们需要用taobao的镜像 以下操作在终端进行 gem sources - ...