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

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

ただいまの
回答率

90.45%

  • JavaScript

    21079questions

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

Monacaというサイトを使って、javascriptでプレゼンタイマーを作ったんですが2つ目のタイマーの秒の場所が、1つ目の秒の場所と一緒に動きます。どうすれば、別々に動くようになるでしょうか?

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,517

bugi

score 1

Monacaというサイトを使って、javascriptでプレゼンタイマーを作ったんですが,測り終わったら一つずつ鳴るようにしたいんですけどどのようにすればいいでしょうか?
そのほかに、タイマーのデザインや、タイマーの位置などの改善点や、他のプレゼンタイマーの作り方など教えてください。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
</script>
</head>
<body>
<br />

<form name="timer">
<input type="text" value="">分
<input type="text" value="">秒

<input type="text" value="">分
<input type="text" value="">秒

<input type="text" value="">分
<input type="text" value="">秒

<br>
<input type="button" value="スタート" onclick="cntStart()">
<input type="button" value="ストップ" onclick="cntStop()">

</form>

</body>

<script>

var timer1; //タイマーを格納する変数(タイマーID)の宣言

//カウントダウン関数を1000ミリ秒毎に呼び出す関数
function cntStart()
{
document.timer.elements[6].disabled=true;
timer1=setInterval("countDown()",1000);
}

//タイマー停止関数
function cntStop()
{
document.timer.elements[6].disabled=false;
clearInterval(timer1);
}

//カウントダウン関数
function countDown()
{
var min=document.timer.elements[0].value;
var sec=document.timer.elements[1].value;

var min2=document.timer.elements[2].value;
var sec2=document.timer.elements[3].value;

var min3=document.timer.elements[4].value;
var sec3=document.timer.elements[5].value;

if( (min=="") && (sec=="") )
{
alert("時刻を設定してください!");
reSet();
}

else
{
if (min=="") min=0;
min=parseInt(min);

if (sec=="") sec=0;
sec=parseInt(sec);

tmWrite(min*60+sec-1);
}

if( (min2=="") && (sec2=="") )
{
alert("時刻を設定してください!");
reSet();
}

else
{
if (min2=="") min2=0;
min2=parseInt(min2);

if (sec2=="") sec2=0;
sec2=parseInt(sec2);

tmWrite2(min2*60+sec2-1);
}

if( (min3=="") && (sec3=="") )
{
alert("時刻を設定してください!");
reSet();
}

else
{
if (min3=="") min3=0;
min3=parseInt(min3);

if (sec3=="") sec3=0;
sec3=parseInt(sec3);

tmWrite3(min3*60+sec3-1);
}

}
//残り時間を書き出す関数
function tmWrite(int)
{
int=parseInt(int);

if (int<=0)
{
reSet();

}
else
{
//残り分数はintを60で割って切り捨てる
document.timer.elements[0].value=Math.floor(int/60);
//残り秒数はintを60で割った余り
document.timer.elements[1].value=int % 60;
}
}
function tmWrite2(int)
{
int=parseInt(int);

if (int<=0)
{
reSet();

}
else
{
//残り分数はintを60で割って切り捨てる
document.timer.elements[2].value=Math.floor(int/60);
//残り秒数はintを60で割った余り
document.timer.elements[3].value=int % 60;
}  

}

function tmWrite3(int)
{
int=parseInt(int);

if (int<=0)
{
reSet();

}
else
{
//残り分数はintを60で割って切り捨てる
document.timer.elements[4].value=Math.floor(int/60);
//残り秒数はintを60で割った余り
document.timer.elements[5].value=int % 60;
}

}

//フォームを初期状態に戻す(リセット)関数
function reSet()
{
document.timer.elements[0].value="0";
document.timer.elements[1].value="0";

document.timer.elements[2].value="0";
document.timer.elements[3].value="0";

document.timer.elements[4].value="0";
document.timer.elements[5].value="0";

document.timer.elements[6].disabled=false;
clearInterval(timer1);
}  

</script>

</html>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/12/18 20:50

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • 退会済みユーザー

    2016/12/19 02:27

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

0

これでどうでしょうか。

修正

タイマーをオブジェクトとして正しく扱うようにしました。
デザインについては自信がありません:-)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<!-- <script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css"> -->
<style>
.numeric {
  text-align : right;
}

