Question

我已经创建了用于禁用/启用页面中按钮的代码：

btna = [
{
  "id":"#btn123",
  "formId" : "#wpcf7-f4849-p4850-o1",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 23, 2019 14:00:00",
},
{
  "id":"#btn1234",
  "formId" : "#wpcf7-f4940-p4850-o2",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 25, 2019 14:00:00",
},
{
  "id":"#btn12345",
  "formId" : "#wpcf7-f4941-p4850-o3",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 28, 2019 14:00:00",
}
]
$(document).ready(function(){
  let openTime
  let closeTime
  let button
  let itemForm
  let now = Date.now();
  btna.map(function(item){
    openTime = (new Date(item.openTime)).getTime()
    closeTime = (new Date(item.closeTime)).getTime()
    button = $( item.id )
    itemForm = $( item.formId )
    if (closeTime > now && openTime < now ) {
      // Button in correct time period
      button.addClass("active")
      // if you don't want to auto hide form in page startup just comment out this line 
      itemForm.hide()
      button.click(function(){
        $( item.formId ).toggle(250)
      })
    }else{
      // Button is'nt in its time period
      button.addClass("ex1")
      itemForm.hide()
    }
  })
})

我的问题是数组部分，我必须在其中添加几个日期。我想知道是否可以设置openTime和closeTime，然后自动为它们添加7天（1周）。

这是我尝试过的：

let openTime= new Date("June 23, 2019 14:00:00");
let closeTime= new Date("June 26, 2019 14:00:00");
btna = [
    {
        "id":"#btn123",
        "formId" : "#wpcf7-f4849-p4850-o1",
        'openTime' : openTime,
        'closeTime' : closeTime,
    },
    {
        "id":"#btn1234",
        "formId" : "#wpcf7-f4940-p4850-o2",
        'openTime' : openTime.setDate(openTime.getDate() + 7),
        'closeTime' : closeTime.setDate(openTime.getDate() + 7),
    },
    {
        "id":"#btn12345",
        "formId" : "#wpcf7-f4941-p4850-o3",
        'openTime' : openTime.setDate(openTime.getDate() + 7),
        'closeTime' : closTime.setDate(openTime.getDate() + 7),
    }
]

$(document).ready(function(){
    let button
    let itemForm
    let now = Date.now();
    btna.map(function(item){
        openTime = (new Date(item.openTime)).getTime()
        closeTime = (new Date(item.closeTime)).getTime()
        button = $( item.id )
        itemForm = $( item.formId )
        if (openTime < now && closeTime > now) {
            // Button in correct time period
            button.addClass("active")
            // if you don't want to auto hide form in page startup just comment out this line 
            itemForm.hide()
            button.click(function(){
                 $( item.formId ).toggle(250)
            })
        }else{
            // Button is'nt in its time period
            button.addClass("hide")
            itemForm.hide()
        }
    })
})

但是，这并不是我要找的东西。我起诉说，还有另一种较短的方法可以在循环中插入openTime和closeTime，如下所示：让openTime + = 7 让closeTime + = 7 但是，我不知道如何在btna数组中映射此变量！预先感谢

Answer 1

我建议您使用内置的this doc正确处理日期对象：

const btna = [
{
  "id":"#btn123",
  "formId" : "#wpcf7-f4849-p4850-o1",
  'openTime' : "June 24, 2019 14:00:00",
  'closeTime' : "June 23, 2019 14:00:00",
},
{
  "id":"#btn1234",
  "formId" : "#wpcf7-f4940-p4850-o2",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 25, 2019 14:00:00",
},
{
  "id":"#btn12345",
  "formId" : "#wpcf7-f4941-p4850-o3",
  'openTime' : "June 23, 2019 14:00:00",
  'closeTime' : "June 28, 2019 14:00:00",
}
];


const arr = btna.map(el => {
	el.openTime = addDays(7, el.openTime);
	el.closeTime = addDays(7, el.closeTime);
	
	return el;
});

function addDays(days, dateString) {
	let date = new Date(dateString);
	date.setDate(date.getDate() + days);
	return date;
}

console.log(arr);

Answer 2

下面添加了函数addDays，该函数带有两个日期，要添加的天数和原始对象数组。

内部，该函数返回一个新数组，该数组的第一部分只是您的第一个原始对象，但是具有新的开始和结束时间（不增加天数）。数组的第二部分散布了一个类似例程的结果：我们将除第一个对象外的所有对象都进行遍历，在它们上进行迭代，然后通过Object.assign重新创建它们，在此我们将原始对象作为对象并仅“覆盖”新的日期值。

let btna = 
[ 
  { "id":"#btn123", "formId" : "#wpcf7-f4849-p4850-o1", 'openTime' : "June 23, 2019 14:00:00", 'closeTime' : "June 23, 2019 14:00:00", }, 
  { "id":"#btn1234", "formId" : "#wpcf7-f4940-p4850-o2", 'openTime' : "June 23, 2019 14:00:00", 'closeTime' : "June 25, 2019 14:00:00", },
  { "id":"#btn12345", "formId" : "#wpcf7-f4941-p4850-o3", 'openTime' : "June 23, 2019 14:00:00", 'closeTime' : "June 28, 2019 14:00:00", }
]; 

let addDays = (start, close, days, arr) => {
  return [Object.assign(arr[0], {openTime: start, closeTime: close}),
    ...arr.slice(1).map(v => Object.assign(v, {openTime: new Date(start.getTime() + (days * 86400000) + (7200000)), closeTime: new Date(close.getTime() + (days * 86400000) + (7200000))}))
  ];
};

let startDate = new Date("June 23, 2019 14:00:00");
    closeDate = new Date("June 26, 2019 14:00:00");

let res = addDays(startDate, closeDate, 7, btna); 

console.log(res)

如果您要使用14:00:00而不是12:00:00，只需在每个日期添加+ (7200000)并设置第一个对象的值即可。

如何为此JavaScript代码创建自动循环？

2 个答案: