10/3 (彈跳式視窗,倒數計時器,循環倒數計時器)

1.alert(彈跳式提醒視窗)  學習網址: https://www.w3schools.com/jsref/met_win_alert.asp 

   語法:
      (1):<button onclick="myFunction()">Try it</button>

           <script>
             function myFunction() { alert("Hello! I am an alert box!");}
           </script>
      (2):function myFunction() {alert("Hello\nHow are you?");}

           //  \n代表換行
      (3):function myFunction() {alert(location.hostname);}
         
          // 顯示url

2.setTimeout(倒數計時器) 學習網址:https://www.w3schools.com/jsref/met_win_settimeout.asp

   語法:<button onclick="myFunction()">Try it</button>

            <script>
               function myFunction() {
               setTimeout(function(){ alert("Hello"); }, 3000);   //注意單位是千分之一秒
                }
            </script>

3.setInterval(循環倒數計時器) 學習網址:https://www.w3schools.com/jsref/met_win_setinterval.asp

   語法:<button onclick="myFunction()">Try it</button>

            <script>
             function myFunction() {
             setInterval(function(){ alert("Hello"); }, 3000);
             }
            </script>


4.clearTimeout(清除循環的倒數計時器)
學習網址: https://www.w3schools.com/jsref/met_win_clearinterval.asp

語法:<button onclick="myStopFunction()">Stop time</button>

         <script>
         var myVar = setInterval(myTimer, 1000);

         function myTimer() {
         var d = new Date();
         var t = d.toLocaleTimeString();
         document.getElementById("demo").innerHTML = t;
         }

         function myStopFunction() {
         clearInterval(myVar);
          }
        </script>





作業網址:https://jsfiddle.net/user/MISHomework4107029035/fiddles/





沒有留言:

張貼留言

Pages