Digits

Developer
Kenneth Cachia
Size
5,790 Kb
Views
48,576
  1. Digits Previews
  2. Digits HTML Codes
  3. Digits CSS Codes
  4. Digits JS Codes

How do I make an digits?

A JS/CSS Counter. What is a digits? How do you make a digits? This script and codes were developed by Kenneth Cachia on 22 July 2022, Friday.

Digits Previews
IQ Test

Digits - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Digits</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Preview Skins -->
<!--<ul id="theme-selector"> <li><a class="default active">Default</a></li> <li><a class="white">White</a></li>
</ul>-->
<!-- Countdown to New Year -->
<div id="example-1"></div>
<!-- Simple Statistics -->
<div id="example-2"></div>
<input id="change" type="text" value="199" />
<footer> <h1>Digits</h1> <h2>A JS / CSS counter &mdash; with skins</h2> <a href="https://github.com/kennethcachia/digits" target="_blank">GitHub</a>
</footer> <script src="js/index.js"></script>
</body>
</html>

Digits - Script Codes CSS Codes

/* CORE CSS AND ANIMATIONS
-------------------------------------------------*/
.digits,
.digits .digit { display: inline-block;
}
.digits .top-half-wrapper,
.digits .bottom-half-wrapper { position: relative;
}
.digits .top-half,
.digits .bottom-half { position: absolute; overflow: hidden; top: 0; left: 0;
}
.digits .top-half { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -webkit-transform: perspective(300) rotateX(0deg); -moz-transform: rotateX(0deg);
}
.digits .bottom-half { line-height: 0; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -webkit-transform: perspective(300) rotateX(90deg); -moz-transform: rotateX(90deg);
}
.digits .no-animation { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important;
}
.digits .show { z-index: 10; -webkit-transform: perspective(300) rotateX(0deg); -moz-transform: rotateX(0deg);
}
.digits .roll-over { -webkit-transform: perspective(300) rotateX(-90deg); -moz-transform: rotateX(-90deg);
}
/* DEFAULT SKIN
-------------------------------------------------*/
.digits .top-half-wrapper,
.digits .bottom-half-wrapper { width: 100px; height: 50px;
}
.digits .top-half,
.digits .bottom-half { width: 100px; height: 50px; text-shadow: 0px 1px 0px #fafafa; text-align: center; font-family: helvetica, sans; font-weight: bold; font-size: 80px;
}
.digits .top-half { color: #333;
}
.digits .bottom-half { color: #222;
}
.digits .top-half { background: #fff; border-radius: 10px 10px 0px 0px; line-height: 100px;
}
.digits .bottom-half { background: #e5e5e5; border-radius: 0px 0px 10px 10px ;
}
/* COUNTDOWN MODE
-------------------------------------------------*/
.digits.countdown .digit:not(:last-child) { margin-right: 10px;
}
.digits.countdown .digit.second-2 { margin-right: 0;
}
.digits.countdown .digit.second-1,
.digits.countdown .digit.minute-1,
.digits.countdown .digit.hour-1 { margin-left: 50px;
}
/* STATISTICS MODE
-------------------------------------------------*/
.digits.statistics .digit:not(:last-of-type) { margin-right: 5px;
}
/* LABELS
-------------------------------------------------*/
.digits .labels { text-align: right; color: #111;
}
.digits .label { display: inline-block; width: 210px; text-align: center; font-family: helvetica, sans; font-size: 11px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; margin: 20px 0;
}
.digits .label.hours,
.digits .label.minutes,
.digits .label.seconds { margin-left: 60px;
}
.digits .label.days:after { content: "Days";
}
.digits .label.hours:after { content: "Hours";
}
.digits .label.minutes:after { content: "Minutes";
}
.digits .label.seconds:after { content: "Seconds";
}
body { text-align: center; background: #32b67a; color: #666; font-family: avenir, futura, helvetica, sans; padding-top: 80px; line-height: 1.5em; margin: 0; width: 100%;
}
.digit { border-radius: 10px; box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}
footer { margin-top: 180px; padding: 180px 0; background: #fafafa;
}
footer a { color: #32b67a; text-decoration: none;
}
h1 { font-size: 40px; display: inline-block; margin: 0 0 20px 0; color: #111;
}
h2 { font-size: 20px; margin: 0 0 20px 0; font-weight: normal;
}
h3 { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin: 100px 0 75px 0;
}
#theme-selector { list-style: none;
}
#theme-selector li { display: inline-block;
}
#theme-selector li a { text-transform: uppercase; font-size: 12px; padding: 4px 12px; line-height: 1em; letter-spacing: uppercase; letter-spacing: 1px; border-radius: 12px; margin: 0 4px; border: 2px solid #666; cursor: pointer;
}
#theme-selector li a.active { background: #eee; color: #222; border: 2px solid #eee;
}
#change { display: block; margin: 0 auto; border: none; outline: none; padding: 6px 15px; border-radius: 50px;
}
#example-1 { margin-top: 75px;
}
#example-2 { margin-top: 100px; margin-bottom: 60px;
}

