我试着写代码,下一步应该做: 当客户来到一个网站时,他看到两个输入,今天的日期和日期加上三天。在底部,该网站将是一个表格,显示两个输入日期之间的天数(排序为1天,2-3天,4-7天)。我编写了可以设置日期的代码,但我不能按类设置元素的样式。我是最新的。请任何帮助。
document.addEventListener('DOMContentLoaded', function() {
var dFrom = document.querySelector('#my_lease_before');
var dTo = document.querySelector('#my_lease_from');
// get today date
var dNow = new Date();
// create var for add 3 days
var dThen = new Date();
// add 3 days
dThen.setDate(dThen.getDate() + 3);
// add value to inputes
dTo.value = formatDate(dNow);
dFrom.value = formatDate(dThen);
//date-date=number, after make from millisec to days
var dd = (dThen - dNow) / 1000 / 60 / 60 / 24;
console.log(dd);
// alert(dd);
if (dd <= 1) {
var s1 = document.querySelector('.space-1');
s1.style.borderRadius = '50%';
s1.style.background = 'red';
s1.style.display = 'inline-block';
s1.style.color = 'white';
s1.style.padding = '5px 2px';
} else if (dd > 1 && dd <= 2) {
var s2 = document.querySelectorAll('.space-2');
s2.style.borderRadius = '50%';
s2.style.background = 'red';
s2.style.display = 'inline-block';
s2.style.color = 'white';
s2.style.padding = '5px 2px';
} else if (dd > 2 && dd <= 6) {
var s3 = document.querySelectorAll('.space-3');
s3.style.borderRadius = '50%' ;
s3.style.borderRadius = '50%';
s3.style.background = 'red';
s3.style.display = 'inline-block';
s3.style.color = 'white';
s3.style.padding = '5px 2px';
alert(s3);
}else if (dd > 6 && dd <= 10) {
var s4 = document.getElementsByClass('space-4');
s4.style.borderRadius = '50%';
s4.style.background = 'red';
s4.style.display = 'inline-block';
s4.style.color = 'white';
s4.style.padding = '5px 2px';
}else if (dd > 10 && dd <= 16) {
var s5 = document.getElementsByClass('space-5');
s5.style.borderRadius = '50%';
s5.style.background = 'red';
s5.style.display = 'inline-block';
s5.style.color = 'white';
s5.style.padding = '5px 2px';
}else if (dd > 16 && dd <= 24) {
var s6 = document.getElementsByClass('space-6');
s6.style.borderRadius = '50%';
s6.style.background = 'red';
s6.style.display = 'inline-block';
s6.style.color = 'white';
s6.style.padding = '5px 2px';
}
});
function formatDate(date) {
//add zero for date before 10
return [
date.getDate().toString().padStart(2, '0'),
(date.getMonth() + 1).toString().padStart(2, '0'),
date.getFullYear()
].join('.');
// delimiter
};
function parseDate(date) {
var tmp = date.split('.');
return new Date(tmp[2], tmp[1], tmp[0], 0, 0, 0, 0);
};
<label>
<span>rent from :</span>
<input type="data" name="my_lease_from" id="my_lease_from">
</label>
<label>
<span>rent to :</span>
<input type="data" name="my_lease_before" id="my_lease_before">
</label>
<div class="my_price_gps">
<span>GPS навигатор</span>
<table>
<thead>
<tr>
<th>2 дня</th>
<th>3-6 дней</th>
<th>7-10 дней</th>
<th>11-16 дней</th>
<th>17-24 дня</th>
</tr>
</thead>
<tbody>
<tr>
<td class="my_day_2"><span class="space-2">5 €</span></td>
<td class="my_day_3"><span class="space-3">4 €</span></td>
<td class="my_day_4"><span class="space-4">4 €</span></td>
<td class="my_day_5"><span class="space-5">3 €</span></td>
<td class="my_day_6"><span class="space-6">2 €</span></td>
</tr>
</tbody>
</table>
</div>
<div class="my_price_chair">
<span>Детские<br/>автокресла</span>
<table>
<tbody>
<tr>
<td class="my_day_2"><span class="space-2">4 €</span></td>
<td class="my_day_3"><span class="space-3">0 €</span></td>
<td class="my_day_4"><span class="space-4">0 €</span></td>
<td class="my_day_5"><span class="space-5">0 €</span></td>
<td class="my_day_6"><span class="space-6">0 €</span></td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:-1)
使用像这样 要将日期解析为UTC,请附加Z - 例如:
new Date('2011-04-11T10:20:30Z').
要以UTC格式显示日期,请使用.toUTCString(),
要在用户的当地时间显示日期,请使用.toString().