.container {
  vertical-align : middle;
  padding : 10px;
  border  : 1px solid;
  margin  : 5px;
}

#buttonGroup {
  margin  : 5px;
}
</style>
</head>
<body>
  <br>
  <form name="timer">
    <span class="container">
      <label id="label0">タイマー1</label>
      <input type="text" value="" class="numeric" id="minBox0" size="2"><input type="text" value="" class="numeric" id="secBox0" size="2"></span>

    <span class="container">
      <label id="label1">タイマー2</label>
      <input type="text" value="" class="numeric" id="minBox1" size="2"><input type="text" value="" class="numeric" id="secBox1" size="2"></span>

    <span class="container">
      <label id="label2">タイマー3</label>
      <input type="text" value="" class="numeric" id="minBox2" size="2"><input type="text" value="" class="numeric" id="secBox2" size="2"></span>

    <br>
    <br>

    <div id="buttonGroup">
      <input type="button" value="スタート" id="starter" onclick="startTimers()">
      <input type="button" value="ストップ" id="stopper" onclick="stopTimers()">
    </div>
  </form>
<script>
var starter = document.querySelector('#starter');
var stopper = document.querySelector('#stopper');


//タイマーインスタンスを格納する配列
var timerArray = [
    new Timer('label0', 'minBox0', 'secBox0'),
    new Timer('label1', 'minBox1', 'secBox1'),
    new Timer('label2', 'minBox2', 'secBox2'),
];


//タイマーのコンストラクタ
function Timer(label, minBox, secBox) {
    this.intervalID = null; // nullのとき停止中
    this.label  = document.querySelector('#' + label);
    this.minBox = document.querySelector('#' + minBox);
    this.secBox = document.querySelector('#' + secBox);
}


//タイマー開始メソッド
Timer.prototype.startTimer = function() {
    this.stopTimer()

    var min = this.minBox.value;
    var sec = this.secBox.value;

    if (min === "" && sec === "") {
        alert(this.label.innerText + "に時間を設定してください!");
        return;
    }

    min = (min === "" ? 0 : parseInt(min, 10));
    sec = (sec === "" ? 0 : parseInt(sec, 10));

    //不正な数値の場合
    if (! isFinite(min) || ! isFinite(sec) ||
        min < 0 || sec < 0 || (min === 0 && sec === 0))
    {
        alert(this.label.innerText + "に正しい時間を設定してください!");
        return;
    }

    this.minBox.readonly = true;
    this.secBox.readonly = true;

    this.minBox.value = min;
    this.secBox.value = sec;

    this.countDown();
};


//カウントダウンする関数を1000ミリ秒毎に呼び出すメソッド
Timer.prototype.countDown = function()
{
    //setIntervalのコールバック関数ではthisが変わるのでtimerで代用
    var timer = this;

    this.intervalID = setInterval(function() {
        var min = parseInt(timer.minBox.value, 10);
        var sec = parseInt(timer.secBox.value, 10);
        var totalSec = min * 60 + sec - 1;

        if (totalSec <= 0) {
            timer.stopTimer();
            totalSec = 0;
        }

        //残り分数はintを60で割って切り捨てる
        timer.minBox.value = Math.floor(totalSec / 60);
        //残り秒数はintを60で割った余り
        timer.secBox.value = totalSec % 60;
    }, 1000);
};


//タイマー停止メソッド
Timer.prototype.stopTimer = function() {
    if (this.intervalID !== null) {
        clearInterval(this.intervalID);
        this.intervalID = null;
    }

    this.minBox.readonly = false;
    this.secBox.readonly = false;
};


//全タイマー開始関数
function startTimers() {
    for (var no in timerArray) {
        timerArray[no].startTimer();
    }
}


//全タイマー停止関数
function stopTimers() {
    for (var no in timerArray) {
        timerArray[no].stopTimer();
    }
}
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/27 12:53

    ありがとうございます。
    しっかりと動きました。

    キャンセル

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

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    21079questions

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

  • トップ
  • JavaScriptに関する質問
  • Monacaというサイトを使って、javascriptでプレゼンタイマーを作ったんですが2つ目のタイマーの秒の場所が、1つ目の秒の場所と一緒に動きます。どうすれば、別々に動くようになるでしょうか?