タイトルの通りなのですが、日付を設定してそこまでのカウントダウンをするものを作ってみたかったので作りました。ほとんど参考サイトにありました。
1秒毎に更新されます。
tmp.html というファイルに下記コードがあり、 <form action="./tmp.html"> というフォームsubmitで押すとアドレスが .../tmp.html?set_day=2021-11-20 というものになって、それが<script>内で渡されてset_dayの部分が表示されています。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: left;
margin: 0px;
}
.large {
font-size: 60px;
}
.small {
font-size: 32px;
}
</style>
</head>
<body>
<p id="demo" class="large"></p>
<p id="demo1" class="small"></p>
<label for="start">Enter date:</label>
<form action="./tmp.html">
<input type="date" name="set_day">
<p><button style="float: left;">Submit</button></p>
</form>
<script>
var dateControl = document.querySelector('input[type="date"]');
var url = new URL(window.location.href);
var params = url.searchParams;
let set_day = params.get('set_day');
document.getElementById("demo1").innerHTML = "to " + set_day;
// Set the date we're counting down to
let countDownDate = new Date(set_day).getTime(); // milliseconds
// Update the count down every 1 second
var x = setInterval(function () {
var now = new Date().getTime(); // milliseconds
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
output = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = output
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
参考
https://www.w3schools.com/howto/howto_js_countdown.asp
https://gray-code.com/javascript/get-parameter-of-url/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
https://www.w3schools.com/js/js_dates.asp
https://www.w3schools.com/js/js_date_methods.asp
0 件のコメント:
コメントを投稿