Countdown 5 seconden voor einde andere pagina laden

zaterdag 20 mei 2017 15:50

Acties:

0 Henk 'm!

StevenT1987

Topicstarter

Beste Scripters,

Ik ben opzoek naar een script dat kan aftellen naar een specifieke tijd en datum en die dan, wanneer de tijd bereikt is, redirect naar een andere pagina.

Ik heb een script wat aftelt en dat wilt doorverwijzen. Alleen, ik wil dat dit script bij het aftellen vanaf 5 naar een andere pagina gaat. Dus dan kan ik daar zo'n gaaf filmpje met old skool aftellerij in zetten

en deze dan weer met een meta redirect naar de volgende pagina na 5 seconden.

Ik heb dit:
HTML

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
#container {
    width:100%;
    background-color:#1c874a;

}
#body{
    position:relative;
    width:900px;
    z-index:1;
    margin:auto;
} 
#header {
    position:relative;
    width:100%;
    height:563px;
    margin:auto;
    font-size: xx-large;
    font-family: Calibri;
    font-weight: bold;
    text-align: center;
    color:#fff;
    top: 10px;
    background-image: url(Logo%2021%20mei%20bureaublad%20.jpg);
}
#animalia {
    color:#FFF;
    font-size:150px;
    font-family:Calibri;
    font-weight:bold;
    top: 0px;
    text-align:center;
}
#countdown {
    color:#FFF;
    font-size:50px;
    font-family:Calibri;
    font-weight:bold;
    top: 0px;
    text-align:center;
}
#countbox {
    position:relative;
    width:100%;
    height:200px;
    margin:auto;
    font-size: xx-large;
    font-family: Calibri;
    font-weight: bold;
    text-align: center;
    color:#fff;
    top: 50px;
}

</style>

<script type="text/javascript">
function redirect()
{
window.location.href = "resultaat.html";
}
// NOTE: the month entered must be one less than current month. ie; 0=January, 11=December
// NOTE: the hour is in 24 hour format. 0=12am, 15=3pm etc
// format: dateFuture = new Date(year,month-1,day,hour,min,sec)
// example: dateFuture = new Date(2003,03,26,14,15,00) = April 26, 2003 - 2:15:00 pm

dateFuture = new Date(2017,4,21,20,59,59);
function GetCount(){

dateNow = new Date(); //grab current date
amount = dateFuture.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;

// time is already past
if(amount < 5){
setTimeout("redirect()");
}
// date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";

amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

days=Math.floor(amount/86400);//days
amount=amount%86400;

hours=Math.floor(amount/3600);//hours
amount=amount%3600;

mins=Math.floor(amount/60);//minutes
amount=amount%60;

secs=Math.floor(amount);//seconds

if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
out += secs +" seconds";
document.getElementById('countbox').innerHTML=out;

setTimeout("GetCount()", 1000);
}
}

window.onload=GetCount;//call when everything has loaded

//-->
</script>
</head>

<body bgcolor="#1c874a">
<div id="container">
    <div id="body">
      <div id="header"></div>
        <div id="animalia">AnimaliA</div>
        <div id="countdown">Countdown</div>
      <div id="countbox"></div>
    </div>
</div>
</body>
</html>

En ik heb dit:
JAVASCRIPT

code:

/*

    countUp.js
    by @inorganik

*/

// target = id of html element or var of previously selected html element where counting occurs
// startVal = the value you want to begin at
// endVal = the value you want to arrive at
// decimals = number of decimal places, default 0
// duration = duration of animation in seconds, default 2
// options = optional object of options (see below)

