English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

原生jsで日付計算器機能を実現する

本例では、日付計算器の具体的な実装コードを共有し、以下の内容を参照してください

日付計算器HTMLコードスライス:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>日付計算器</title>
 <script type="text/javascript" src="date_calc.js"></script>
</head>
<body>
<br><br>
<b>何日後の日付を計算します:</b>
<br>
 と
<input size="8" id="SY" value="2016">年
<input size="4" id="SM" value="11">月
<input size="4" id="SD" value="16">日
(デフォルトは今日です)
<br>差異
<input size="8" id="decday" value="100">日
(負の数を入力すると前に計算されます)
<br>結果は:
<span id="result1></span>
<br>
<input type=button value="計算" onclick="cala()">
<br>
<b>計算日数の差:</b>
<br>
  <input size="8" id="SY2" value="2016">年
<input size="4" id="SM2" value="11">月
<input size="4" id="SD2" value="16">日
<br>
と <input size="8" id="SY3" value="2017" >年
<input size="4" id="SM3" value="1">月
<input size="4" id="SD3" value="1">日
<br>差異:
<span id="result2></span>日
<br>
<input type=button value="計算" onclick="calb()">
<br>
</body>
</html>

date_calc.jsコードスライス:

var hzWeek = new Array("日","一","二","三","四","五","六","日");
//取得週
function cweekday(wday)
{return hzWeek[wday];}
function cala()
{
y = document.getElementById("SY").value;
m = document.getElementById("SM").value;
d=document.getElementById("SD").value;
ddd=document.getElementById("decday").value;
ttt=new Date(y,m-1,d).getTime()+ddd*24000*3600;
theday=new Date();
theday.setTime(ttt);
document.getElementById("result1").innerHTML=theday.getFullYear()+"年"+(1+theday.getMonth())+"月"+theday.getDate()+"日"+"曜日"+cweekday(theday.getDay());
}
function calb()
{
y2=document.getElementById("SY2").value;
m2=document.getElementById("SM2").value;
d2=document.getElementById("SD2").value;
y3=document.getElementById("SY3").value;
m3=document.getElementById("SM3").value;
d3=document.getElementById("SD3").value;
day2=new Date(y2,m2-1,d2);
day3=new Date(y3,m3-1,d3);
document.getElementById("result2").innerHTML=(day3-day2)/86400000;
}

これでこの記事はすべて終わりです。皆様の学習に役立てば幸いです。また、呐喊教程を多くの皆様にサポートしていただけると嬉しいです。

声明:この記事の内容はインターネットから取得され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードしたものであり、このサイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害の疑いがある場合は、メールを送信して:notice#oldtoolbag.com(メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、このサイトは侵害された内容をすぐに削除します。)

おすすめ