<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>计算年月日</title>
<style> .cs{ font-size: 20px; height: 10px; color: red; } #contanel{ width:1000px; height: 500px; padding: 10px; background-color: antiquewhite; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style>
//这段本来想导入jquery，来更加简便化，但是没有使用，可以删除
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script> //焦点事件，提醒用户需要登录的年分 function year(){ var showyear1=document.getElementById("showyear"); showyear1.innerHTML="请输入年份为1800-2050中的任意一年"; } function yearblur(){ var showyear=document.getElementById("showyear"); showyear.innerHTML=""; } function month(){ showmonth.innerHTML="请输入月份为1-12中的任意月份"; } function monthblur(){ showmonth.innerHTML=""; } function day(){ showday.innerHTML="请按照月份输入规定的天数"; } function dayblur(){ showday.innerHTML=""; } //判断输入的类型是否符合标准，是否为数字，是否在范围之内 function subclick(){ var year = Number(document.getElementById("year").value); var month = Number(document.getElementById("month").value); var day = Number(document.getElementById("day").value); var showyear = document.getElementById("showyear"); var showmonth = document.getElementById("showmonth"); var showday = document.getElementById("showday"); if(year == '' || isNaN(year) || year < 1800 || year >2050){ showyear.innerHTML="输入不能为空 or 年份只可以输入数字类型 or 年在1800-2050之间"; }else if(month == '' || isNaN(month) || month < 1 || month > 12){ showmonth.innerHTML="输入不能为空 or 月份只可以输入数字类型 or 月份只有1-12月"; }else if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){ if(day == '' || isNaN(day) || day < 1 || day > 31){ showday.innerHTML="输入不能为空 or 天数只可以输入数字类型 or 最多31天"; return; } }else if(month == 4 || month == 6 || month == 9 || month == 11){ if(day == '' || isNaN(day) || day < 1 || day > 30){ showday.innerHTML="输入不能为空 or 天数只可以输入数字类型or 最多30天"; return; } }else if(month == 2){ if((year % 4==0 && year % 100 != 0) || year % 400 == 0){ if(day == '' || isNaN(day) || day < 1 || day > 29){ showday.innerHTML="输入不能为空 or 天数只可以输入数字类型 or 闰年最多28天"; return; } }else{ if(day == '' || isNaN(day) || day < 1 || day > 28){ showday.innerHTML="输入不能为空 or 天数只可以输入数字类型 or 平年最多29天"; return; } } } setdate(year , month , day); } //计算输入日期输出结果，考虑到多种情况 function setdate(year , month , day){ var result = document.getElementById("result"); if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){ if(day == 31){ if(month == 12){ year += 1 ; month = 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; }else{ month += 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } }else{ day += 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } }else if(month == 4 || month == 6 || month == 9 || month == 11){ if(day == 30){ if(month == 12){ year += 1 ; month = 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; }else{ month += 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } }else{ day += 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } }else if(month == 2){ if((year % 4==0 && year % 100 != 0) || year % 400 == 0){ if(day == 29){ if(month == 12){ year += 1 ; month = 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; }else{ month += 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } }else{ day += 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } }else{ if(day == 28){ if(month == 12){ year += 1 ; month = 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; }else{ month += 1 ; day = 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } }else{ day += 1 ; document.getElementById("result").value=year + "年" + month + "月" + day+"日"; } } } } //点击重置按钮清空 function reset(){ var year = document.getElementById("year"); var month = document.getElementById("month"); var day = document.getElementById("day"); year.value=''; month.value=''; day.value=''; } </script>
</head>
<body>
//构建小页面
<div id="contanel">
<div style="background:yellow; height: 100px; margin-top: -50px;width:1000px;line-height:100px;font-size: 50px">计算下一天的小程序</div>
年:<input type="text" id="year" onblur="yearblur()" onfocus="year()"/>
<div id="showyear" style="width:1000px;height:30px;" class="cs">
</div>
<br />
月:<input type="text" id="month" onfocus="month()" onblur="monthblur()"/>
<div id="showmonth" style="width:1000px;height:30px;" class="cs">
</div>
<br />
日:<input type="text" id="day" onfocus="day()" onblur="dayblur()" />
<div id="showday" style="width:1000px;height:30px;" class="cs">
</div>
<input type="button" value="提交" onclick="subclick()" style="width:100px;height:30px"/>
<br />//鼠标点击事件
这一天的下一天为:<br />
<input id="result">
<input onclick="reset()" type="button" value="重置" >
</div>
</body>
</html>
此程序使用js来实现功能模块，里面包含鼠标点击事件，鼠标焦点事件，当不符合功能的时候就不能提交，用许多if判断语句来编写，考虑到多种情况。恩，就这样。
京公网安备 11010502036488号