if-else 语句

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>如果小时小于18:00，显示“美好的一天！”：</p>
  7. <p id="demo">晚安</p>
  9. <script>
  10. if (new Date().getHours() < 18) {
  11.   document.getElementById("demo").innerHTML = "美好的一天！";
  12. }
  13. </script>
  15. </body>
  16. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击按钮以显示基于时间的问候语：</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <p id="demo"></p>
  11. <script>
  12. function myFunction() {
  13.   var hour = new Date().getHours(); 
  14.   var greeting;
  15.   if (hour < 18) {
  16.     greeting = "日安";
  17.   } else {
  18.     greeting = "晚安";
  19.   }
  20.   document.getElementById("demo").innerHTML = greeting;
  21. }
  22. </script>
  24. </body>
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>单击按钮以显示基于时间的问候语：</p>
  7. <button onclick="myFunction()">试一试</button>
  9. <p id="demo"></p>
  11. <script>
  12. function myFunction() {
  13.   var greeting;
  14.   var time = new Date().getHours();
  15.   if (time < 10) {
  16.     greeting = "早安";
  17.   } else if (time < 20) {
  18.     greeting = "日安";
  19.   } else {
  20.     greeting = "晚安";
  21.   }
  22.   document.getElementById("demo").innerHTML = greeting;
  23. }
  24. </script>
  26. </body>
  27. </html>

switch

break、default
使用严格比较===

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p id="demo"></p>
  7. <script>
  8. var day;
  9. switch (new Date().getDay()) {
  10.   case 0:
  11.     day = "周日";
  12.     break;
  13.   case 1:
  14.     day = "周一";
  15.     break;
  16.   case 2:
  17.     day = "周二";
  18.     break;
  19.   case 3:
  20.     day = "周三";
  21.     break;
  22.   case 4:
  23.     day = "周四";
  24.     break;
  25.   case 5:
  26.     day = "周五";
  27.     break;
  28.   case  6:
  29.     day = "周六";
  30. }
  31. document.getElementById("demo").innerHTML = "今天是" + day;
  32. </script>
  34. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h2>JavaScript switch</h2>
  7. <p id="demo"></p>
  9. <script>
  10. var text;
  11. switch (new Date().getDay()) {
  12.   case 4:
  13.   case 5:
  14.     text = "周末马上就到了";
  15.     break;
  16.   case 0:
  17.   case 6:
  18.     text = "今天是周末";
  19.     break;
  20.   default:
  21.     text = "期待周末";
  22. }
  23. document.getElementById("demo").innerHTML = text;
  24. </script>
  26. </body>
  27. </html>

loop for

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 循环</h1>
  7. <p id="demo"></p>
  9. <script>
  10. var cars = ["BMW", "Volvo", "porsche", "Ford", "Fiat", "Audi"];
  11. var text = "";
  12. var i;
  13. for (i = 0; i < cars.length; i++) {
  14.   text += cars[i] + "<br>";
  15. }
  16. document.getElementById("demo").innerHTML = text;
  17. </script>
  19. </body>
  20. </html>

for

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 循环</h1>
  7. <p id="demo"></p>
  9. <script>
  10. var text = "";
  11. var i;
  12. for (i = 0; i < 5; i++) {
  13.   text += "The number is " + i + "<br>";
  14. }
  15. document.getElementById("demo").innerHTML = text;
  16. </script>
  18. </body>
  19. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p id="demo"></p>
  7. <script>
  8. var cars = ["BMW", "Volvo", "porsche", "Ford"];
  9. var i, len, text;
  10. for (i = 0, len = cars.length, text = ""; i < len; i++) {
  11.   text += cars[i] + "<br>";
  12. }
  13. document.getElementById("demo").innerHTML = text;
  14. </script>
  16. </body>
  17. </html>

for\in

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 循环</h1>
  7. <p>for/in 语句循环遍历对象的属性。</p>
  9. <p id="demo"></p>
  11. <script>
  12. var txt = "";
  13. var person = {fname:"Bill", lname:"Gates", age:62}; 
  14. var x;
  15. for (x in person) {
  16.   txt += person[x] + " ";
  17. }
  18. document.getElementById("demo").innerHTML = txt;
  19. </script>
  21. </body>
  22. </html>

while

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h2>JavaScript while</h2>
  7. <p id="demo"></p>
  9. <script>
  10. var text = "";
  11. var i = 0;
  12. while (i < 10) {
  13.   text += "<br>数字是 " + i;
  14.   i++;
  15. }
  16. document.getElementById("demo").innerHTML = text;
  17. </script>
  19. </body>
  20. </html>

do/while

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h2>JavaScript do ... while</h2>
  7. <p id="demo"></p>
  9. <script>
  10. var text = ""
  11. var i = 0;
  13. do {
  14.   text += "<br>数字是 " + i;
  15.   i++;
  16. }
  17. while (i < 10);  
  19. document.getElementById("demo").innerHTML = text;
  20. </script>
  22. </body>
  23. </html>

break 和 continue 的区别

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>带 break 的循环</p>
  7. <p id="demo"></p>
  9. <script>
  10. var text = "";
  11. var i;
  12. for (i = 0; i < 10; i++) {
  13.   if (i === 3) { break; }
  14.   text += "数字是 " + i + "<br>";
  15. }
  16. document.getElementById("demo").innerHTML = text;
  17. </script>
  19. </body>
  20. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <p>这个循环在 i=3 时跳过这一步：</p>
  7. <p id="demo"></p>
  9. <script>
  10. var text = "";
  11. var i;
  12. for (i = 0; i < 10; i++) {
  13.   if (i === 3) { continue; }
  14.   text += "数字是 " + i + "<br>";
  15. }
  16. document.getElementById("demo").innerHTML = text;
  17. </script>
  19. </body>

hoop while