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

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

コンテンツ

環境

・python 3.8

・django 2.2

・jQuery 3.6

ゴール

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

コード紹介

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

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>

<div>

</div>

注視すべきところとしては、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)

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);

'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);

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

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

以上。

最後に

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

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

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

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

何から手をつけていいのか、わからない。
プログラミングを始めてみたけど、エラーが解決できない。

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

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

1. いつまでもダラダラとやらないで、目標を決定して短期集中する
2. マンツーマンで、わからない箇所は直ぐに質問をして即レスをもらう

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

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

.proの無料カウンセリングに進む

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

【現役Djangoエンジニアが推す】Djangoを学べるプログラミングスクール3選

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

環境

ゴール

コード紹介

sample.html

views.py

sample.js

最後に

コメントを残すコメントをキャンセル

管理人

カテゴリー

アーカイブ

環境

ゴール

コード紹介

sample.html

views.py

sample.js

最後に

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Twitter APIの開発者ユーザーのAccessTokenの入手方法

djangoで新規アカウント登録フォーム画面の作り方

【Django】webオンライン決済システムの実装【PAY.JP】

Djangoのフォームにclassを付ける方法

githubで別デバイスでも同一人物で草生やす

【django】モデルのフィールドに登録されたの画像ファイルを削除する

【Python】datetimeのstrftime で0を埋める方法

【Django】お問い合わせフォームを作成する

管理人

カテゴリー

アーカイブ

コメントを残すコメントをキャンセル