質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

カウントダウンタイマーにミリ秒を表示させたい

bakio
bakio

総合スコア21

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

0クリップ

2934閲覧

投稿2020/05/11 01:33

編集2020/05/11 02:14

サイトが表示されてから15分のカウントダウンタイマーを作成したのですが秒の1つ下のミリ秒を表示させたいです。

こちらのサイトをもとに内容を15分にして作成しました。
Simple.Timer 

html

<div class="timer" data-minutes-left=15></div>

css

.timer, .timer-done, .timer-loop { font-size: 12vw; color: #FFF484; font-weight: bold; position: relative; top: 7vw; left: 42vw; width: 100%; } .jst-hours { float: left; } .jst-minutes { float: left; } .jst-seconds { float: left; } .jst-milliseconds { float: left; } .jst-clearDiv { clear: both; } .jst-timeout { color: red; }

jQuery

(function (factory) { // Using as a CommonJS module if(typeof module === "object" && typeof module.exports === "object") { // jQuery must be provided as argument when used // as a CommonJS module. // // For example: // let $ = require("jquery"); // require("jquery-simple-timer")($); module.exports = function(jq) { factory(jq, window, document); } } else { // Using as script tag // // For example: // <script src="jquery.simple.timer.js"></script> factory(jQuery, window, document); } }(function($, window, document, undefined) { // Polyfill new JS features for older browser Number.isFinite = Number.isFinite || function(value) { return typeof value === 'number' && isFinite(value); } var timer; var Timer = function(targetElement){ this._options = {}; this.targetElement = targetElement; return this; }; Timer.start = function(userOptions, targetElement){ timer = new Timer(targetElement); mergeOptions(timer, userOptions); return timer.start(userOptions); }; // Writes to `this._options` object so that other // functions can access it without having to // pass this object as argument multiple times. function mergeOptions(timer, opts) { opts = opts || {}; // Element that will be created for hours, minutes, and seconds. timer._options.elementContainer = opts.elementContainer || 'div'; var classNames = opts.classNames || {}; timer._options.classNameSeconds = classNames.seconds || 'jst-seconds' , timer._options.classNameMinutes = classNames.minutes || 'jst-minutes' , timer._options.classNameHours = classNames.hours || 'jst-hours' , timer._options.classNameClearDiv = classNames.clearDiv || 'jst-clearDiv' , timer._options.classNameTimeout = classNames.timeout || 'jst-timeout'; } Timer.prototype.start = function(options) { var that = this; var createSubElements = function(timerBoxElement){ var seconds = document.createElement(that._options.elementContainer); seconds.className = that._options.classNameSeconds; var minutes = document.createElement(that._options.elementContainer); minutes.className = that._options.classNameMinutes; var hours = document.createElement(that._options.elementContainer); hours.className = that._options.classNameHours; var clearElement = document.createElement(that._options.elementContainer); clearElement.className = that._options.classNameClearDiv; return timerBoxElement. append(hours). append(minutes). append(seconds). append(clearElement); }; this.targetElement.each(function(_index, timerBox) { var that = this; var timerBoxElement = $(timerBox); var cssClassSnapshot = timerBoxElement.attr('class'); timerBoxElement.on('complete', function() { clearInterval(timerBoxElement.intervalId); }); timerBoxElement.on('complete', function() { timerBoxElement.onComplete(timerBoxElement); }); timerBoxElement.on('complete', function(){ timerBoxElement.addClass(that._options.classNameTimeout); }); timerBoxElement.on('complete', function(){ if(options && options.loop === true) { timer.resetTimer(timerBoxElement, options, cssClassSnapshot); } }); timerBoxElement.on('pause', function() { clearInterval(timerBoxElement.intervalId); timerBoxElement.paused = true; }); timerBoxElement.on('resume', function() { timerBoxElement.paused = false; const secondsLeft = timerBoxElement.data('timeLeft'); const onComplete = timerBoxElement.onComplete; that.startCountdown(timerBoxElement, { secondsLeft, onComplete }); }); createSubElements(timerBoxElement); return this.startCountdown(timerBoxElement, options); }.bind(this)); }; /** * Resets timer and add css class 'loop' to indicate the timer is in a loop. * $timerBox {jQuery object} - The timer element * options {object} - The options for the timer * css - The original css of the element */ Timer.prototype.resetTimer = function($timerBox, options, css) { var interval = 0; if(options.loopInterval) { interval = parseInt(options.loopInterval, 10) * 1000; } setTimeout(function() { $timerBox.trigger('reset'); $timerBox.attr('class', css + ' loop'); timer.startCountdown($timerBox, options); }, interval); } Timer.prototype.fetchSecondsLeft = function(element){ var secondsLeft = element.data('seconds-left'); var minutesLeft = element.data('minutes-left'); if(Number.isFinite(secondsLeft)){ return parseInt(secondsLeft, 10); } else if(Number.isFinite(minutesLeft)) { return parseFloat(minutesLeft) * 60; }else { throw 'Missing time data'; } }; Timer.prototype.startCountdown = function(element, options) { options = options || {}; var intervalId = null; var defaultComplete = function(){ clearInterval(intervalId); return this.clearTimer(element); }.bind(this); element.onComplete = options.onComplete || defaultComplete; element.allowPause = options.allowPause || false; if(element.allowPause){ element.on('click', function() { if(element.paused){ element.trigger('resume'); }else{ element.trigger('pause'); } }); } var secondsLeft = options.secondsLeft || this.fetchSecondsLeft(element); var refreshRate = options.refreshRate || 1000; var endTime = secondsLeft + this.currentTime(); var timeLeft = endTime - this.currentTime(); this.setFinalValue(this.formatTimeLeft(timeLeft), element); intervalId = setInterval((function() { timeLeft = endTime - this.currentTime(); // When timer has been idle and only resumed past timeout, // then we immediatelly complete the timer. if(timeLeft < 0 ){ timeLeft = 0; } element.data('timeLeft', timeLeft); this.setFinalValue(this.formatTimeLeft(timeLeft), element); }.bind(this)), refreshRate); element.intervalId = intervalId; }; Timer.prototype.clearTimer = function(element){ element.find('.jst-seconds').text('00'); element.find('.jst-minutes').text('00:'); element.find('.jst-hours').text('00:'); }; Timer.prototype.currentTime = function() { return Math.round((new Date()).getTime() / 1000); }; Timer.prototype.formatTimeLeft = function(timeLeft) { var lpad = function(n, width) { width = width || 2; n = n + ''; var padded = null; if (n.length >= width) { padded = n; } else { padded = Array(width - n.length + 1).join(0) + n; } return padded; }; var hours = Math.floor(timeLeft / 3600); timeLeft -= hours * 3600; var minutes = Math.floor(timeLeft / 60); timeLeft -= minutes * 60; var seconds = parseInt(timeLeft % 60, 10); if (+hours === 0 && +minutes === 0 && +seconds === 0) { return []; } else { return [lpad(hours), lpad(minutes), lpad(seconds)]; } }; Timer.prototype.setFinalValue = function(finalValues, element) { if(finalValues.length === 0){ this.clearTimer(element); element.trigger('complete'); return false; } element.find('.' + this._options.classNameSeconds).text(finalValues.pop()); element.find('.' + this._options.classNameMinutes).text(finalValues.pop() + ':'); element.find('.' + this._options.classNameHours).text(finalValues.pop() + ':'); }; $.fn.startTimer = function(options) { this.TimerObject = Timer; Timer.start(options, this); return this; }; }));

この状態だと一番小さい単位だと秒まではわかるんですがその下のミリ秒が表示されず、
millisecond などのワードを追加しても表示されませんでした。

こちらわかる方いらっしゃいましたら助けて欲しいです。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kei344

2020/05/11 02:01

提示されたコードの出典(公式URL)を質問文に追記してください。
kei344

2020/05/11 02:06

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。
bakio

2020/05/11 02:11

ご教示いただきありがとうございます。そう致します。
kei344

2020/05/11 02:30

そもそもミリ秒を表示する機能の無いコードですが、出典のコードから何を変更されたのでしょう。
bakio

2020/05/11 02:33

javascriptは変更していません。 変更したのはHTML内の data-minutes-left=15 の15という数字とCSSのレイアウト程度です。 こちらのコードではそもそもミリ秒は不可能なんでしょうか。
kei344

2020/05/11 02:36

> こちらのコードではそもそもミリ秒は不可能なんでしょうか。 はい、このコードはミリ秒を表示するようにはできていません。少しの改造程度ではミリ秒を表示することは難しいです。
bakio

2020/05/11 02:37

かしこまりました。別の方法でやってみます

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。