【#javascript定番】日付のカウントダウンを行う
2024.07.14
おはようございます．日付のカウントダウンを行うJavaScript言語の定番プログラムコードを作りましたので公開します．昨今、生成AIを使用してこのぐらいのコードは生成出来るかと思っていたのですが、こんなコードでも手直しが必要になりました．
やはり今の生成AIは事細かい指示を出さないと上手く動かないような気がします．それはプログラミングじゃない事でもそんな感じなのかもしれません．
<h1 id="countdown" data-y="2025" data-m="07" data-d="11"></h1>function countdown() {
let Y = document.querySelector('#countdown').getAttribute('data-Y');
let m = Math.floor(document.querySelector('#countdown').getAttribute('data-m')) -1;
let d = document.querySelector('#countdown').getAttribute('data-d');
let strCountDown = '';
let nowDate = new Date();
let countdownDate = new Date(Y,m,d,0,0,0);
let distance = countdownDate.getTime() - nowDate.getTime();
const day = Math.floor(distance / 1000 / 60 / 60 / 24);
const hour = Math.floor(distance / 1000 / 60 / 60) % 24;
const minute = Math.floor(distance / 1000 / 60) % 60;
const second = Math.floor(distance / 1000) % 60;
strCountDown = `${day}日 ${hour}:${minute}:${second}`;
view(strCountDown);
}
setInterval(countdown, 1000);
function view(str) {
document.querySelector('#countdown').textContent = str;
}
デモページはこちらになります．
https://zip358.com/tool/demo94
明日へ続く．
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
countdown, countdownDate.getTime, data-y, distance, document.querySelector, floor, getAttribute, gt, hour, let, lt, minute, nowDate.getTime, querySelector, quot, second, setInterval, STR, strCountDown, textContent,
プログラムを始めるきっかけになったアルゴリズム。
2021.05.31
プログラムを始めるきっかけになったのは、高校時代にひょんなことから情報処理の部活を見学に行った事がきっかけになっている。動画にあるような『枠の中を動き回る円のアルゴリズムを作ってみよう』という事が部活の先輩から出題された事が自分がプログラミングするきっかけだった、案外それが自分にあった事で今まで続いている。
不思議なもので数十年も独学や仕事でプログラミングするとは思っていなかった。最初はN88BASICなどでこのプログラミングを書いていた。最初はオブジェクト指向言語なんて知らなかったのだけど、いつしかオブジェクト指向でプログラミングを書くことが多くなっている。ソースコードは人により違うのでひとの書いたプログラミングは読みにくいなどと言われる事もあるけど、他人のソースコードを見ることは結構大事なことだと思います。何故か？
自分では思いつかないコードを知ることになったり技を知ることになるので、どんなコードでも勉強になりますよ。てな訳です。
https://zip358.com/tool/line-line/
let x = [40,0,30];
let y = [0,40,30];
let xp = [5,5,5];
let yp = [5,5,5];
let color = ["rgba(255,0,255,0.8)","rgba(255,255,0,0.8)","rgba(0,0,255,0.8)"]
let cn = function(element,color,bx,by){
var context = element.getContext( "2d" ) ;
context.beginPath () ;
context.arc((bx), (by), 5, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
context.fillStyle = color;
context.fill() ;
context.strokeStyle = "purple" ;
context.lineWidth = 2 ;
context.stroke();
};
setInterval(() => {
for(a = 0 ;a < x.length;a++){
let base = xy(a);
cn(document.getElementById("c"),color[a],base[0],base[1]);
}
},1);
// setInterval(()=>{
// let element = document.getElementById("c");
// var context = element.getContext( "2d" ) ;
// context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);
// },500);
function xy(a){
xp[a] = x[a] > 490 || x[a] < 0 ?xp[a]*-1:xp[a];
yp[a] = y[a] > 440 || y[a] < 0 ?yp[a]*-1:yp[a];
x[a]=x[a]+xp[a];
y[a]=y[a]+yp[a];
return [x[a],y[a]];
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
base, bx, cn, context.arc, context.beginPath, context.clearRect, context.fill, context.fillStyle, context.lineWidth, context.stroke, context.strokeStyle, function, getElementById, Math.PI, quot, quot;rgba, setInterval, xp, xy, yp,