Digits - Script Codes JS Codes

// Basic JS Operations
var JS = { createElement: function (params) { var el = document.createElement(params.type), i; if (params.classes) { for (i = 0; i < params.classes.length; i += 1) { el.classList.add(params.classes[i]); } } if (params.styles) { for (i = 0; i < params.styles.length; i += 1) { el.style[params.styles[i][0]] = params.styles[i][1]; } } if (params.parent) { params.parent.appendChild(el); } return el; }, class: function (params) { var els = params.parent.querySelectorAll(params.selector), e; for (e = 0; e < els.length; e += 1) { if (params.mode === 'remove') { els[e].classList.remove(params.className); } else if (params.mode === 'add') { els[e].classList.add(params.className); } } }
};
// Individual Digit
var Digit = function (params) { var current, topHalfWrapper, bottomHalfWrapper, digitWrapper, ripple, interval; function createDigit(no) { var topHalf, bottomHalf; topHalf = JS.createElement({ parent: topHalfWrapper, type: 'div', classes: ['no-' + no, 'top-half'], styles: [ ['webkitTransition', 'all ' + params.animationDelay + ' linear'], ['MozTransition', 'all ' + params.animationDelay + ' linear'] ] }); bottomHalf = JS.createElement({ parent: bottomHalfWrapper, type: 'div', classes: ['no-' + no, 'bottom-half'], styles: [ ['zIndex', 10 - no], ['webkitTransition', 'all ' + params.animationDelay + ' linear'], ['webkitTransitionDelay', params.animationDelay], ['MozTransition', 'all ' + params.animationDelay + ' linear'], ['MozTransitionDelay', params.animationDelay] ] }); bottomHalf.innerHTML = no; topHalf.innerHTML = no; if (no === params.start) { topHalf.classList.add('show'); bottomHalf.classList.add('show'); } } function getMax() { var max; if (params.group && ripple) { max = ripple.isMax() ? params.max : 9; } else { max = params.max; } return max; } function cleanFrame(f, type) { if (f > getMax()) { f = 0; } JS.class({ parent: digitWrapper, selector: type + '.no-' + f, className: 'no-animation', mode: 'add' }); JS.class({ parent: digitWrapper, selector: type + '.no-' + f, className: 'show', mode: 'remove' }); JS.class({ parent: digitWrapper, selector: type + '.no-' + f, className: 'roll-over', mode: 'remove' }); } function bottomHalfZeroZindex(i) { if (i === 0) { digitWrapper.querySelector('.bottom-half.no-' + getMax()).style.zIndex = 999; } } function tickTock() { if (current === 0) { digitWrapper.querySelector('.bottom-half.no-' + getMax()).style.zIndex = 1; } // Reset Top Half setTimeout(function () { cleanFrame(current + 1, '.top-half'); }, parseFloat(params.animationDelay) * 1000); // Reset bottom half setTimeout(function () { cleanFrame(current + 1, '.bottom-half'); bottomHalfZeroZindex(current); }, parseFloat(params.animationDelay) * 1000 * 2); // Prepare for next animation setTimeout(function () { JS.class({ parent: digitWrapper, selector: '.top-half', className: 'no-animation', mode: 'remove' }); JS.class({ parent: digitWrapper, selector:'.bottom-half', className: 'no-animation', mode: 'remove' }); }, parseFloat(params.animationDelay) * 1000 * 3); // Animate top half JS.class({ parent: digitWrapper, selector: '.top-half.no-' + current, className: 'roll-over', mode: 'add' }); // Affect nearby digits if (ripple && current === 0) { ripple.flip(); } // Next cycle current = current === 0 ? getMax() : --current; // Finish animation JS.class({ parent: digitWrapper, selector: '.no-' + current, className: 'show', mode: 'add' }); // Stop Timer if (params.play && ripple && current === 0) { if (ripple.isReady()) { params.ready(); clearInterval(interval); } } } function build() { var d; if (params) { params.max = params.max || 9; params.delay = params.delay || 1000; params.first = params.first || false; params.start = params.start >= 0 ? params.start : params.max; params.group = params.group || false; params.play = params.play || false; params.animationDelay = params.animationDelay || '.20s'; params.name = params.name || []; params.offset = params.offset || 0; params.name.push('digit'); current = params.start; } else { throw new Error('Params not Defined'); } digitWrapper = JS.createElement({ type: 'div', classes: params.name }); topHalfWrapper = JS.createElement({ parent: digitWrapper, type: 'div', classes: ['top-half-wrapper'] }); bottomHalfWrapper = JS.createElement({ parent: digitWrapper, type: 'div', classes: ['bottom-half-wrapper'] }); for (d = 0; d <= 9; d += 1) { createDigit(d); } if (params.first && params.wrapper.childNodes[0]) { params.wrapper.insertBefore(digitWrapper, params.wrapper.childNodes[0]); } else { params.wrapper.appendChild(digitWrapper); } bottomHalfZeroZindex(params.start); } this.isMax = function () { return current === params.max; } this.isZero = function () { return current === 0 ? true : false; } this.isReady = function () { return ripple ? this.isZero() && ripple.isReady() : this.isZero(); } this.affect = function (digit) { ripple = digit; } this.flip = function (forceValue) { if (forceValue || forceValue === 0) { interval = setInterval(function() { if (current != forceValue) { tickTock(); } else { clearInterval(interval); } }, params.delay); } else { tickTock(); } } function animate() { if (params.play) { setTimeout(function () { interval = setInterval(function () { tickTock(); }, params.delay); }, params.offset); } } build(); animate();
}
// Main Function
var Digits = function (params) { var digits = [], classes = { main: 'digits', countdown: 'countdown', statistics: 'statistics' }; this.changeValue = function(newValue) { var p = digits.length - 1; newValue = newValue && newValue.toString() || '0'; // Set new value for (var d = newValue.length - 1; d >= 0; d--) { if (digits[p]) { digits[p].flip(newValue[d]); } else { digits = digits.reverse(); digits.push(new Digit({ name: ['statistic', 'statistic-' + (d + 1)], first: true, wrapper: params.wrapper, start: parseInt(newValue[d]), delay: 250, animationDelay: '.08s' })); digits = digits.reverse(); } p--; } // Clear unwanted digits for (var d = 0; d <= digits.length - newValue.length - 1; d++) { digits[d].flip(0); } } function statistics() { if (!params.value) { throw Error('Missng value parameter'); } params.value = params.value.toString(); for (var d = 0; d< params.value.length; d++) { digits.push(new Digit({ name: ['statistic', 'statistic-' + (d + 1)], wrapper: params.wrapper, start: parseInt(params.value[d]), delay: 250, animationDelay: '.08s' })); } } function countdown() { var days, hours, minutes, seconds, labels, offset, diff; if (!params.to) { throw Error('Missing to parameter'); } // Time difference diff = (new Date(params.to) - new Date()); if (diff > 0) { // TODO: IMPROVE days = Math.floor(diff / 1000 / 60 / 60 / 24).toString(); hours = Math.floor((diff / 1000 / 60 / 60) - (days * 24)).toString(); minutes = Math.floor(((diff / 1000 / 60 / 60) - (days * 24) - hours) * 60).toString(); seconds = Math.floor(((((diff / 1000 / 60 / 60) - (days * 24) - hours) * 60) - minutes) * 60).toString(); // Fix initial out-of-sync delay offset = diff % 1000; // Add Leading zeros hours = hours.length === 1 ? '0' + hours : hours; minutes = minutes.length === 1 ? '0' + minutes : minutes; seconds = seconds.length === 1 ? '0' + seconds : seconds; } else { days = hours = minutes = seconds = '00'; } // Days for (var d = 0; d < days.length; d++) { digits.push(new Digit({ name: ['day', 'day-' + (d + 1)], ready: params.ready, wrapper: params.wrapper, start: parseInt(days[d]) })); } // Hours digits.push(new Digit({ name: ['hour', 'hour-1'], ready: params.ready, wrapper: params.wrapper, start: parseInt(hours[0]), max: 2 })); digits.push(new Digit({ name: ['hour', 'hour-2'], ready: params.ready, wrapper: params.wrapper, start: parseInt(hours[1]), max: 3, group: true })); // Minutes digits.push(new Digit({ name: ['minute', 'minute-1'], ready: params.ready, wrapper: params.wrapper, start: parseInt(minutes[0]), max: 5 })); digits.push(new Digit({ name: ['minute', 'minute-2'], ready: params.ready, wrapper: params.wrapper, start: parseInt(minutes[1]) })); // Seconds digits.push(new Digit({ name: ['second', 'second-1'], ready: params.ready, wrapper: params.wrapper, start: parseInt(seconds[0]), max: 5 })); digits.push(new Digit({ name: ['second', 'second-2'], ready: params.ready, wrapper: params.wrapper, start: parseInt(seconds[1]), play: diff > 0 ? true : false, offset: offset })); // Fire ready event when countdown is not required if (diff <= 0) { params.ready(); } // Add labels if (params.labels) { labels = JS.createElement({ type: 'div', parent: params.wrapper, classes: ['labels'] }); JS.createElement({ parent: labels, classes: ['label', 'days'], type: 'span' }) JS.createElement({ parent: labels, classes: ['label', 'hours'], type: 'span' }) JS.createElement({ parent: labels, classes: ['label', 'minutes'], type: 'span' }) JS.createElement({ parent: labels, classes: ['label', 'seconds'], type: 'span' }) } // Link digits for (var d = digits.length - 1; d > 0; d--) { digits[d].affect(digits[d-1]); } } function init() { // Check params if (params) { params.wrapper = params.wrapper && document.querySelector(params.wrapper); params.mode = params.mode || 'countdown'; params.labels = params.labels || false; if (!params.wrapper) { throw Error('Missing parameters'); } else { params.wrapper.innerHTML = ''; params.wrapper = JS.createElement({ parent: params.wrapper, type: 'div', classes: [classes.main] }); } } else { throw Error('Params not defined'); } // Main Class params.wrapper.classList.add(classes.main); // Plugin mode switch (params.mode) { case 'countdown': params.wrapper.classList.add(classes.countdown); countdown(); break; case 'statistics': params.wrapper.classList.add(classes.statistics); statistics(); break; default: break; } } init();
}
var stats;
// Create Digits
function init () { // Example 1: Countdown to New Year new Digits({ wrapper: '#example-1', mode: 'countdown', to: 'January 1 2015 00:00:00', // GMT-0500 labels: true, ready: function () { alert('HAPPY NEW YEAR!!!'); } }); // Example 2: Statistics mode stats = new Digits({ wrapper: '#example-2', mode: 'statistics', value: 199 }); // Change value after 2 seconds document.querySelector('#change').onchange = function (e) { stats.changeValue(this.value); }
}
// GO!
init();
Digits - Script Codes
Digits - Script Codes
Home Page Home
Developer Kenneth Cachia
Username kennethcachia
Uploaded July 22, 2022
Rating 4
Size 5,790 Kb
Views 48,576
Do you need developer help for Digits?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kenneth Cachia (kennethcachia) Script Codes
Name
BackgroundCheck
A Pen by Kenneth Cachia
Shape Shifter
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!