1. #1

    Registered
    30/05/15
    Location
    Brussel
    Posts
    28
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Wil een countdown toevoegen aan mijn website

    Hallo,
    Ik heb dit gevonden:
    https://w3layouts.com/ouch-construct...site-template/
    Maar hoe kan ik kiezen bij mijn java script hoelang het nog duurt voordat er 0:00:00 staad? BV dat ik wil instellen dat het vanaf nu nog 5 dagen 3 uur en 20 minuten is ofzo.
    no votes  

  2. #2

    Registered
    25/09/13
    Location
    Prov Antwerpen
    Posts
    109
    iTrader
    3 (100%)
    Mentioned
    1 Post(s)
    Reputation
    1/2
    In init.js kan je de date property instellen. Om bijvoorbeeld te laten aftellen tot nieuwjaar gebruik je het volgende:

    Code:
    //Hook up the tweet display
    
    $(document).ready(function() {
    						   
    	$("#countdown").countdown({
    				date: "01 january 2016 00:00:00",
    				format: "on"
    			},
    			
    			function() {
    				// callback function
    			});
    
        $(".tweet").tweet({
            username: "flashuser",
            count: 3,
            loading_text: "loading tweets..."
        });
    
    });
    no votes  

  3. #3

    Registered
    30/05/15
    Location
    Brussel
    Posts
    28
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Dit is de code:
    Code:
    (function($) {
    	$.fn.countdown = function(options, callback) {
    
    		//custom 'this' selector
    		thisEl = $(this);
    
    		//array of custom settings
    		var settings = { 
    			'date': null,
    			'format': null
    		};
    
    		//append the settings array to options
    		if(options) {
    			$.extend(settings, options);
    		}
    		
    		//main countdown function
    		function countdown_proc() {
    			
    			eventDate = Date.parse(settings['date']) / 1000;
    			currentDate = Math.floor($.now() / 1000);
    			
    			if(eventDate <= currentDate) {
    				callback.call(this);
    				clearInterval(interval);
    			}
    			
    			seconds = eventDate - currentDate;
    			
    			days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
    			seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
    			
    			hours = Math.floor(seconds / (60 * 60));
    			seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
    			
    			minutes = Math.floor(seconds / 60);
    			seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
    			
    			//conditional Ss
    			if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
    			if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
    			if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
    			if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
    			
    			//logic for the two_digits ON setting
    			if(settings['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;
    			}
    			
    			//update the countdown's html values.
    			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. Here's an example: 12 Tuesday 2012 17:30:00");
    				clearInterval(interval); 
    			}
    		}
    		
    		//run the function
    		countdown_proc();
    		
    		//loop the function
    		interval = setInterval(countdown_proc, 1000);
    		
    	}
    }) (jQuery);
    Ik snap het niet zo goed
    no votes  

  4. #4

    Registered
    25/09/13
    Location
    Prov Antwerpen
    Posts
    109
    iTrader
    3 (100%)
    Mentioned
    1 Post(s)
    Reputation
    1/2
    De code die je net het gepost zit in countdown.js, daar moet je niets aan veranderen. Zie mijn vorige post: enkel in init.js moet je een aanpassing doen.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in