【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】Javascript(jQuery)を用いてカウントダウンタイマーを設置する

環境

ゴール

コード紹介

sample.html

views.py

sample.js

最後に

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

管理人

カテゴリー

アーカイブ

環境

ゴール

コード紹介

sample.html

views.py

sample.js

最後に

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

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

Seleniumとchromedriverでブラウザの自動操作を行い、ス…

【django】フォームでクリックされた任意のボタンをview側で処理す…

VSCodeでdjango(Python)をデバッグ、及びステップ実行する

Macでtreeコマンドをインストールして実行するまで【ディレクトリ構造】

【javaScript+jQuery】プレビュー画面の表示

pythonでYouTubeAPIから動画を検索する

【django】makemigrationsとmigrateの違い

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

管理人

カテゴリー

アーカイブ

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