Melvin的部落格: JavaScript的基本概念(三) & 動畫Animation與時間控制

動畫Animation與時間控制:

說明

動畫的表現方式很多，最基礎的做法便是在一定的時間間隔播放一定張數內容漸變的圖片，因此，在JavaScript中做逐格動畫前必須先掌握"時間"。JavaScript中處理時間有一內建物建Date物件，但Date無法處理"時間的流動"!因此必須用現有的工具自行組合法出時間流動的效果。window物件有兩個函數:(setIniteral、setTimeOut)可以加工出時間的流動。

架構分類:

程式範例如下:

<!DOCTYPE html>

<html lang="en">
   <head>
       <meta charset="utf-8" />
       <title>時間處理</title>

       
       <style>
           #clock{
               width: 500px;
               height: 250px;
               background-color: #000;
               color: #18f023;
               font-size: 100px;
               text-align: center;
               vertical-align: middle;
           }

           #pic{
               width: 200px;
               height: 200px;
           }
       </style>
   </head>
   <body>
       
       鬧鐘時間:<input type="text" id="time" value="請輸入xx:xx:xx" size="50"/>
       <div id="clock"></div>
       <img src="images/combo1.png" id="pic" alt="圖片"/>
       <audio src="sounds/alarm.mp3" id="alarm" preload="auto"></audio>
   </body>
</html>


<script>
   //這是一段裸露的程式(沒有用function包起來,所以會馬上執行!!)
   window.setInterval(function () {
       var date = new Date();//Date型別
       var input = document.getElementById("time");
       var hour = date.getHours().toString();
       var millise = date.getMinutes().toString();
       var second = date.getSeconds().toString();

       /*1.將原本Date型別轉成 String，由長度判斷當等於1時，補0成雙位數*/
       if (hour.length == 1) {
           hour = "0" + hour;
       }
       if (millise.length == 1) {
           millise = "0" + millise;
       }
       if (second.length == 1) {
           second = "0" + second;
       }

       /*2.取得格式化後的系統時間*/
       var div = document.getElementById("clock");
       div.innerHTML = hour + ":" + millise + ":" + second;
       //input.value = hour + ":" + millise + ":" + second;

       /*3.規範16:03:55*/
       //3.1分離出使用者時間
       var user_input = input.value;//使用者輸入，所以為.value
       var user_hms = user_input.split(":");

       //3.2分離出系統時間
       var clock_input = div.innerHTML;//
       var clock_hms = clock_input.split(":");

       /*4.判斷"時分秒"都符合，則按F12顯示log訊息與播放鬧鐘鈴聲*/
       if (user_hms[0] == clock_hms[0] && user_hms[1] == clock_hms[1] && user_hms[2] == clock_hms[2]) {
           ////show
           console.log("時間到!!");
           document.getElementById("alarm").play();

       }

       /*5.取得秒數，動態判斷顯示0~9張圖片*/
       var pic = document.getElementById("pic");
       var imageNunber = window.parseInt(clock_hms[2]);
       imageNunber = imageNunber % 10;

       switch (imageNunber) {
           case 0:
               pic.src = "img/combo0.png";
               break;
           case 1:
               pic.src = "img/combo1.png";
               break;
           case 2:
               pic.src = "img/combo2.png";
               break;
           case 3:
               pic.src = "img/combo3.png";
               break;
           case 4:
               pic.src = "img/combo4.png";
               break;
           case 5:
               pic.src = "img/combo5.png";
               break;
           case 6:
               pic.src = "img/combo6.png";
               break;
           case 7:
               pic.src = "img/combo7.png";
               break;
           case 8:
               pic.src = "img/combo8.png";
               break;
           case 9:
               pic.src = "img/combo9.png";
               break;
           default:
               pic.src = "img/combo0.png";
               break;

       }
   }, 1000);

</script>

呈現效果:

Melvin的部落格

2016年5月25日星期三

JavaScript的基本概念(三) & 動畫Animation與時間控制

沒有留言:

張貼留言

[java] 條件控制

2016年5月25日 星期三

JavaScript的基本概念(三) & 動畫Animation與時間控制

沒有留言:

張貼留言

[java] 條件控制

2016年5月25日星期三