bill-counter-js v0.0.6
Description
The bill counter effect is expressed in JavaScript.
See API Docs for details.
Required
This library does not require any other libraries in production.
In development, we bundled with webpack.
Installation
Local
download
CDN
<script src="https://unpkg.com/bill-counter-js@0.0.6/dist/bill-counter.min.js"></script>
NPM
yarn add bill-counter-js
or
npm install bill-counter-js -S
How to use
NOTE
You must run the function after 'DOMContentLoaded' event.
Similar to jquery's \$(document).ready().
DOMContentLoaded is a web standard and jQuery is not a web standard.
Browser
<script src="https://unpkg.com/bill-counter-js@0.0.6/dist/bill-counter.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
$B.countByN('selector-id', targetMoney, N, interval);
});
</script>
see example source
ESM
import { $B } from 'https://unpkg.com/bill-counter-js@0.0.6/dist/bill-counter.esm.js';
document.addEventListener('DOMContentLoaded', () => {
$B.countByN('selector-id', targetMoney, N, interval);
}
see example source
Common JS
const { $B } = require('bill-counter-js');
$B.countByN('selector-id', targetMoney, N, interval);
API Documents
1. Count by N
$B.countByN(id, end, n, (interval = 0.1));
Count the numbers by n.
Perhaps most similar to the counter.
2. Fast counting
$B.countFast(id, end, (duration = 100));
Count any number in a certain amount of time.
I think it will be very effective as an animation.
3. Count Object
The above two functions only worked for DOM objects. But sometimes you need to modify the Model, not the View, like Vue.js. Try using countObjectByN
or countObjectFast.
It is basically the same except that the first argument is object.
Copy the code below and run node source.js!
const { $B } = require('bill-counter-js');
const obj = {
value: 0,
};
$B.countObjectByN(obj, 1000, 1, (interval = 1));
function test() {
return new Promise(resolve => {
let i = 0;
const sid = setInterval(() => {
console.log(obj);
i++;
if (i === 1000) {
clearInterval(sid);
resolve();
}
}, 1);
});
}
(async () => {
await test();
})();
4. Locale Setting (Formatting)
// default
$B.localeOptions = {
format: true,
locale: 'en-US',
currency: 'USD',
};
format: Do you format in currency? (true = yes)
locale: What language do you speak? (Learn More)
currency: What currency are you using? (Learn More)
5. Define your formatter
The default formatter uses the ECMAScript Internationalization API. (INTL) If you don't like this, define your own formatter.
$B.formatStyler = (number) => {
// your formatter!
}
If you want to change back to the default style,
run $B.formatStyler = $B.defaultFormatStyler;
Library demo
Try the demo here.