ビデオが終了した際にendedイベントが発火し、this.load()を呼び出すことでビデオをリロードし、ポスター画像を再表示します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Video Poster Example</title> </head> <body> <video id="myVideo" width="600" poster="poster.jpg" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <script> document.getElementById('myVideo').addEventListener('ended', function() { this.load(); // ビデオをリロードしてポスター画像を再表示 }); </script> </body> </html>
<form id="myForm" method="post"> <input type="radio" name="option" value="1" id="option1" checked> <label for="option1">Option 1</label> <input type="radio" name="option" value="2" id="option2"> <label for="option2">Option 2</label> </form>
document.addEventListener('DOMContentLoaded', (event) => { const form = document.getElementById('myForm'); const radioButtons = form.querySelectorAll('input[type="radio"]'); radioButtons.forEach((radio) => { radio.addEventListener('change', () => { form.submit(); }); }); });
<form id="myForm" method="post"> <div> <label for="pref">都道府県</label> <select id="pref" name="pref"> <option value="01">北海道</option> <option value="02" selected>青森県</option> <option value="03">岩手県</option> </select> </div> <div> <label for="comment">コメント</label> <textarea id="comment" name="comment" required></textarea> </div> <div> <button type="submit">登録</button> </div> </form>
document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // デフォルトのフォーム送信を防ぐ var pref = document.getElementById('pref').value; var comment = document.getElementById('comment').value; fetch('submit.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: 'pref=' + encodeURIComponent(pref) + '&comment=' + encodeURIComponent(comment) }) .then(response => response.text()) .then(data => { alert('データが正常に送信されました'); }) .catch(error => { console.error('エラーが発生しました:', error); }); });
submit.php
<?php $servername = "localhost"; $username = "your_username"; $password = "your_password"; $dbname = "your_database"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("接続に失敗しました: " . $conn->connect_error); } $pref = $_POST['pref']; $comment = $_POST['comment']; $sql = "INSERT INTO your_table (pref, comment) VALUES ('$pref', '$comment')"; if ($conn->query($sql) === TRUE) { echo "新しいレコードが作成されました"; } else { echo "エラー: " . $sql . "<br>" . $conn->error; } $conn->close(); ?>
function isEdge() { return /Edge/.test(navigator.userAgent); } if (isEdge()) { console.log("This is Edge browser."); } else { console.log("This is not Edge browser."); }
shuffledString = string.split('').sort(() => .5 - Math.random()).join('');
function convertToBaseN(decimalNumber, base) { return decimalNumber.toString(base); } // 例: 10進数の255を16進数に変換 console.log(convertToBaseN(255, 16)); // 出力: "ff" // 例: 10進数の255を2進数に変換 console.log(convertToBaseN(255, 2)); // 出力: "11111111"
この関数では、decimalNumberを指定されたbaseに変換します。toStringメソッドは、基数（2から36まで）を引数として受け取り、その基数で表現された文字列を返します。
function convertToBaseN(decimalNumber, base) { const digits = "0123456789abcdefghijklmnopqrstuvwxyz"; let result = ""; let number = decimalNumber; if (base < 2 || base > 36) { throw new Error("Base must be in the range 2-36"); } while (number > 0) { result = digits[number % base] + result; number = Math.floor(number / base); } return result || "0"; } // 例: 10進数の255を16進数に変換 console.log(convertToBaseN(255, 16)); // 出力: "ff" // 例: 10進数の255を2進数に変換 console.log(convertToBaseN(255, 2)); // 出力: "11111111"
この関数では、digitsという文字列を使って各桁の文字を取得し、whileループを使って10進数を指定された基数に変換しています。numberが0になるまでループを続け、各桁をresultに追加していきます。
// 現在の時刻を取得 const now = new Date(); // ミリ秒単位のタイムスタンプを取得 const timestampInMilliseconds = now.getTime(); // 秒単位のタイムスタンプを取得 const timestampInSeconds = Math.floor(timestampInMilliseconds / 1000); console.log(timestampInSeconds);
DOMContentLoadedイベントは、HTMLが完全に読み込まれ、解析されたときに発生します。スタイルシートや画像などの外部リソースの読み込みを待つ必要はありません。
document.addEventListener('DOMContentLoaded', function() { // ページ読み込み後に実行したい処理をここに書きます console.log('DOM fully loaded and parsed'); });
loadイベントは、ページ全体（スタイルシートや画像などの外部リソースを含む）が完全に読み込まれたときに発生します。
window.addEventListener('load', function() { // ページ全体が読み込まれた後に実行したい処理をここに書きます console.log('Page fully loaded'); });
名前付き関数を使用する場合
function onDOMContentLoaded() { // ページ読み込み後に実行したい処理をここに書きます console.log('DOM fully loaded and parsed'); } document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
function onPageLoad() { // ページ全体が読み込まれた後に実行したい処理をここに書きます console.log('Page fully loaded'); } window.addEventListener('load', onPageLoad);
setInterval()関数は、指定した間隔（ミリ秒）ごとに特定の関数を実行するタイマーを設定します。この関数は一意のIDを返し、このIDは後でclearInterval()関数に渡してタイマーを停止するために使用します。
// 1秒ごとにメッセージを表示するタイマーを設定
var intervalID = setInterval(function() {
console.log("1秒経過しました");
}, 1000);
// 5秒後にタイマーを停止
setTimeout(function() {
clearInterval(intervalID);
console.log("タイマーを停止しました");
}, 5000);
このコードは、1秒ごとに"1秒経過しました"というメッセージを表示するタイマーを設定します。そして、5秒後にそのタイマーを停止します。その結果、"1秒経過しました"というメッセージは5回表示され、その後"タイマーを停止しました"と表示されます。
setTimeout()関数は、指定した時間（ミリ秒）が経過した後に特定の関数を一度だけ実行するタイマーを設定します。この関数も一意のIDを返し、このIDはclearTimeout()関数に渡してタイマーを停止するために使用します。
// 5秒後にメッセージを表示するタイマーを設定
var timeoutID = setTimeout(function() {
console.log("5秒経過しました");
}, 5000);
// タイマーをすぐに停止
clearTimeout(timeoutID);
このコードは、5秒後に"5秒経過しました"というメッセージを表示するタイマーを設定します。しかし、その直後にclearTimeout()関数が呼び出されるため、メッセージは表示されません。
setTimeout関数の中で自身を再度呼び出すことで、setInterval関数と同様の動作を実現することができます。
ただし、setTimeoutを再帰的に使用すると、setIntervalとはいくつかの重要な違いがあります：
動的な遅延: setIntervalは一定の間隔で関数を実行しますが、再帰的なsetTimeoutでは各呼び出しで遅延時間を動的に変更することが可能です。
エラーハンドリング: setIntervalはエラーが発生しても次の呼び出しをスケジュールしますが、setTimeoutではエラーが発生すると次の呼び出しがスケジュールされません。
呼び出しのオーバーラップ防止: setIntervalは指定した間隔で関数を呼び出しますが、前の呼び出しが終了する前に次の呼び出しが開始される可能性があります。一方、再帰的なsetTimeoutでは前の呼び出しが終了してから次の呼び出しをスケジュールするため、この問題は発生しません。
以上のような理由から、特定の状況ではsetIntervalの代わりに再帰的なsetTimeoutを使用することが推奨されます。
let interval = 1000;
setTimeout(function main(){
・・・
・・・
・・・
interval = 1000 - Date.now() % 1000;
setTimeout(main, interval);
}, interval);
このコードは、関数mainをほぼ正確に1秒ごとに実行するように設定されています。
ここでのポイントは、setTimeout(main, interval)が呼び出されるタイミングです。Date.now() % 1000は現在のミリ秒を1000で割った余りを返します。つまり、現在の秒の中で経過したミリ秒数を返します。これを1000から引くと、次の秒（つまり次の1000ミリ秒）までの残り時間が得られます。
したがって、interval = 1000 - Date.now() % 1000;は、次の秒までの残り時間を計算します。そして、その残り時間だけ待ってからmain関数を再度呼び出します。
この結果、main関数はほぼ正確に1秒ごと（つまり、時計の秒針が動くごと）に実行されます。
ただし、JavaScriptのタイマー関数は完全に正確ではないため、実際の間隔は1秒よりわずかに長くなる可能性があります。これは、JavaScriptがシングルスレッドで動作し、他のタスクが実行中の場合にはタイマーのコールバックが遅延するためです。
最初の一回をすぐに実行したい場合は、関数を一度手動で呼び出してからsetIntervalを設定する
function myFunction() {
// ここに実行したいコードを書く
}
// 最初の一回をすぐに実行
myFunction();
// その後、指定した間隔で実行を続ける
setInterval(myFunction, 1000); // 1000ミリ秒（1秒）ごとにmyFunctionを実行
setIntervalの戻り値を一つ（最後に実行されたもの）しか保持していないため、setIntervalを連続使用すると、clearIntervalが効かなくなる。
setInterval前に必ずclearIntervalをコールし、前回作ったタイマーを止めるようにする。その後setIntervalで新たなタイマーを作る。setTimeoutの場合はその前にclearTimeoutする。
<script>
function secondsToHms(d) {
d = Number(d);
var h = Math.floor(d / 3600);
var m = Math.floor(d % 3600 / 60);
var s = Math.floor(d % 3600 % 60);
var hDisplay = h > 0 ? h + "時間" : "";
var mDisplay = m > 0 ? m + "分" : "";
var sDisplay = s > 0 ? s + "秒" : "";
return hDisplay + mDisplay + sDisplay;
}
</script>