效果展示:
效果
- 指定倒计时
- 到期自动隐藏
- 滑动到指定位置显示倒计时
- 默认cookie记录暂不显示的时间段(cookie设置域)
不多说直接看代码
<div class="wrapper" id="wrapper">
<img class="backgroundmap-bottom herf-img" src="count-down.png" width="1200">
<img class="backgroundmap-middle herf-img" src="count-down1.png" width="1200">
<img class="backgroundmap-countdown" src="dao-ji-shi.png" id="backgroundmap-countdown">
<div class="countdown herf-img" id="showTime"></div>
</div>
<script type="text/javascript">
//输入一个倒计时开始时间
var isTime = new Date('2020-10-20');
var showTime = document.getElementById('showTime');
if (showTime != undefined) {
//计算倒计时的函数
function datetime() {
var isillis = isTime.getTime() - new Date().getTime();
if (isillis > 0) {
var tian = Math.floor(isillis / 1000 / 60 / 60 / 24);
if (tian < 10) {
tian = '0' + tian;
}
var hours = Math.floor((isillis - tian * 24 * 60 * 60 * 1000) / 1000 / 60 / 60);
if (hours < 10) {
hours = '0' + hours;
}
var minutes = Math.floor((isillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000) / 1000 / 60);
if (minutes < 10) {
minutes = '0' + minutes;
}
var seconds = Math.floor((isillis - tian * 24 * 60 * 60 * 1000 - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000);
if (seconds < 10) {
seconds = '0' + seconds;
}
showTime.innerHTML = "<div>" + "<span class='insert-part'>" + tian + '</span><span class="tian">天<span class="insert-part"></span></span>' + "<span class='insert-part'>" + hours + '</span><span class="shi">时??<span class="insert-part">:??</span></span>' + "<span class='insert-part'>" + minutes + '</span><span class="fen">分??<span class="insert-part"></span></span>' + "<span class='insert-part'>" + seconds + '</span><span class="miao">秒</span>' + "</div>";
} else {
//时间结束清除定时器
clearInterval(id);
//隐藏倒计时动画
$("#wrapper").hide();
}
}
datetime();
}
//执行定时器
var id = setInterval(datetime, 1000);
//点击倒计时跳转到
$(".herf-img").click(function () {
window.location.href = "/";
});
//是否关闭倒计时页面
$("#backgroundmap-countdown").click(function () {
$("#wrapper").hide();
if (!getCookie('_timer')) {
setCookie('_timer', 1, 1)
}
});
//设置倒计时页面不显示时间以及cookie域
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays2460601000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/;domain=test.com";
}
//获取关闭倒计时的信息
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
$(function () {
// 监听滚动事件
$(window).scroll(function () {
if (getCookie('_timer')) {
return false;
}
// 获得div的高度
var h = $("#scroll-a").offset().top;
// if($(this).scrollTop()>h && $(this).scrollTop() < h+$("#zui_xin").height()){
if ($(this).scrollTop() > h) {
// 滚动到指定位置
$("#wrapper").show();
} else {
$("#wrapper").hide();
}
});
})
</script>