var CountUp = function(target, startVal, endVal, decimals, duration, options) {

    // make sure requestAnimationFrame and cancelAnimationFrame are defined
    // polyfill for browsers without native support
    // by Opera engineer Erik Möller
    var lastTime = 0;
    var vendors = ['webkit', 'moz', 'ms', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }

    var self = this;
    self.version = function () { return '1.8.5'; };

    function formatNumber(num) {
        num = num.toFixed(self.decimals);
        num += '';
        var x, x1, x2, rgx;
        x = num.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? self.options.decimal + x[1] : '';
        rgx = /(\d+)(\d{3})/;
        if (self.options.useGrouping) {
            while (rgx.test(x1)) {
                x1 = x1.replace(rgx, '$1' + self.options.separator + '$2');
            }
        }
        return self.options.prefix + x1 + x2 + self.options.suffix;
    }
    // Robert Penner's easeOutExpo
    function easeOutExpo(t, b, c, d) {
        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
    }
    function ensureNumber(n) {
        return (typeof n === 'number' && !isNaN(n));
    }
    
    // default options
    self.options = {
        useEasing: true, // toggle easing
        useGrouping: true, // 1,000,000 vs 1000000
        separator: ',', // character to use as a separator
        decimal: '.', // character to use as a decimal
        easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
        formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
        prefix: '', // optional text before the result
        suffix: '' // optional text after the result
    };

    // extend default options with passed options object
    if (options && typeof options === 'object') {
        for (var key in self.options) {
            if (options.hasOwnProperty(key) && options[key] !== null) {
                self.options[key] = options[key];
            }
        }
    }

    if (self.options.separator === '') self.options.useGrouping = false;

    self.initialize = function() { 
        if (self.initialized) return true;
        self.d = (typeof target === 'string') ? document.getElementById(target) : target;
        if (!self.d) { 
            console.error('[CountUp] target is null or undefined', self.d);
            return false;
        }
        self.startVal = Number(startVal);
        self.endVal = Number(endVal);
        // error checks
        if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
            self.decimals = Math.max(0, decimals || 0);
            self.dec = Math.pow(10, self.decimals);
            self.duration = Number(duration) * 1000 || 2000;
            self.countDown = (self.startVal > self.endVal);
            self.frameVal = self.startVal;
            self.initialized = true;
            return true;
        }
        else {
            console.error('[CountUp] startVal or endVal is not a number', self.startVal, self.endVal);
            return false;
        }
    };

    // Print value to target
    self.printValue = function(value) {
        var result = self.options.formattingFn(value);

        if (self.d.tagName === 'INPUT') {
            this.d.value = result;

        }
        else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
            this.d.textContent = result;
        }
        else {
            this.d.innerHTML = result;
        }
    };

    self.count = function(timestamp) {

        if (!self.startTime) { self.startTime = timestamp; }

        self.timestamp = timestamp;
        var progress = timestamp - self.startTime;
        self.remaining = self.duration - progress;

        // to ease or not to ease
        if (self.options.useEasing) {
            if (self.countDown) {
                self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
            } else {
                self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
            }
        } else {
            if (self.countDown) {
                self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
            } else {
                self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
            }
        }

        // don't go past endVal since progress can exceed duration in the last frame
        if (self.countDown) {
            self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
        } else {
            self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
        }

        // decimal
        self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;

        // format and print value
        self.printValue(self.frameVal);

        // whether to continue
        if (progress < self.duration) {
            self.rAF = requestAnimationFrame(self.count);
        } else {
            if (self.callback) self.callback();
        }
    };
    // start your animation
    self.start = function(callback) {
        if (!self.initialize()) return;
        self.callback = callback;
        self.rAF = requestAnimationFrame(self.count);
    };
    // toggles pause/resume animation
    self.pauseResume = function() {
        if (!self.paused) {
            self.paused = true;
            cancelAnimationFrame(self.rAF);
        } else {
            self.paused = false;
            delete self.startTime;
            self.duration = self.remaining;
            self.startVal = self.frameVal;
            requestAnimationFrame(self.count);
        }
    };
    // reset to startVal so animation can be run again
    self.reset = function() {
        self.paused = false;
        delete self.startTime;
        self.initialized = false;
        if (self.initialize()) {
            cancelAnimationFrame(self.rAF);
            self.printValue(self.startVal);
        }
    };
    // pass a new endVal and start animation
    self.update = function (newEndVal) {
        if (!self.initialize()) return;
        newEndVal = Number(newEndVal);
        if (!ensureNumber(newEndVal)) {
            console.error('[CountUp] update() - new endVal is not a number', newEndVal);
            return;
        }
        if (newEndVal === self.frameVal) return;
        cancelAnimationFrame(self.rAF);
        self.paused = false;
        delete self.startTime;
        self.startVal = self.frameVal;
        self.endVal = newEndVal;
        self.countDown = (self.startVal > self.endVal);
        self.rAF = requestAnimationFrame(self.count);
    };

    // format startVal on initialization
    if (self.initialize()) self.printValue(self.startVal);
};

Zelf heb ik totaal geen idee waar ik dit kan aanpassen.......

Ook verwijderd hij de dagen, uren, minuten wanneer die op 59 seconden is met aftellen.
Iemand daar ook ervaring mee om dit gewoon te laten staan?

Zoals jullie aan de afteldatum kunnen zien..... Is het eigenlijk voor gisteren.....
Is er iemand die mij hier uit de brand kan helpen?!?!

Met "diervriendelijke" groet,
Steven

(gaat gebruikt worden voor een aftelling van een crowdfunding van de Dierenambulance Amsterdam)

zaterdag 20 mei 2017 17:39

Creepy

Tactical Espionage Splatterer

Log amount eens naar de console elke keer. Tip: dat zijn geen seconden. Een beetje debuggen moet je zelf doen he

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

zaterdag 20 mei 2017 16:07

Acties:

0 Henk 'm!

Verwijderd

Kun je dan niet het makkelijkst gewoon je dateFuture op (2017,4,21,20,59,54) zetten?

zaterdag 20 mei 2017 16:19

Acties:

0 Henk 'm!

StevenT1987

Topicstarter

