JavaScript Countdown Timer

-

Often on sites that sell something you can find a countdown timer to a certain date. Such a script is usually required for landing pages and online stores.

JS

(() => {
 
    let finishDate = new Date(2017, 8, 30); // set the final date
    let compareDate = finishDate.getTime();
 
    let timer = setInterval(function () {
        timeBetweenDates(compareDate);
    }, 1000);
 
    function timeBetweenDates(toDate) {
 
        let difference = toDate - Date.now();
 
        if (difference <= 0) { // if the date has passed, the timer stops
 
            clearInterval(timer);
 
        } else {
 
            let seconds = Math.floor(difference / 1000),
                minutes = Math.floor(seconds / 60),
                hours = Math.floor(minutes / 60),
                days = Math.floor(hours / 24);
 
            hours %= 24;
            minutes %= 60;
            seconds %= 60;
 
            if (days < 10) days = '0' + days;
            if (hours < 10) hours = '0' + hours;
            if (minutes < 10) minutes = '0' + minutes;
            if (seconds < 10) seconds = '0' + seconds;

            document.getElementById('days').innerHTML = days;
            document.getElementById('hours').innerHTML = hours;
            document.getElementById('minutes').innerHTML = minutes;
            document.getElementById('seconds').innerHTML = seconds;
 
        }
    }
})();

HTML

<div class="timer">
    <div class="timer-el">
        <div id="days"></div>
        <div class="timer-el__name">
            Days
        </div>
    </div>
    <div class="timer-el">
        <div id="hours"></div>
        <div class="timer-el__name">
            Hours
        </div>
    </div>
    <div class="timer-el">
        <div id="minutes"></div>
        <div class="timer-el__name">
            Minutes
        </div>
    </div>
    <div class="timer-el">
        <div id="seconds"></div>
        <div class="timer-el__name">
            Seconds
        </div>
    </div>
</div>

Let me remind you that months in JavaScript starts from zero 0.

// December 30, 2017
new Date(2017, 11, 30)

Comments

Post a Comment

Popular posts from this blog

Closing a site with .htaccess

-
The .htaccess file performs many different functions. This is an apache configuration file. Consider how to set a password for access to the site using .htaccess . This may be needed at design time or as an additional security tool. To store the password (or passwords) from the directory, you need to create another file. Usually it is called .htpasswd , but you can call it differently. Put this file must be in the root of the site or above Sample entry in .htaccess AuthName "Authentication required" AuthType Basic AuthUserFile /home/yourdir/.htpasswd require user yourlogin Set the password for yourlogin user in the .htpasswd file yourlogin:Mk5aMaDxjJch2 The link to generate passwords https://stringutils.online/htpasswd
Read more

Typical gulpfile.js

-
The file is written for Gulp 4 . The file is designed to work with styles ( SCSS ) and JavaScript . All minify and compile sourcemaps for debugging. Third-party scripts and styles are in separate files. const production = ( process.env.NODE_ENV == 'production' ); //base part let {src, dest, parallel, series, watch} = require('gulp'), rename = require('gulp-rename'), sourcemaps = require('gulp-sourcemaps'); //css part let sass = require('gulp-sass'), cleanCSS = require('gulp-clean-css'), autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'), uglify = require('gulp-uglify-es').default, include = require("gulp-include"); let pathFiles = { build: { css: './css/', js: './js/' }, src: { css: './src/scss/**/*.scss', js: './src/js/**/*.js' } }; function swallowError(error){ ...
Read more

JavaScript Inheritance and Classes

-
In many programming languages implemented inheritance. And it also exists in JavaScript. First, consider prototype inheritance. We describe the function constructor function Animal(name, weight, color){ this.name = name || 'someAnimal'; this.weight = weight; this.color = color; //do some actions during initialization console.log(this.name + ' construct animal'); } // write the method to the prototype Animal.prototype.sayName = function(){ console.log(this.name); } We describe the constructor function that inherits the Animal class. And we will expand it, we will add in addition own properties and methods function Mammal(name, weight, color, limbs){ Animal.apply(this, arguments); this.limbs = limbs || 4; console.log(this.name + ' construct mammal'); } Mammal.prototype = Object.create(Animal.prototype); Mammal.prototype.constructor = Mammal; Mammal.prototype.run = function(){ console.log('run'); } Cre...
Read more