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

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

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

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

HTML

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

Q&A

解決済

1回答

465閲覧

[javascriptpt]1日の残り時間を毎秒ごとに表示させたい

beginner230208

総合スコア5

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2023/02/08 03:09

実現したいこと

・1日の残り時間を毎秒ごとに表示させること。

前提

・javascriptの勉強中で、setInterval()やsetTimeout()といったメソッドを使って簡単なアプリを作成中

発生している問題・エラーメッセージ

・ブラウザーに表示されない

該当のソースコード

js

1function countDown(){ 2 var now=new Date(); 3 var tomorrow=new Date(now.getFullYear(),now.getMonth(),now.getDate()+1); 4 var differ=tomorrow.getTime()-now.getTime(); 5 6 var sec=Math.floor(differ/1000)%60; 7 var min=Math.floor(differ/1000/60)%60; 8 var hour=Math.floor(differ/1000/60/60); 9 var nokori=hour+":"+min+":"+sec; 10 11 document.getElementsById("htmlNokori").innerHTML=nokori; 12} 13setInterval(countDown,1000);

該当のソースコード

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイマー</title> 6</head> 7 8<body> 9 <p id="htmlNokori"></p> 10 <script type="text/javascript" src="test.js"></script> 11</body> 12</html>

試したこと

・下記コードの修正したところ、表示されるようになった。

js

1[修正箇所] 2var nokori=hour+":"+min+":"+sec; 3document.getElementsById("htmlNokori").innerHTML=nokori;

js

1[修正後] 2document.getElementById("hour").textContent=String(hour).padStart(2,"0"); 3document.getElementById("min").textContent=String(min).padStart(2,"0") 4document.getElementById("sec").textContent=String(sec).padStart(2,"0")

html

1[修正後] ※元コードの<p id="htmlNokori"></p>を削除 2<span id="hour"></span>時間 3 <span id="min"></span>4 <span id="sec"></span>

補足情報(FW/ツールのバージョンなど)

・1-2週間ぐらい勉強したばかりの初心者です。基本となる土台ができていないため、理解していない部分等が多々あります。また、今回こちらにはじめて質問を投稿したため、不慣れな部分が見受けられると思います。
そのため、質問する際の記載方法や勉強方法などアドバイス頂けますと幸いです。よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

単純に

javascript

1document.getElementsById("htmlNokori").innerHTML=nokori; 2↓↓↓ 3document.getElementById("htmlNokori").innerHTML=nokori;

投稿2023/02/08 03:21

yambejp

総合スコア114372

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

beginner230208

2023/02/08 03:30

早々のご回答まことにありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問