码迷,mamicode.com
首页 > Web开发 > 详细

【学习笔记】——原生js中常用的四种循环方式

时间:2017-09-27 18:58:11      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:document   font   author   gen   rom   rds   editplus   nbsp   array   

一、引言

本文主要是利用一个例子,讲一下原生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!=0;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("请按键")))!=0){
       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中常用的四种循环方式

标签:document   font   author   gen   rom   rds   editplus   nbsp   array   

原文地址:http://www.cnblogs.com/ljq66/p/7602968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!