说明:以下思路一年过后回来再看自己写的很幼稚,不应该由下面的思路来进行解决的,应该是由时间戳进行加减再进行变成对应的时间值,这样才可以减少N多的判断
HTML部分:
<body>
<div class="oi">
<table class="big" cellspacing="0" cellpadding="0" border="0" width="0">
<tr>
<td style="text-align:center;" id="mintd">
<img src="003.png" class="mim" id="minbtn">
</td>
<td>
<input type="scroll_date" id="startDate" οnfοcus="changeDate()" placeholder="lai" class="demo-test-date input_start" type="text" style="text-align:center">
<input type="text" id="datesd" style="display:none;width:1px;">
</td>
<td style="text-align:center;" id="addtd">
<img src="002.png" class="mim" id="addbtn">
</td>
</tr>
</table>
<span>
<span style="float:right;padding-right:10px;" id="lab">420.00</span><span style="float:right">¥ </span>
</span>
</div>
<input type="text" id="datesd" style="display:none;width:1px;">
<table id="tab" width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table" style="background:#fff; align:center ;margin-top:0px;">
<tr>
<td style="width:15%;font-weight: bold ; ">序列</td>
<td style="width:60%;font-weight: bold ; ">名称</td>
<td style="width:5%;display:none;font-weight: bold ; "></td>
<td id='oprice' style="width:20%;font-weight: bold ; "><span class="rsingle">金额</span></td>
</tr>
<tr>
<td style="width:5%">2</td>
<td style="width:60%">xxx</td>
<td style="width:5%;display:none;">2014-11-04</td>
<td id='oprice' style="width:20%">¥ <span class="rsingle">44.00</span></td>
</tr>
<tr>
<td style="width:5%">3</td>
<td style="width:60%">xxx</td>
<td style="width:5%;display:none;">2014-11-04</td>
<td id='oprice' style="width:20%">¥ <span class="rsingle">56.00</span></td>
</tr>
</table>
CSS部分:
*{
margin:0px;
padding:0px;
font-family:"Microsoft YaHei";
}
.oi{
height:50px;
width:100%;
font-weight: bold ;
background-color:#069DD5;
font-size:30px;
color:#fff;
padding-top:10px;
}
.top_table{
}
.top_table td{
width:50%;
height:50px;
}
.footer2{ text-align:center; position:fixed; z-index:10; bottom:0; margin:20px 0% 0px 0%; font-size:14px; line-height:30px; width:100%; background:#FFFFFF; border-top:1px #CCCCCC solid; }
.footer3{ text-align:center; margin:30% 0% 5% 0%; font-size:12px; line-height:30px; width:100%; color:#999999; margin-bottom:0%}
.big{
width:50%;;
height:30px;
border:1px solid #c3c3c3;
background-color:#fff;
margin-left:10px;
float:left;
cursor:pointer;
}
.inp{
display:block;
height:35px;
overflow:hidden;
}
input{
width:100%;
border:0 none;
font-size:18px;
height:30px;
padding:0px;
}
JS部分:
//获取当天的时间
var date=new Date;
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
month=(month<10?"0"+month:month);
var nowDate=(year.toString()+"-"+month.toString()+"-"+day);
//提示框的显示
$("#startDate").attr("placeholder",""+nowDate);
$(function(){
getSum();
showAll();
//$("#mintd").hide();
$("#addtd").hide();
//新添加的2个按钮 实现对日期的相加减
//日期相减
$("#minbtn").click(function(){
//获取文本框的值
var data=$("#startDate").val();
//先显示左边的坐标默认为当前的日期
if(data==null || data==""){
$("#startDate").val(nowDate);
changeDate();
if (myMethod.compareTwoday(data, nowDate)) {
$("#addtd").hide();
}
}else{
data=myMethod.minbtn(data);
$("#startDate").val(data);
changeDate();
if (myMethod.compareTwoday(data, nowDate)) {
$("#addtd").hide();
}else{
$("#addtd").show();
}
}
});
//日期相加
$("#addbtn").click(function(){
//获取文本框的值
var data=$("#startDate").val();
//判断文本框大于今天日期
if(myMethod.compareTwoday(data,nowDate)){
$("#addtd").hide();
}else{
data=myMethod.addbtn(data);
$("#startDate").val(data);
changeDate();
if (myMethod.compareTwoday(data, nowDate)) {
$("#addtd").hide();
}else{
$("#addtd").show();
}
}
});
});
var myMethod=function(){
return {
addbtn:function(mdate){
//获取当前值的下一天
//获取当前的数组
var marray = new Array();
//把日期进行切割 格式为:yyyy-mm-dd
//新的日期
var nyear=0,nmonth=0,nday=0;
marray = mdate.split("-");
var year=parseInt(marray[0]);
var month=parseInt(marray[1]);
var day=parseInt(marray[2]);
//判断是否月尾 ==月的尾部 年的尾部
if(month==12 && day==31){
nyear=year+1;
nmonth=1;
nday=1;
}
//看一下是否是月尾
else if(day==this.getMonthDaysbyMoth(month) && month!=12){
nyear=year;;
nmonth=month+1;
nday=1;
}else{
nyear=year;
nmonth=month;
nday=day+1;
}
nmonth=(nmonth<10?"0"+nmonth:nmonth);
nday=(nday<10?"0"+nday:nday);
return nyear+"-"+nmonth+"-"+nday;
},
minbtn:function(mdate){
//获取当前值的上一天
//获取当前的数组
var marray = new Array();
//把日期进行切割 格式为:yyyy-mm-dd
//新的日期
var oyear=0,omonth=0,oday=0;
marray = mdate.split("-");
var year=parseInt(marray[0]);
var month=parseInt(marray[1]);
var day=parseInt(marray[2]);
//判断是否月的首部 ==月的首部年的首部
//年头
if(month==1 && day==1){
oyear=year-1;
omonth=12;
oday=31;
}
//月头
else if(day==1 && month!=1 ){
oyear=year;
omonth=month-1;
//获取上个月的天数
oday=this.getMonthDaysbyMoth(month-1);
} else{
oyear=year;
omonth=month;
oday=day-1;
}
omonth=(omonth<10?"0"+omonth:omonth);
oday=(oday<10?"0"+oday:oday);
return oyear+"-"+omonth+"-"+oday;
},
getMonthDays: function(mdate){
//获取当前的数组
var marray = new Array();
//把日期进行切割 格式为:yyyy-mm-dd
marray = mdate.split("-");
//月份
var month = parseInt(marray[1]);
//2月的判断的天数
if (month == 2) {
if (year % 4 == 0) {
if (year % 100 != 0) {
return 29;
}
else {
if (year % 400 == 0) {
return 29;
}
else {
return 28;
}
}
}
else {
return 28;
}
}
//如果是其他月份的判断
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
return 31;
}else{
return 30;
}
},
getMonthDaysbyMoth:function(month){
//2月的判断的天数
if (month == 2) {
if (year % 4 == 0) {
if (year % 100 != 0) {
return 29;
}
else {
if (year % 400 == 0) {
return 29;
}
else {
return 28;
}
}
}
else {
return 28;
}
}
//如果是其他月份的判断
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
return 31;
}else{
return 30;
}
},
compareTwoday:function(newday,oldday){
//获取当前的数组
var marray1 = new Array();
var marray2 = new Array();
//把日期进行切割 格式为:yyyy-mm-dd
marray1 = newday.split("-");
marray2 = oldday.split("-");
var year=parseInt(marray1[0]);
var month=parseInt(marray1[1]);
var day=parseInt(marray1[2]);
var year1=parseInt(marray2[0]);
var month1=parseInt(marray2[1]);
var day1=parseInt(marray2[2]);
if(year>year1 ){
return true;
}else if(year==year1 && month>month1 ){
return true;
}
else if(year=year1 && month ==month1 && day>=day1 ){
return true;
}
else{
return false;
}
}
};
}();
//进行对日期修改的时候进行查询功能
function changeDate(){
var ki=$("#datesd").val();
var mydate=$("#startDate").val();
if(!(ki==mydate)){
getSum();
showAll();
//显示全部列
showAll();
//获取所选的日期
var mydate=$("#startDate").val();
//获取日期列的值
var tableId= $("#tab tr");
//总价钱
var sum=0.00;
for (var i = 1; i < tableId.length; i++) {
//获取的第3列的值 日期值
var ndat=$(tableId[i]).children("td").eq(2).text();
if(mydate==ndat){
//获取的第4列的值
var oprice=$(tableId[i]).children("td").eq(3).text();
//开始截取3列中的数字并对数字进行转型
var onum=parseFloat(oprice.substr(1,oprice.length));
sum+=onum;
}else{
$(tableId[i]).hide();
}
}
$("#lab").html(sum.toFixed(2));
changeTd();
}
}
//修改序列号的列
function changeTd(){
var tableId= $("#tab tr");
var j=0;
for (var i = 1; i < tableId.length; i++) {
//获取的第4列的值
var imp=$(tableId[i]).css("display");
if(imp!="none"){
j++;
$(tableId[i]).children("td").eq(0).text(j);
}
}
}
//初始化时获取总价钱
function getSum(){
var tableId= $("#tab tr");
//总钱数
var str = 0.00;
for(var i=1;i<tableId.length;i++)
{
//获取的第4列的值
var oprice=$(tableId[i]).children("td").eq(3).text();
//开始截取3列中的数字并对数字进行转型
var onum=parseFloat(oprice.substr(1,oprice.length));
str+=onum;
}
$("#lab").html(str.toFixed(2));
}
//再次选择的时候就需要把全部table的tr值进行显示出来
function showAll(){
var tableId= $("#tab tr");
for (var i = 1; i < tableId.length; i++) {
$(tableId[i]).show();
$(tableId[i]).children("td").eq(0).text(i);
}
}
</script>