Helaas niet, want dan telt hij af tot die 54 dus 54 is 0 en 54 moet gewoon 6 zijn zodat hij door gaat naar een andere pagina waar een filmpje van 5 seconden staat voor de laatste aftelling.

Anders tel je 2x af tot 0.... Dat is een beetje vaag.... Snap je?

zaterdag 20 mei 2017 16:21

Acties:

0 Henk 'm!

Arunia

Let er wel op dat wanneer de nieuwe pagina gaat laden, niet iedereen tegelijk dat "gave" filmpje gaat zien ivm laad tijden.

zaterdag 20 mei 2017 16:24

Acties:

0 Henk 'm!

StevenT1987

Topicstarter

Hij wordt lokaal gedraaid

Dus met het testen en wel houd ik rekening met de countdown.

zaterdag 20 mei 2017 16:27

Acties:

0 Henk 'm!

SinergyX

____(>^^(>0o)>____

Is het niet handiger 2 countdowns te doen, bij 1 van de countdowns -5sec en die enkel een div/overlay er in zet met filmpje? Dan de ander countdown voor de redirect?

^{Nog 1 keertje.. het is SinergyX, niet SynergyX}
_{Im as excited to be here as a 42 gnome warlock who rolled on a green pair of cloth boots but was given a epic staff of uber awsome noob pwning by accident.}

zaterdag 20 mei 2017 16:31

Acties:

0 Henk 'm!

StevenT1987

Topicstarter

Erm.... Daar niet over nagedacht. Ik ben er echt te lang uit om daar aan gedacht te hebben.
En geen idee ook hoe ik dat voor elkaar zou moeten doen.

Maar dan nog zou ik een countdown moeten hebben waaraan ik ingeef dat hij niet op 0 moet redirecten maar op 5 seconden moet redirecten..... Of de ovelay laten zien.

Wanneer ik dat heb, kan ik verder kijken naar andere opties... Toch?

zaterdag 20 mei 2017 17:11

Acties:

0 Henk 'm!

nickyvandijk

Het is ook een optie om een Jquery plugin te gebruiken zoals deze http://hilios.github.io/jQuery.countdown/

De plugin heeft een event dat afgaat op het moment dat de countdown is afgelopen, dus daar zou je eventueel je redirect aan kunnen koppelen.

[ Voor 17% gewijzigd door nickyvandijk op 20-05-2017 17:14 ]

zaterdag 20 mei 2017 17:27

Acties:

0 Henk 'm!

StevenT1987

Topicstarter

Ik HEB een redirect

Het WERKT.... MAARRRR ik wil niet de redirect op 0 seconden hebben, maar op 5 seconden hebben.

Ik dacht dus dat het met:

code:

// time is already past
if(amount <5){
setTimeout("redirect()");
}
// date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";

te maken had. Maar de 5 maakt helemaal niks uit.... Ook niet bij de secs=0.....

En neeee,,,, ik kan de countdown ook niet 5 seconden vervroegen....
Dus wanneer de countdown op 0days 0hours 0minutes 5seconds staat, moet hij redirecten.

[ Voor 17% gewijzigd door StevenT1987 op 20-05-2017 17:28 ]

zaterdag 20 mei 2017 17:39

Acties:

Beste antwoord ✓
+1 Henk 'm!

Creepy

Tactical Espionage Splatterer

Log amount eens naar de console elke keer. Tip: dat zijn geen seconden. Een beetje debuggen moet je zelf doen he

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

zaterdag 20 mei 2017 17:46

Acties:

+1 Henk 'm!

Creepy

Tactical Espionage Splatterer

Extra tip voor de volgende keer: console.log(amount) en vergeet de F12 knop niet,

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

zaterdag 20 mei 2017 17:46

Acties:

0 Henk 'm!

MrMonkE

★ EXTRA ★

Of gewoon: <meta http-equiv="refresh" content="5;url=http://www.google.com/" />

★ What does that mean? ★

zaterdag 20 mei 2017 17:49

Acties:

0 Henk 'm!

StevenT1987

Topicstarter

MrMonkE,

Dat gaat niet werken aangezien het een countdown is wat +- x aantal uur van te voren aan gaat.
Het is dus niet bekend hoeveel secondes van te voren.

zaterdag 20 mei 2017 18:22

Acties:

0 Henk 'm!

Alexxxxxxxxxx

Hier had uw tekst kunnen staan

Tenzij je gebruik maakt van PHP (of Javascript) om de 5 seconden dynamisch te bepalen.

zaterdag 20 mei 2017 18:30

Acties:

0 Henk 'm!

StevenT1987

Topicstarter

Ik maak gebruik van bovenstaande script (helemaal boven aan).

Heb nu dit veranderd:

code:

// time is already past
if(amount < 5000){
setTimeout("redirect()");
}

En dit werkt.

Vraag

Beste antwoord (via StevenT1987 op 20-05-2017 17:48)

Alle reacties