本文介绍如何使用原生JavaScript实现通过左右箭头按钮切换日期显示的功能。文章提供了完整的HTML结构与JS逻辑代码，详细解析了日期增减算法及边界条件处理，适用于需要自定义日期导航组件的前端开发场景。
功能效果与概述
首先展示实现效果：通过左右尖括号按钮可以改变中间显示的日期数值。（注：点击中间显示区域会弹出时间选择器，此处省略插件说明，重点介绍原创实现的逻辑部分）
HTML结构实现
HTML结构部分（左右箭头均使用图片素材，网络上此类资源较多，此处仅展示本地路径示例）
<div>
<span class="leftspan" <span style="color:#FF0000;">onclick="reducedate()"</span>><img src="IMG/return.png" style="height:100%; width:100%;"/></span>
<label id="beginTime" class="kbtn"></label>
<span class="rightspan" <span style="color:#FF0000;">onclick="adddate()"</span>><img src="IMG/right.png" style="height:100%; width:100%;"</span>
</div>HTML部分的代码结构较为简单，无需过多解释。
接下来是核心的原生JavaScript实现部分（文末附有本插件完整附件，欢迎交流讨论）
JavaScript核心逻辑
function adddate(){
//向右跳转时间（加时间）的按钮
var s = document.getElementById("beginTime").innerHTML;
var arr = s.split("/"); //将获取的数组按“/”拆分成字符串数组
var year = parseInt(arr[0]);//开分字符串数组的第一个地址的内容是年份
var mouth = parseInt(arr[1]);//开分字符串数组的第二个地址的内容是月份
var date = parseInt( arr[arr.length-1]);//开分字符串数组的第三个地址的内容是日期
if(date == 28){//当日期为28号时 只判断是否是2月
switch(mouth)
{
case 2:
if(year % 4 == 0 && year % 100 !=0 || year%400 ==0){
date = date +1;
} //如果是闰年2月 日期就加一
else {
date = 1;
mouth = mouth +1;
} //不是闰年2月 日期就变为1 月份加一
}
}else if(date == 29){ //当日期为29号是 也是判断是否是2月
switch(mouth)
{
case 2:
date = 1;
mouth = mouth +1;
} //当29号出现必定是闰年 日期变为1 月份加一
}else if(date == 30){ //当日期为30 时
switch(mouth)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
date = date +1;
break; //这些月份的时候一个月有31天 到30的时候再加一
case 4:
case 6:
case 9:
case 11:
date = 1;
mouth = mouth +1;
break; //这些月份的时候一个月有30天 到30的时候 日期变为1 月份加一
}
}else if(date == 31){
switch(mouth)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
date = 1;
mouth = mouth+1;
break; //这些月份的时候一个月有31天 到31的时候 日期为1月份加一
case 12:
date = 1;
mouth = 1;
year = year+1;;
break; //十二月 的 31 号 日期变为一 月份变为一 年份加一
}
}else{
date +=1;
}
document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date;
}
function reducedate(){
//向左跳转时间（减时间）的按钮
var s = document.getElementById("beginTime").innerHTML;
var arr = s.split("/"); //将获取的数组按“/”拆分成字符串数组
var year = parseInt(arr[0]);//开分字符串数组的第一个地址的内容是年份
var mouth = parseInt(arr[1]);//开分字符串数组的第二个地址的内容是月份
var date = parseInt( arr[arr.length-1]);//开分字符串数组的第三个地址的内容是日期
if(date == 1){//当日期为1时，再剪就会改变月份，甚至年份
switch(mouth){
case 1:
date = 31;
mouth = 12;
year = year-1;
break; //一月一日 再剪一天 年份减一 月份为12 日期为31
case 2:
case 4:
case 6:
case 8:
case 9:
case 11:
date = 31;
mouth = mouth-1;
break; //这些月一日 再剪一天 月份减一 日期为31
case 3:
if(year % 4 == 0 && year % 100 !=0 || year%400 ==0){
date = 29;
mouth = mouth -1;
}else {
date = 28;
mouth = mouth -1;
}
break; //三月一日 再剪一天 月份减一 日期为根据是否是闰年来判断 日期
case 5:
case 7:
case 10:
date = 30;
mouth = mouth -1;
break; //这些月一日 再剪一天 月份减一 日期为30
}
}else{
date = date-1;
}
document.getElementById("beginTime").innerHTML = year+"/"+mouth+"/"+date; //拼接字符串插入到标签中
}以下是具体的API使用方式说明：
向左尖括号点击事件（用于减少日期）
<span style="color:#FF0000;">onclick="reducedate("tagid")";
/span> 向右尖括号点击事件（用于增加日期）
<span style="color:#FF0000;">onclick="adddate()("tagid")";
/span> 上述代码可直接复制到项目的JS文件中，或通过脚本标签插入页面。
以上介绍的是利用原生JS通过左右箭头选择日期的实例代码，希望能对读者有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本网站的支持！