Go to Qiita Advent Calendar 2024 Top
LoginSignup
NetaNeta0620
@NetaNeta0620 (オオトカゲ コモド)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JSで秒×秒給を毎秒innerHTMLで表示させる際に金額の「 , 」をつけたい

Q&A

JavaScript初心者

解決したいこと

現在JavaScriptでスタートを押した時間からストップを押した時間の間、画面に秒×秒給を表示するプログラムを作成しています。
秒×秒給を毎秒画面表示させる際に「 1,000 」のように金額の区切りにカンマを入れたいです。

つまっている内容

main.js
setInterval(salaryTimer, 1);

milli = now.getTime() - start.getTime();
centi = Math.floor(milli / TEN_DIV);
seconds = Math.floor(centi / HUNDRED_DIV);

second_salary = 1113 / 60 / 60 //時給を60, 60で割って秒給を算出

document.getElementById('salary').innerHTML = Math.round((seconds * second_salary) * RESULT_CONT) / RESULT_CONT;

上記コードが秒給を表示させるコードの抜粋版です。

これを表示する金額が、1000円を超えた場合には「1000」と表示させるのではなく「1,000」と表示させるような形にしたいと考えております。

自分で試したこと

金額を000 ,000 ,000とカンマで分けて、

,999までをhundred_digitという変数に格納
,999 ,000までをhundredThousand_digitという変数に格納
999, 000 ,000までをhundredMillion_digitという変数に格納

としてそれぞれ、999までカウントして次の桁になったら、000に数字を戻し、
次の桁の変数に数字を渡して

innerHTML = hundredMillion_digit + ',' + hundredThousand_digit + ',' + hundred_digit;

というような形で対応しようとしたのですが、999まで格納して次の桁になったら次の桁から始まる変数に値を代入する方法がわからずに迷っているところです。

seconds = seconds - minutes * 60; //５９秒まで行ったら次は００秒にする（桁の繰り上げ）
minutes = minutes - hours * 60; //５９分まで行ったら次は００分にする（桁の繰り上げ）

上記のようなイメージで対応しようとしていたのですが、結果どう計算したら実現できるのかわからなくなってしまった状態です。

最後まで読んでいただき誠にありがとうございます。
わかります方がいらっしゃいましたら教えていただけると助かります。

0

3Answer

myr
@myr

「秒ごとの給料の計算」と「カンマで区切る処理」を同時にやろうとしているため複雑になっているのだと思います。
まずは一旦「秒ごとの給料の計算」に絞ってコードを書いてみましょう。

const salaryPerSecond = 1234;
let salary = 0;
let second = 0;

setInterval(function() {
    second++;
    salary = salaryPerSecond * second;

    document.getElementById('salary').innerHTML = salary;
}, 1000);

分かりやすく書くとこのようになります。

次に「カンマで区切って表示する」ことを実現します。
こちらはJS標準APIであるIntl.NumberFormatが利用できそうです。

Qiitaでの紹介記事：https://qiita.com/shisama/items/661c33fef5cbe3bb8335
MDN Web Docs：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatToParts

「秒ごとの給料の計算」は一度置いておいて、カンマで区切ることだけを実現しようとするなら以下のように利用ができます。

const numberFormat = new Intl.NumberFormat('ja-JP');

// "1,234,567" と表示される
document.getElementById('salary').innerHTML = numberFormat.format(1234567);

ここまでできたらあとは給料の計算処理にカンマで表示する処理を組み込むだけです。

const salaryPerSecond = 1234;
let salary = 0;
let second = 0;

const numberFormat = new Intl.NumberFormat('ja-JP');

setInterval(function() {
    second++;
    salary = salaryPerSecond * second;

    document.getElementById('salary').innerHTML = numberFormat.format(salary);
}, 1000);

コードが複雑になりすぎていると感じたり、どう実現したらいいのか分からなくなったりしたら、一度やりたいことを見直して細かい単位で処理を分割し、一つずつ実現していくと良いかと思います。

4Like

Comments

  1. @NetaNeta0620

    Questioner

    こんな便利なものがあったんですね！！！！
    わかりやすい説明をいただきありがとうございます！
    すぐに試してみます！！！！！！

changkejun
@changkejun

結構以前ですが、javaのformatを参考して作ったjavescriptの formatクラスです。リンクからソースをコピーできます。

数字フォーマットの使い方です。
image.png

1Like

Comments

  1. @NetaNeta0620

    Questioner

    わかりやすい画像を用意していただけてこんな便利なものがあったのかと感動しました！！！！
    たすかりました！！！！！！！

UMA9626
@UMA9626

toLocaleString()とかいうめちゃくちゃピンポイントなメソッドがあります:smile:

const num = 1000000;
console.log(num.toLocaleString());
// '1,000,000'
1Like

Your answer might help someone💌

LoginSign Up