Countdown-effekt
Countdown-effekt med live nedtælling bygget op omkring koden fra Ales fra Trulycode.com
<div id="countdown"> <h3><span class="linebreak">Hvor længe er der</span> til Mona's fødselsdag ?</h3> <p>Der er nu</p> <div id="tid"> <p class="days">00</p> <p>dage</p> <p class="hours">00</p> <p>timer</p> <div class="linebreak"></div> <p class="minutes">00</p> <p>minutter</p> <p class="seconds">00</p> <p>sekunder</p> </div> <p>til at <strong><span class="linebreak">Mona B. Hayes</span></strong> fylder <strong>9 år</strong> !</p> </div>
html {
width: 100%;
height: 100%;
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}
body {
width: 100%;
background: url(../images/img_bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #999;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-size: 1.6rem;
color: #c6c6c6;
line-height: 1.2rem;
}
/* WRAP COUNTDOWN */
#countdown {
box-sizing: border-box;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 470px;
padding: 12px 10px 22px 10px;
margin-left: -235px;
margin-top: -100px;
background: #EEE;
border: 2px solid red;
border-radius: 12px;
text-align: center;
}
#countdown > h3 {
font-size: 20px;
font-size: 2.0rem;
color: red;
line-height: 1.2;
padding: 0;
padding-right: 5px;
margin-bottom: 6px;
}
#countdown > p {
font-size: 18px;
font-size: 1.6rem;
color: #333;
padding: 0;
margin: 0;
padding-right: 5px;
line-height: 1.2;
}
#tid {
display: inline-block;
margin: 8px 0;
}
#tid > p,
#tid > p.days,
#tid > p.hours,
#tid > p.minutes,
#tid > p.seconds {
display: inline-block;
font-size: 18px;
color: red;
padding: 0;
margin: 0;
line-height: 1.2;
}
#tid > p {
color: #0B4499;
padding-right: 7px;
}
/* MOBILE */
#countdown > h3 > span.linebreak { /* LINE BREAK HEADING PÅ MOBILE */
width: 0;
/* MQ */
}
#tid div.linebreak { /* LINE BREAK EFTER "DAGE" */
display: none;
/* MQ */
}
@media only screen and (max-width : 515px) {
#countdown {
width: 250px;
margin-left: -125px;
}
#countdown > h3 > span.linebreak {
width: 100%;
}
#tid div.linebreak {
display: block;
}
}
/*
* Basic Count Down to Date and Time
* Author: @mrwigster / trulycode.com
*/
(function (e) {
e.fn.countdown = function (t, n) {
function i() {
eventDate = Date.parse(r.date) / 1e3;
currentDate = Math.floor(e.now() / 1e3);
if (eventDate <= currentDate) {
n.call(this);
clearInterval(interval)
}
seconds = eventDate - currentDate;
days = Math.floor(seconds / 86400);
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / 3600);
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
days == 1 ? thisEl.find(".timeRefDays").text("day") : thisEl.find(".timeRefDays").text("days");
hours == 1 ? thisEl.find(".timeRefHours").text("hour") : thisEl.find(".timeRefHours").text("hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("minute") : thisEl.find(".timeRefMinutes").text("minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("second") : thisEl.find(".timeRefSeconds").text("seconds");
if (r["format"] == "on") {
days = String(days).length >= 2 ? days : "0" + days;
hours = String(hours).length >= 2 ? hours : "0" + hours;
minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
}
if (!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds)
}
else {
alert("Invalid date. Example: 30 Tuesday 2013 15:50:00");
clearInterval(interval)
}
}
var thisEl = e(this);
var r = {
date: null,
format: null
};
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
})(jQuery);
$(document).ready(function () {
function e() {
var e = new Date;
e.setDate(e.getDate() + 60);
dd = e.getDate();
mm = e.getMonth() + 1;
y = e.getFullYear();
futureFormattedDate = mm + "/" + dd + "/" + y;
return futureFormattedDate
}
$("#countdown").countdown({
date: "29. juni 2016 12:00:00", // DATO HER..
format: "on"
});
});
Countdown-effekt med live nedtælling bygget op omkring koden fra Ales fra Trulycode.com