【Django】Javascript(jQuery)を用いてカウントダウンタイマーを設置する

Djangoのサーバーにdatetimeを用意して、フロントのJavascript(jQuery)でカウントダウンタイマーを設置するコードを紹介していきます。

環境

ゴール

フロントで以下のように動作するカウンドダウンタイマーを表示できるようになるまでがゴールです。

コード紹介

早速コードを書いていきます。

sample.html

先ずはフロントのhtmlを作成していきます。

sample.html

<div>
    <p>残り時間　<span id="time_left" data-time-left="{{ time_left }}"></span></p>
</div>

<script src="/static/sample.js"></script>

注視すべきところとしては、data-time-left=”{{ time_left }}”になりますが、これはdjangoのviews側で用意した変数の{{ time_left }}をspanタグ内に格納しておきます。

後ほど紹介する、jQuery側の操作に利用します。

views.py

views.pyの処理としては、現在時刻よりも90分プラスした変数を用意します。

views.py

import datetime
from django.shortcuts import render

def sample(request):
    dt_now = datetime.datetime.now()
    time_left = dt_now + datetime.timedelta(minutes=90)
    strftime_time_left = time_left.time_left_at.strftime('%B %d,%Y %H:%M:%S')
    context = {
    'time_left': strftime_time_left
    }
    return render(request, 'sample.html', context)

90分プラス箇所に関しては、6行目のtimedelta(minutes=90)が意図するコードです。

また、jsによる日付処理をしやすくするために、strftime()で加工も加えます。

sample.js

一番の肝であるjs側の処理を書いていきます。

sample.js

'use strict';

var $time_left = $("#time_left").attr('data-time-left');
var startTime = new Date();
var endTime = new Date($time_left);
var left = endTime - startTime;
var time = 24 * 60 * 60 * 1000;

var hour = Math.floor((left % time) / (60 * 60 * 1000))
var minutes = Math.floor((left % time) / (60 * 1000)) % 60
var second = Math.floor((left % time) / 1000) % 60 % 60

$("#time_left").text(hour + ':' + minutes + ':' + second );
setTimeout('countDown()', 1000);

1. 3行目のattrメソッドを利用してdata-time-leftのvalueを取得します
2. 7行目のvar timeで秒に換算します
3. 9-11行目でそれぞれの時間、分、秒を換算します
4. 13行目で、算出した値をtext()を使って書き換えます

問題なくコードを書くことができれば以下のようにカウントダウンタイマーが動作します。

以上。

最後に

いかがでしたでしょうか。

以上が、「【Django】Javascript(jQuery)を用いてカウントダウンタイマーを設置する」の紹介記事になります。

プログラミング学習を効率良く進めるには…

私ヒロヤンがプログラミングを始めた頃は以下のような感じでした。

そしてネットで調べていくうちに膨大な時間が過ぎていきました。

私ヒロヤンの実体験より、プログラミングを効率的に学ぶために大切なことは以下のことだと考えています。

1. いつまでもダラダラとやらないで、目標を決定して短期集中する

2. マンツーマンで、わからない箇所は直ぐに質問をして即レスをもらう

.proでは私ヒロヤンが学習してきたプログラミング経験0からのpython/django、その他webサイト・サービス開発のコースが用意されています。

カウンセリング自体は無料なので話を聞いてみるだけでもいかがでしょうか？

また以下のリンク先ではdjangoを教えてくれるスクールをまとめ紹介しています。