In front-end development, it is inevitable to use countdown. For example, if you are doing a Double Eleven event, you need to do some publicity work half a month before the event starts, and you need to inform users when the discount event will start. At this time, a countdown is used, such as reminding the user when the activity will start on a certain page of the entire site. In the later stages of the event, especially when there is only about 1 day left before the end of the event, a pop-up countdown will be used. This countdown is set at the top of the homepage of the entire site (of course it can also be set in other places, such as the middle of the homepage, etc.), and the pop-up window is set to disappear automatically after 10 seconds. It is up to the user to decide whether to click on the corresponding activity page and purchase the product.
Technical support required: CSS3, jQuery library;
The HTML code is as follows:
<section class="the_body">
<div class="countdown">
<h3>距中国雄于地球之日还有</h3>
<div class="countdown_time">
<span class="the_days"><i>0</i><i>3</i></span>
<i class="date_text">天</i>
<span class="the_hours"><i>0</i><i>7</i></span>
<i class="date_text">时</i>
<span class="the_minutes"><i>4</i><i>7</i></span>
<i class="date_text">分</i>
<span class="the_seconds"><i>1</i><i>1</i></span>
<i class="date_text">秒</i>
</div>
</div>
</section>
The css code is as follows:
.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}
.countdown .countdown_time{display:block;width:100%;text-align:center;}
.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;
margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight
:bold;}
.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:1px;left:0;}
.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:3px;left:0;}
.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;
border-bottom:none;text-decoration:none;padding: 0;}
.countdown .countdown_time .date_text:after{content:"";border:none;}
.countdown .countdown_time .date_text:before{content:"";border:none;}
The JavaScript code is as follows:
<script>
function remaintime() {
var date = new Date("Jan 1,2015 00:00:00");//设置倒计时结束时间
var nowdate = new Date();//获取当前日期
var remaintime = date.getTime() - nowdate.getTime();//获取现在到倒计时结束时间的毫秒数
var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//计算求得剩余天数
var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//计算求得剩余小时数
var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//计算求得剩余分钟数
var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
1000 * 60) / (1000));//计算求得剩余秒数
//当剩余天数小于10时，就在其前加一个0，以下剩余小时数、分钟数与秒数与此相同
if (remainday < 10) {
remainday = "0" + remainday;
}else{remainday+="";
//当剩余天数大于10时，剩余天数为数值，这是需要将该值转换为字符串，以下的剩余小时数、分钟数与秒数与此相同
}
if (remainhour < 10) {
remainhour = "0" + remainhour;
}else{remainhour+="";}
if (remainminute < 10) {
remainminute = "0" + remainminute;
}else{remainminute+="";}
if (remainsecond < 10) {
remainsecond = "0" + remainsecond;
}else{remainsecond+="";}
$(".the_days i:first-child").html(remainday.substr(0, 1));
$(".the_days i:last-child").html(remainday.substr(1, 2));
$(".the_hours i:first-child").html(remainhour.substr(0, 1));
$(".the_hours i:last-child").html(remainhour.substr(1, 2));
$(".the_minutes i:first-child").html(remainminute.substr(0, 1));
$(".the_minutes i:last-child").html(remainminute.substr(1, 2));
$(".the_seconds i:first-child").html(remainsecond.substr(0, 1));
$(".the_seconds i:last-child").html(remainsecond.substr(1, 2));
setTimeout("remaintime()",1000);//设置1秒后调用remaintime函数
}
remaintime();
setTimeout(function(){$(".countdown").hide();},10000);//在首页设置的弹窗效果，在分页这段代码可以不设置
</script>
This is the countdown effect I wrote myself. Of course, everyone can set the countdown effect according to their own preferences. For example, you can only display "days, hours, minutes, and minutes", but I personally feel that setting "days, hours, minutes, and seconds" is not enough atmosphere. The styles here can also be changed according to your own preferences, but the final effect is to create a fiery atmosphere before the event.
As for the html code, css code and JavaScript code here, please note:
I won’t go into details about the 1.html code. The main thing is how to set up the dom to facilitate JavaScript operation;
2.css code, here mainly uses the :before and :after pseudo-classes to set the three-dimensional effect of the countdown value;
3. The JavaScript code is also a very simple function. Here you need to convert the remaining time into a string to facilitate the interception and display of the string. In addition, use the setTimeout function to set the function to be executed every 1 second to dynamically display the remaining time. Of course, you can also use the setInterval function. The effects of these two function settings are basically the same.
At this point, a simple countdown effect is created. If you want to set a pop-up window countdown on the homepage, you can set the background to be cooler to attract users to click, and set the pop-up window to automatically disappear after 10 seconds (or set a close button, etc.).
There are many ways to implement countdown. I will introduce this one here first and will continue to summarize it when I have time.
The above is the entire content of this article. I hope it will be helpful to everyone in understanding javascript.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
