第２回　JavaScript→アニメーションで数字を出力

3児の父・SE1のマッチョ！KUROMAME BLOG

おはようございます。KUROMAMEです！

本日も一日頑張りましょう！

本日は数字をアニメーションを使用して出力します。

今回は〇〇した日から現在まで○秒経過した！というのをアニメーションで出力します。

コードは以下の通りです。

「index.js」

var AnniversaryTime = new Date(2015,09,22);
function time(){
   var now = new Date();
   var seconds = (now.getTime()-AnniversaryTime.getTime())/1000;
   document.getElementById('time').innerText=`結婚してから${seconds}秒経過。`;
}
setInterval(time,100);

「index.html」

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="UTF-8" />
   <title>JavaScript の関数</title>
 </head>
 <body>
   <p id="time"></p>
   <script src="index.js"></script>
 </body>
</html>

上記のコードを実装すると、


スクリーンショット 2020-11-17 073431

動画じゃないのでわからないと思いますが(-_-;)

実際に上記コードで試してみてください！面白いです！

このように〇〇してからの秒数が表示されましたね！今回は結婚記念日という記述にしていますが、変更すれば誕生日に「産まれた日」から何秒経過！といったプレゼントや、定年退職する人に「入社してから○秒間会社に貢献しました！」などの贈り物ができますね！

下記コードの太字部分を変更すれば、応用できますのでどうぞ！

「index.js」

var AnniversaryTime = new Date(2015,09,22);
function time(){
var now = new Date();
var seconds = (now.getTime()-AnniversaryTime.getTime())/1000;
document.getElementById('time').innerText=`結婚してから${seconds}秒経過。`;
}
setInterval(time,100);

「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>JavaScript の関数</title>
</head>
<body>
<p id="time"></p>
<script src="index.js"></script>
</body>
</html>


本日はこのくらいで(;^_^A

また次回もお付き合いください

この記事が気に入ったらサポートをしてみませんか？