クイズサイトの制限時間

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
クイズサイトを作っているのですが、制限時間の表示を数字だけではなく、時間経過とともにバーが減少していくという形にして制限時間を表示したいです。
###発生している問題・エラーメッセージ

クイズスタートと同時にしようとするとうまく行きませんでした。

###該当のソースコード
Javascript

var question = []; //問題データ格納用
var q_cnt = 0; //問題番号(何問目か)
var num_questions = 0; //問題数(jsonデータから数を取得)
var num_quiz = 10; //出題数(問題データからこの数の問題をランダムで出題)
var order_element = [0, 1, 2]; //選択肢の表示順(ランダムにするため)
var correct = 0; //正解数
var s_time; //ストップウォッチスタート時間
var e_time = 0; //ストップウォッチ経過時間
//<!-- とりあえず、問題設定画面以外を非表示 -->
$('#question').hide();
$('#answer').hide();
$('#result').hide();

//

//ストップウォッチの表示
function show_time(t) {
return document.getElementById("time").textContent = ('00' + ((t - t % 60000) / 60000) % 60).slice(-2) + ":" + ('00' + ((t - t % 1000) / 1000) % 60).slice(-2) + ":" + ('00' + (t - t % 10) / 10).slice(-2);
}
//ストップウォッチ
function setUserCfg(command) {
timeLabel = document.getElementById("timeLabel");
submit_user_cfg = document.getElementById("submit_user_cfg");
submit_user_cfg.style.visibility = "hidden";

// プログレスバー表示
pbar = document.getElementById("pbar").getContext("2d");
pbar.fillStyle = "rgb(200, 0, 0)";
pbar.fillRect(0, 10, 300, 10);
pbar.fillStyle = "rgb(255, 255, 255)";

finishTime = new Date();
finishTime.setTime(finishTime.getTime() + limit);

timer = setInterval("tick()", 1);
}

function tick() {
// 時間計算
var diffTime = finishTime.getTime() - new Date().getTime();
if (diffTime <= 0) {
// タイムオーバー
clearInterval(timer);
timeLabel.innerText = 'OVER!';
submit_user_cfg.style.visibility = "visible";

timer = null;
pbar = null;
timeLabel = null;
submit_user_cfg = null;

return;
}
// プログレスバー更新
pbar.fillRect(300 * (diffTime / limit), 10, 300, 10);
// 時間表示更新
var min = Math.floor(diffTime / 1000 / 60);
diffTime -= min * 1000 * 60;
var sec = Math.floor(diffTime / 1000);
diffTime -= sec * 1000;
timeLabel.innerText = ('0' + min).slice(-2) + ":" + ('0' + sec).slice(-2) + "." + ('00' + diffTime).slice(-3);
}

//シャッフル　Fisher-Yates shuffle
function shuffle(array) {
var length = array.length;
for (var i = length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var tmp = array[i];
array[i] = array[j];
array[j] = tmp;
}
}

// 問題文の選択肢表示処理
function setOptions() {
document.getElementById("q_msg").textContent = question[q_cnt].msg;
if (question[q_cnt].img) {
document.getElementById("q_msg").innerHTML += "<p><img src='" + question[q_cnt].img + "'></p>";
}
shuffle(order_element);
document.getElementById("q_op1").textContent = question[q_cnt].options[order_element[0]];
document.getElementById("q_op2").textContent = question[q_cnt].options[order_element[1]];
document.getElementById("q_op3").textContent = question[q_cnt].options[order_element[2]];
}

// 「つぎへ」を押した時の処理
function nextQuestion() {
q_cnt++;
if (q_cnt == num_questions) {
console.log("END");
$('#configuration').hide();
$('#question').hide();
$('#answer').hide();
$('#result').show();
s_watch("update");
document.getElementById('result_msg').textContent = num_questions + "もんちゅう " + correct + "もん せいかいでした";
} else {
setOptions();
$('#configuration').hide();
$('#question').show();
$('#answer').hide();
setUserCfg("start");
setUserCfg("update");
}
}

// 解答した時の処理
function checkAnswer(options) {
s_watch("stop");
s_watch("update");
$('#configuration').hide();
$('#question').hide();
$('#answer').show();
if (order_element[options] == 0) {
document.getElementById("a_msg").textContent = "せいかい！　";
correct++;
} else {
document.getElementById("a_msg").textContent = "ふせいかい！　";
}
document.getElementById("a_msg").textContent += question[q_cnt].options[0];
document.getElementById("a_cmt").textContent = question[q_cnt].ans.comment;
if (question[q_cnt].ans.img) {
document.getElementById("a_cmt").innerHTML += "<p><img src='" + question[q_cnt].ans.img + "'></p>";
}

if (q_cnt == num_questions - 1) {
document.getElementById("b_next").textContent = "けっかへ"
}
}

// 問題の設定が決定した時の処理
function setUserCfg() {
var cfg = document.forms.user_cfg;
//for IE
for( i = 0; i < cfg.level.length; i++ ){
if( cfg.level[i].checked == true ){
cfg.level.value = cfg.level[i].value;
}
}
for( i = 0; i < cfg.genre.length; i++ ){
if( cfg.genre[i].checked == true ){
cfg.genre.value = cfg.genre[i].value;
}
}
//for IE END
console.log("--------------");
console.log(cfg.level.value);
console.log("選ばれたレベル、ジャンル");
console.log(cfg.level.value);
console.log(cfg.genre.value);
console.log("--------------");
// データファイル読み込み ()
$.ajax({
url: "./quiz_data/" + cfg.genre.value + "_" + cfg.level.value + ".json",
cache: false,
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
//読み込んでする処理
question = data; //グローバル変数に渡す
num_questions = data.length; //問題数取得。多分いらなくなる
},
complete: function () {
//読み込み終了を待ってから行う処理
shuffle(question); //問題の順を入れ替え
//データが出題数以上なら出題数に
while (question.length > num_quiz) {
question.pop();
}
num_questions = question.length; //問題数を再設定
setOptions(); //選択肢の順を入れ替え
}
});
$('#configuration').hide();
$('#question').show();
$('#type').hide();
setUserCfg("start");
}
}

###試したこと
ストップウォッチ形式になっているプログラムをそのまま書き換えてみたのですが、やはりというべきか駄目でした。

###補足情報(言語/FW/ツール等のバージョンなど)
HTML/CSS jsファイル、JSONファイルを使用しています。

Comments

[kei344]

書かれている状況が再現するコード（HTML/JSON/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

提示されたソースは jQuery やら、ネイティブ JavaScript が混ざっていて読みにくいので、勝手バージョンでサンプル作成しました。

<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>Example for Bootstrap</title>

		<!-- Bootstrap core CSS -->
		<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			.progress {
				margin-top: 40px;
			}
		</style>
	</head>

	<body>
		<main role="main" class="container">
			<div class="progress">
				<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
			</div>
		</main>

		<!-- Bootstrap core JavaScript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="//getbootstrap.com/assets/js/vendor/popper.min.js"></script>
		<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function () {
				var minutes = 1;
				var seconds = minutes * 60;
				var countdown = function () {
					seconds--;
					var percent = Math.ceil(seconds * 100 / (minutes * 60));
					if (percent >= 0) {
						$(".progress-bar")
								.attr('aria-valuenow', percent)
								.css('width', percent + '%')
								.text(percent + '%');
					}
				};
				setInterval(countdown, 1000);
			});
		</script>
	</body>
</html>