前端设计

    主页 > 前端设计 > js入门实例100：JavaScript的if else条件语句

js入门实例100：JavaScript的if else条件语句

2013-06-08

家好，学习之家—菜鸟变高手（http://www.xxzj51.com）的js实例100又和你网页了，很多语言一样js中也设有判断语句。if else，下面先说一样js中的条件语句的使用方法。

一、条件语句

在您编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。

在 JavaScript 中，我们可以使用下面几种条件语句：

if 语句
在一个指定的条件成立时执行代码。
if...else 语句
在指定的条件成立时执行代码，当条件不成立时执行另外的代码。
if...else if....else 语句
使用这个语句可以选择执行若干块代码中的一个。
switch 语句
使用这个语句可以选择执行若干块代码中的一个。

二，使用语法

1、if语句

如果希望指定的条件成立时执行代码，就可以使用这个语句。

语法：

  1. if (条件)  
  2. {  
  3. 条件成立时执行代码  
  4. } 

注意：注意：请使用小写字母。使用大写的 IF 会出错！

实例1：

  1. <script type="text/javascript"> 
  2. //Write a "Good morning" greeting if  
  3. //the time is less than 10  
  4. var d=new Date()  
  5. var time=d.getHours()  
  6. if (time<10)   
  7. {  
  8. document.write("<b>Good morning</b>")  
  9. }  
  10. </script> 

实例2：

  1. <script type="text/javascript"> 
  2. //Write "Lunch-time!" if the time is 11  
  3. var d=new Date()  
  4. var time=d.getHours()  
  5. if (time==11)   
  6. {  
  7. document.write("<b>Lunch-time!</b>")  
  8. }  
  9. </script> 

 

 

实例3:嵌入html页面中

  1. <html> 
  2. <body> 
  3. <script type="text/javascript"> 
  4. var d = new Date()  
  5. var time = d.getHours()  
  6. if (time < 10)   
  7. {  
  8. document.write("<b>早安</b>")  
  9. }  
  10. </script> 
  11. <p>本例演示 If 语句。</p> 
  12. <p>如果浏览器时间小于 10，那么会向您问“欢迎来到‘学习之家—菜鸟变高手’”。</p> 
  13. </body> 
  14. </html> 

2、if else 语句

如果希望条件成立时执行一段代码，而条件不成立时执行另一段代码，那么可以使用 if....else 语句。

语法：

  1. if (条件)  
  2. {  
  3. 条件成立时执行此代码  
  4. }  
  5. else  
  6. {  
  7. 条件不成立时执行此代码  
  8. }  

 实例1：

  1. <script type="text/javascript"> 
  2. //If the time is less than 10,  
  3. //you will get a "Good morning" greeting.  
  4. //Otherwise you will get a "Good day" greeting.  
  5. var d = new Date()  
  6. var time = d.getHours()  
  7. if (time < 10)   
  8. {  
  9. document.write("Good morning!")  
  10. }  
  11. else  
  12. {  
  13. document.write("Good day!")  
  14. }  
  15. </script> 

实例2：嵌入html页面中

  1. <html> 
  2. <body> 
  3. <script type="text/javascript"> 
  4. var d = new Date()  
  5. var time = d.getHours()  
  6. if (time < 10)   
  7. {  
  8. document.write("<b>早安</b>")  
  9. }  
  10. else  
  11. {  
  12. document.write("<b>欢迎来到学习之家—菜鸟变高手</b>")  
  13. }  
  14. </script> 
  15. <p>本例演示 If...Else 语句。</p> 
  16. <p>如果浏览器时间小于 10，那么会向您问“早安”，否则会向您问候“欢迎来到学习之家—菜鸟变高手”。</p> 
  17. </body> 
  18. </html> 

3、If...else if...else 语句

当需要选择多套代码中的一套来运行时，请使用 if....else if...else 语句。

语法：

  1. if (条件1)  
  2. {  
  3. 条件1成立时执行代码  
  4. }  
  5. else if (条件2)  
  6. {  
  7. 条件2成立时执行代码  
  8. }  
  9. else  
  10. {  
  11. 条件1和条件2均不成立时执行代码  
  12. }  

实例1：

  1. <script type="text/javascript"> 
  2. var d = new Date()  
  3. var time = d.getHours()  
  4. if (time<10)  
  5. {  
  6. document.write("<b>Good morning</b>")  
  7. }  
  8. else if (time>10 && time<16)  
  9. {  
  10. document.write("<b>Good day</b>")  
  11. }  
  12. else  
  13. {  
  14. document.write("<b>Hello World!</b>")  
  15. }  
  16. </script 

实例2：嵌入html页面实例

  1. <html> 
  2. <body> 
  3. <script type="text/javascript"> 
  4. var d = new Date()  
  5. var time = d.getHours()  
  6. if (time<10)  
  7. {  
  8. document.write("<b>Good morning</b>")  
  9. }  
  10. else if (time>=10 && time<16)  
  11. {  
  12. document.write("<b>Good day</b>")  
  13. }  
  14. else  
  15. {  
  16. document.write("<b>Hello World!</b>")  
  17. }  
  18. </script> 
  19. <p>本例演示 if..else if...else 语句。</p> 
  20. </body> 
  21. </html> 

4、Switch 语句

如果希望选择执行若干代码块中的一个，你可以使用 switch 语句：

语法：

  1. switch(n)  
  2.    {  
  3.    case 1:  
  4.      执行代码块 1  
  5.      break  
  6.    case 2:  
  7.      执行代码块 2  
  8.      break  
  9.    default:  
  10.      如果n即不是1也不是2，则执行此代码  
  11.    }  

工作原理：switch 后面的 (n) 可以是表达式，也可以（并通常）是变量。然后表达式中的值会与 case 中的数字作比较，如果与某个 case 相匹配，那么其后的代码就会被执行。break 的作用是防止代码自动执行到下一行。

实例1：

  1. <script type="text/javascript"> 
  2. //You will receive a different greeting based  
  3. //on what day it is. Note that Sunday=0,  
  4. //Monday=1, Tuesday=2, etc.  
  5.  
  6. var d=new Date()  
  7. theDay=d.getDay()  
  8.  
  9. switch (theDay)  
  10.    {  
  11.    case 5:  
  12.      document.write("Finally Friday")  
  13.      break  
  14.    case 6:  
  15.      document.write("Super Saturday")  
  16.      break  
  17.    case 0:  
  18.      document.write("Sleepy Sunday")  
  19.      break  
  20.    default:  
  21.      document.write("I＇m looking forward to this weekend!")  
  22. }  
  23. </script> 

实例2：嵌入页面中

  1. <html> 
  2. <body> 
  3. <script type="text/javascript"> 
  4. var d = new Date()  
  5. theDay=d.getDay()  
  6. switch (theDay)  
  7. {  
  8. case 5:  
  9.   document.write("<b>Finally Friday</b>")  
  10.   break  
  11. case 6:  
  12.   document.write("<b>Super Saturday</b>")  
  13.   break  
  14. case 0:  
  15.   document.write("<b>Sleepy Sunday</b>")  
  16.   break  
  17. default:  
  18.   document.write("<b>I＇m really looking forward to this weekend!</b>")  
  19. }  
  20. </script> 
  21.  
  22. <p>This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p> 
  23.  
  24. </body> 
  25. </html> 

新闻资讯

最新资讯

最新案例

响应式的钢铁销售公司网站 响应式的钢铁销售公司网站
响应式房屋建筑工业网站 响应式房屋建筑工业网站
电子产品企业 电子产品企业
科技公司2 科技公司2

关于我们

新闻资讯

客户案例

产品展示

关注公众号

小程序