我在本地开发了一个基于 cookie 的自定义计时器。倒数计时器还会更改购买价格(根据结帐表单中的价格更改隐藏输入的值,具体取决于剩余时间):
<!-- ===========================форма НАЧАЛО=================== -->
<form class="form-maraphon" method="GET" action="/marathon/integrations/handlers.php">
<input type="text" name="name" class="form-maraphon-input" placeholder="Имя" required="">
<input type="text" name="phone" class="form-maraphon-input" placeholder="Телефон" required="">
<input type="email" name="email" class="form-maraphon-input" placeholder="Email" required="">
<input type="hidden" id="price" name="price" value="150">
<button class="form-maraphon-btn" type="submit">Перейти к оплате и забрать подарок</button>
</form>
<style>
.form-maraphon-input {
margin-top: 10px;
min-width: 300px;
height: 50px;
background: #F6F7FE;
border: none;
border-bottom: 1px solid #9BB3E8;
color: #A3A3A4;
font-size: 14px;
}
.form-maraphon-btn {
background: linear-gradient(93.78deg, #12C0BC 8.38%, #0ED12E 80.53%);
border-radius: 15px;
margin-top: 30px;
min-width: 190px;
height: 50px;
border: none;
border-bottom: 1px solid #9BB3E8;
color: #FFFFFF;
font-size: 14px;
}
</style>
<!-- ===========================форма КОНЕЦ==================== -->
<script src="https://unpkg.com/cookielib/src/cookie.min.js"></script>
<script type="text/javascript" src="/js/libs/moment_js/moment.js"></script>
<script>
function changePrice(time_start) {
time_start2 = moment(time_start); //переведем в удобный формат
now = moment(); //текущий момент времени
console.log('time_start2: ', time_start2);
console.log('now: ', now);
let time1 = time_start2.clone().add(2, 'hours');
let time2 = time_start2.clone().add(2, 'days');
let time3 = time_start2.clone().add(4, 'days');
let price1 = '350';
let price2 = '650';
let price3 = '2420';
if (now.isAfter(time1) && now.isBefore(time2)) {
document.getElementById('price').value = price1;
console.log('активирован price1');
}
if (now.isAfter(time2) && now.isBefore(time3)) {
document.getElementById('price').value = price2;
console.log('активирован price2');
}
if (now.isAfter(time3)) {
document.getElementById('price').value = price3;
console.log('активирован price3');
}
}
function getTimeRemaining(endtime) {
var t = endtime + 48 * 2 * 60 * 60 * 1000 - Date.parse(new Date());
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
function updateClock() {
var t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
var timeinterval = setInterval(updateClock, 1000);
changePrice(endtime);
}
//установим текущее клиентское время в куку, если значения нет
if (getCookie('timeFirst') == null) {
setCookie('timeFirst', String(Date.parse(new Date())), {
expires: Date(14)
});
}
var timeFirst = Number(getCookie('timeFirst'));
console.log("timeFirst: ", timeFirst);
initializeClock('countdown', timeFirst);
</script>
<style>
.countdown {
color: #bold;
display: inline-block;
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 26px;
line-height: 32px;
}
.countdown-number {
border-radius: 3px;
display: inline-block;
}
.countdown-time {
padding: 0px 15px 0px 15px;
border-radius: 3px;
background: #008116a;
display: inline-block;
}
.countdown-text {
display: block;
font-family: Montserrat;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 16px;
}
</style>
然后他开始将代码集成到生产站点上的一个现成页面中: https ://denisdemidov.com/marathon/
集成时,我发现了一个视觉错误-我开发的带有计时器的标题跳转,并且有时在计时器中显示NaN而不是值......这是什么问题?我在集成过程中唯一更改的是脚本连接路径和一个用于更改计时器颜色的 css 属性。
集成时出现重复代码,问题解决。