Counter of individual time counting on pure JavaScript
Sometimes you need to implement a countdown for each visitor individually, on one-page pages or sites - without installing plug-ins and connecting libraries (for example, jQuery). To solve this problem, I developed a counter in pure JavaScript.
This counter works as follows:
Now let's sort the counter code itself.
To begin with, I wrote down the functions of reading and writing Cookies like this:
Then I used the cookie functions written above, and checked if previously recorded values ​​exist in the cookie with the name “Big Day”.
After the completion time of the reference has become known, the calculation of the remaining time until the end of the reference is carried out. But to further be able to more flexibly customize the design of the counter - we reduce the time to seconds.
When we have the remaining time in seconds, we can adjust it to the desired form. In order not to litter the article (as it is a bit cumbersome by the number of lines), this part of the script is hidden under the spoiler:
Now we make the penultimate dash and proceed to the graphic part of the script. Here there is a check of what to display on the page - the timer with the remaining time or the message that the timer counted to 0:00:00.
And finally - we assign styles to our counter and output it to the javascript file connection point, inside of which all the counter code itself is located.
That's it, the meter is ready “for work and defense”.
Download the script at this link (github.com).
This counter works as follows:
- Activated when the page loads.
- Checks for the presence of a countdown record in the visitor’s browser cookie.
- If there is a record, then it reads it. If there is no record, it takes the time specified in the script settings, and makes an entry in the visitor's browser cookie.
- The time is converted into a format for more flexible settings for the design of the counter.
- A counter is displayed, or an indication of the end of the countdown (if time is up) at the place where the script was called.
Now let's sort the counter code itself.
To begin with, I wrote down the functions of reading and writing Cookies like this:
// Cookie function getCookie(c_name) { var i, x, y, ARRcookies = document.cookie.split(";"); for (i = 0; i < ARRcookies.length; i++) { x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("=")); y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1); x = x.replace(/^\s+|\s+$/g, ""); if (x == c_name) { return unescape(y); } } } // Cookie function setCookie(c_name, value, exdays) { var exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString()); document.cookie = c_name + "=" + c_value; } Then I used the cookie functions written above, and checked if previously recorded values ​​exist in the cookie with the name “Big Day”.
// var str = getCookie('Big Day'); // Cookie if(!str) // Cookie { var BigDay = new Date(); BigDay.setMinutes(BigDay.getMinutes()+1); // setCookie('Big Day', BigDay, 3); // Cookie }else{ BigDay = new Date(str); } After the completion time of the reference has become known, the calculation of the remaining time until the end of the reference is carried out. But to further be able to more flexibly customize the design of the counter - we reduce the time to seconds.
// var today = new Date(); var diff = BigDay - today; var countdown4 = Math.round(diff / 1000) // When we have the remaining time in seconds, we can adjust it to the desired form. In order not to litter the article (as it is a bit cumbersome by the number of lines), this part of the script is hidden under the spoiler:
Hidden part of the script
// : : : function convert_to_time(secs) { secs = parseInt(secs); hh = secs / 3600; hh = parseInt(hh); mmt = secs - (hh * 3600); mm = mmt / 60; mm = parseInt(mm); ss = mmt - (mm * 60); if (hh > 23) { dd = hh / 24; dd = parseInt(dd); hh = hh - (dd * 24); } else { dd = 0; } if (ss < 10) { ss = "0" + ss; } if (mm < 10) { mm = "0" + mm; } if (hh < 10) { hh = "0" + hh; } if (dd == 0) { return (hh + ":" + mm + ":" + ss); } else { if (dd > 1) { return (dd + " day " + hh + ":" + mm + ":" + ss); } else { return (dd + " day " + hh + ":" + mm + ":" + ss); } } } Now we make the penultimate dash and proceed to the graphic part of the script. Here there is a check of what to display on the page - the timer with the remaining time or the message that the timer counted to 0:00:00.
// - do_cd4 = function() { if (countdown4 < 0) { document.getElementById('cd4').innerHTML = " !"; } else { document.getElementById('cd4').innerHTML = convert_to_time(countdown4); setTimeout('do_cd4()', 1000); } countdown4 = countdown4 - 1; } And finally - we assign styles to our counter and output it to the javascript file connection point, inside of which all the counter code itself is located.
document.write("<div id='cd4' style='text-align: center; font-size: 40pt'></div>\n"); // do_cd4(); // That's it, the meter is ready “for work and defense”.
Download the script at this link (github.com).
')
Source: https://habr.com/ru/post/175677/
All Articles