vivit-jc · September 17, 2021 17:28
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>ポパパポピポパポ　ピピョロロロピーピョロピーゴーーーーーピーーーーゴーーーーザーーーーーーーガピー</title>
 <style>
 #image {
    height: 400px;
 }
 #prev, #start, #next, #answer {
    line-height: 2.0;
    width: 5rem;
 }
 #imgnumber {
    line-height: 2.0;
 }
 </style>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script>
 // ダイヤルアップクイズ用スクリプト
 // 使い方：出したい画像と同じフォルダにこれを置いて使う
 // 画像のファイル名は「p99.jpg」のようにp+整数+.jpgにする（.jpg/.jpeg/.pngに対応）
 $(function(){

 const State = {
    sec: 0,
    timer: null,
    isPlaying: false,
 }

 function getCanvasContext2d() {
    const canvas = $('#canvas'); 
    return canvas[0].getContext('2d')
 }

 function drawRect() {
    const context = getCanvasContext2d()
    const w = $('#img').width()
    context.fillStyle = 'white'
    context.fillRect(0, 0, w, 400)
    context.clearRect(0, 0, w, 20 * State.sec)
    State.sec += 1
    console.log('timer: ' + State.sec)
 }

 function hideImage() {
    const context = getCanvasContext2d()
    context.fillStyle = 'white'
    context.fillRect( 0, 0, 1000, 400)
 }

 function stopTimer() {
    State.sec = 0
    State.isPlaying = false
    clearInterval(State.timer)
 }

 function loadImage() {
    const number = $('#imgnumber').val()
    $('#message').text('')
    $('#img').attr('src', `p${number}.jpg`)
 }

 $('#start')[0].addEventListener('click', () => {
    if (State.isPlaying) {
        clearInterval(State.timer)
        State.isPlaying = false
    } else {
        State.timer = setInterval(() => drawRect(), 1000)
        State.isPlaying = true
    }
 })

 $('#answer')[0].addEventListener('click', () => {
    const context = getCanvasContext2d()
    context.clearRect(0, 0, 1000, 400)
    stopTimer()
 })

 $('#next')[0].addEventListener('click', () => {
    hideImage()
    $('#imgnumber').val(Number($('#imgnumber').val()) + 1)
    stopTimer()
    loadImage()
 })

 $('#prev')[0].addEventListener('click', () => {
    hideImage()
    $('#imgnumber').val(Number($('#imgnumber').val()) - 1)
    stopTimer()
    loadImage()
 })

 $('#imgnumber')[0].addEventListener('blur', () => {
    hideImage()
    stopTimer()
    loadImage()
 })

 $('#img')[0].addEventListener('error', () => {
    const matched = $('#img').attr('src').match(/p(\d*)\.(jpe?g|png)/)
    if (matched) {
        const [, number, ext] = matched
        if (ext === 'jpg') {
            $('#img').attr('src', `p${number}.jpeg`)
        } else if (ext === 'jpeg') {
            $('#img').attr('src', `p${number}.png`)
        } else {
            $('#message').text(`画像 p${number} (*.jpg, *.jpeg, *.png) が見つかりません`)
        }
    }
    return false
 })
 hideImage()
 loadImage()
 })
 </script>
 </head>
 <body>
 <div id="image">
 <canvas id="canvas" height="400" width="1000" style="position:absolute"></canvas>
 <img id="img" src="" height="400">
 </div>
 <p id="message"></p>
 <button id="prev">&ltPrev</button>
 <button id="start">Start/Stop</button>
 <button id="next">Next&gt</button>
 <input type="number" id="imgnumber" size="10" value="1">
 <button id="answer">Ans</button>
 </body>
 </html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>ポパパポピポパポ　ピピョロロロピーピョロピーゴーーーーーピーーーーゴーーーーザーーーーーーーガピー</title>
	<style>
	#image {
	height: 400px;
	}
	#prev, #start, #next, #answer {
	line-height: 2.0;
	width: 5rem;
	}
	#imgnumber {
	line-height: 2.0;
	}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
	// ダイヤルアップクイズ用スクリプト
	// 使い方：出したい画像と同じフォルダにこれを置いて使う
	// 画像のファイル名は「p99.jpg」のようにp+整数+.jpgにする（.jpg/.jpeg/.pngに対応）
	$(function(){

	const State = {
	sec: 0,
	timer: null,
	isPlaying: false,
	}

	function getCanvasContext2d() {
	const canvas = $('#canvas');
	return canvas[0].getContext('2d')
	}

	function drawRect() {
	const context = getCanvasContext2d()
	const w = $('#img').width()
	context.fillStyle = 'white'
	context.fillRect(0, 0, w, 400)
	context.clearRect(0, 0, w, 20 * State.sec)
	State.sec += 1
	console.log('timer: ' + State.sec)
	}

	function hideImage() {
	const context = getCanvasContext2d()
	context.fillStyle = 'white'
	context.fillRect( 0, 0, 1000, 400)
	}

	function stopTimer() {
	State.sec = 0
	State.isPlaying = false
	clearInterval(State.timer)
	}

	function loadImage() {
	const number = $('#imgnumber').val()
	$('#message').text('')
	$('#img').attr('src', `p${number}.jpg`)
	}

	$('#start')[0].addEventListener('click', () => {
	if (State.isPlaying) {
	clearInterval(State.timer)
	State.isPlaying = false
	} else {
	State.timer = setInterval(() => drawRect(), 1000)
	State.isPlaying = true
	}
	})

	$('#answer')[0].addEventListener('click', () => {
	const context = getCanvasContext2d()
	context.clearRect(0, 0, 1000, 400)
	stopTimer()
	})

	$('#next')[0].addEventListener('click', () => {
	hideImage()
	$('#imgnumber').val(Number($('#imgnumber').val()) + 1)
	stopTimer()
	loadImage()
	})

	$('#prev')[0].addEventListener('click', () => {
	hideImage()
	$('#imgnumber').val(Number($('#imgnumber').val()) - 1)
	stopTimer()
	loadImage()
	})

	$('#imgnumber')[0].addEventListener('blur', () => {
	hideImage()
	stopTimer()
	loadImage()
	})

	$('#img')[0].addEventListener('error', () => {
	const matched = $('#img').attr('src').match(/p(\d*)\.(jpe?g\|png)/)
	if (matched) {
	const [, number, ext] = matched
	if (ext === 'jpg') {
	$('#img').attr('src', `p${number}.jpeg`)
	} else if (ext === 'jpeg') {
	$('#img').attr('src', `p${number}.png`)
	} else {
	$('#message').text(`画像 p${number} (.jpg, .jpeg, *.png) が見つかりません`)
	}
	}
	return false
	})
	hideImage()
	loadImage()
	})
	</script>
	</head>
	<body>
	<div id="image">
	<canvas id="canvas" height="400" width="1000" style="position:absolute"></canvas>
	<img id="img" src="" height="400">
	</div>
	<p id="message"></p>
	<button id="prev">&ltPrev</button>
	<button id="start">Start/Stop</button>
	<button id="next">Next&gt</button>
	<input type="number" id="imgnumber" size="10" value="1">
	<button id="answer">Ans</button>
	</body>
	</html>