一、引言

本文主要是利用一个例子，讲一下原生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. hnust 土豪金的加密解密

    问题 G: 土豪金的加密与解密 时间限制: 1 Sec  内存限制: 128 MB提交: 466  解决: 263[提交][状态][讨论版] 题目描述     有一位姓金的同学因为买了一部土豪金,从此 ...

  2. 关于C++ STL标准库中map 的多元素应用

    map的特性是,所有的元素会根据键值自动排序.map的所有元素都是pair,同时拥有实值(value)和键值(key).pair的第一个元素被视为键值,第二个被视为实质piar 的定义 templat ...

  3. 导入50G文件到mysql,然后再倒入sqlserver

    --导入大文件50G文件到mysql1.修改配置innodb_flush_log_at_trx_commit=0 2.导入时的注意事项set autocommit=1;show variables l ...

  4. 【转】Map/Reduce简介

    转自:http://blog.csdn.net/opennaive/article/details/7514146 1. MapReduce是干啥的 因为没找到谷歌的示意图,所以我想借用一张Hadoo ...

  5. JS获取屏幕宽度

    document.write("屏幕分辨率为:"+screen.width+"*"+screen.height+"<br />" ...

  6. 用jquery实现平滑的页面滚动效果

    通过几句jquery代码实现页面平滑滚动到某一锚点的效果.实现代码来源于https://css-tricks.com/snippets/jquery/smooth-scrolling 实现的jquer ...

  7. 【HDU 3746 Cyclic Nacklace】

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  8. SQL中的CASE WHEN使用

    原文发布时间为:2010-06-04 -- 来源于本人的百度文章 [由搬家工具导入] SQL的条件语句，条件判断语句，SQL的 if else语句。2009-07-20SQL_中的CASE WHEN使 ...

  9. MVP MVVM MVC

    上一篇得到大家的关注,非常感谢.由于自己对于这些模式的理解也是有限,对于MVC,MVP,MVVM这些模式的比较,是结合自己的理解,一些地方不一定准确,需要的朋友可以参考下 上一篇得到大家的关注,非常感 ...

  10. poi导出excel文件（桃）

    1.基本可以通用的工具类 package com.idcsol.apps.common.excel; import java.io.IOException; import java.io.Output ...