需求說明:
(1)首先是input顯示年月日時分格式時間,其中年月日實在本地時間基礎上,加上后面聯動值.小時默認08:00不變
(2)后面input內顯示天數,右側加減按鈕,控制天數,天數確定后,前面的日期聯動
手里還有活,話不多少,直接代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<meta content="width=device-width;initial-scale=1">
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
</head>
<style type="text/css">
.daysChange{width:20px;height:26px;display:inline-block;vertical-align:middle;margin-left:-3px;}
.daysChange>span{width:20px;height:13px;line-height:11px;text-align:center;font-size:16px;font-weight:bold;color:blue;background:#eee;cursor:pointer;display:block;}
.daysChange>span:hover{background:#ccc;color:darkblue;}
</style>
<body>
<input type="text" id="dateTime" value="">
<input type="text" id="days" value="3天">
<div class="daysChange">
<span id="plus">+</span>
<span id="minus">-</span>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
/* 有效期方法調用begin */
nowDate();
plusDate();
minusDate();
/* 有效期方法調用end */
};
/* 有效期增減 天數*/
function nowDate(){
var days = parseInt($("#days").val());
var myDate = new Date();
var d=myDate.getDate()+days;
var m=myDate.getMonth()+1;
var dataTime = myDate.getFullYear()+'-'+m+'-'+d+' '+'08:00';
$("#dateTime").val(dataTime);
}
function plusDate(){
$("#plus").click(function(){
var days = parseInt($("#days").val())+1;
if(days<100 && days>-1){
addDate(null,days);
$("#days").val(days+'天');
}
});
}
function minusDate(){
$("#minus").click(function(){
var days = parseInt($("#days").val())-1;
if(days<100 && days>-1){
addDate(null,days);
$("#days").val(days+'天');
}
})
}
function addDate(date,days){
var Dates=new Date();
Dates.setDate(Dates.getDate()+days);
var Month=Dates.getMonth()+1;
var Time = Dates.getFullYear()+'-'+Month+'-'+Dates.getDate()+' '+'08:00';
console.log(Time);
$("#dateTime").val(Time);
}
</script>
</html>