jquery Made Exquisite Countdown Effect
- 2021-06-28 10:30:02
- OfStack
This example shares the code for jquery to make a small countdown for your reference, which is as follows
html:
<div id="shop_rec">
<ul class="cf">
<li>
<img src="image/goods.jpg" alt=" millet Note Top Match Edition " />
<div>
<h5> millet Note Top Match Edition </h5>
<p> A phone fit all kinds of networks Champagne gold Mobile Connection <br /> double 4G Mobile phone Double Card and Dual Standby </p>
<em>¥2998<i> rise </i></em>
<span class="time" data-starttime="1445982375" data-endtime="1446350400"></span>
</div>
</li>
<li>
<img src="image/goods.jpg" alt=" millet Note Top Match Edition " />
<div>
<h5> millet Note Top Match Edition </h5>
<p> A phone fit all kinds of networks Champagne gold Mobile Connection <br /> double 4G Mobile phone Double Card and Dual Standby </p>
<em>¥2998<i> rise </i></em>
<span class="time" data-starttime="1445912375" data-endtime="1436350400"></span>
</div>
</li>
</ul>
</div>
jquery:
$(function(){
var abj = $("#shop_rec"),
timeObj = abj.find('.time');
var starttime = timeObj.data('starttime');
// Timer Functions
function actionDo(){
return setInterval(function(){
timeObj.each(function(index, el) {
var t = $(this),
surplusTime = t.data('endtime') -starttime;
if (surplusTime <= 0) {
t.html(" Activities have started ");
} else{
var year = surplusTime/(24*60*60*365),
showYear = parseInt(year),
month = (year-showYear)*12,
showMonth = parseInt(month),
day = (month-showMonth)*30,
showDay = parseInt(day),
hour = (day-showDay)*24,
showHour = parseInt(hour),
minute = (hour-showHour)*60,
showMinute = parseInt(minute),
seconds = (minute-showMinute)*60,
showSeconds = parseInt(seconds);
t.html("");
if (showYear>0) {
t.append("<span>"+showYear+" year </span>")
};
if (showMonth>0) {
t.append("<span>"+showMonth+" month </span>")
};
if (showDay>0) {
t.append("<span>"+showDay+" day </span>")
};
if (showHour>=0) {
t.append("<span>"+showHour+" hour </span>")
};
if (showMinute>=0) {
t.append("<span>"+showMinute+" Minute </span>")
};
if (showSeconds>=0) {
t.append("<span>"+showSeconds+" second </span>")
};
};
});
starttime++;
},1000); // Set execution or delay time
};
// Execute it
actionDo();
});
This article was originally created by FungLeo
This article is addressed at http://blog.csdn.net/fungleo/article/details/49446887
summary
Not particularly good, but small applications are perfectly fine.
Exciting Feature Sharing: Summary of js's Countdown Function
This is the whole content of this article, and I hope it will be helpful for everyone to learn.