Ultimate JavaScript Counter

Classic

Text

Clock

Currency

Visitors

Captcha Anti-Bot

Countdown

Classic Counter
The most common use of a classic counter.
But it's not all, check out our other counters.

<span class="counterClassic"></span> <script type="text/javascript"> var i = 0; counter1 = new oCounter({ wrapper: ".counterClassic", mask: "00000", width: 300, background: "gradient-black", shadow: "0px 0px 8px black", fontColor: "white", fontSize: 50, paddingBottom: 6, symbolRightBorder: "1px solid white", borderRadius: 30 }); interval = setInterval(function(){ counter1.show(++i, false); }, 1000); </script>

show code

Text Counter
This counter is much more than just a counter.
It can be used as any character set: already defined like numeric, alphabetic, alphanumeric or defined by you.
Can be very customizable in style, colors etc. Use our Visual Configurator below.

START

<textarea cols="40" rows="5" style="border:1px solid lightgrey;"> ORTUS IT Group, Inc. We Make Your Business Easier </textarea> <button class="btn btn-small btn-danger" style="margin-top:-29px;margin-left:10px;">START</button> <span class="counterText" style="margin-top: 10px;"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper: ".counterText", mask: " ", height: 25, background: "gradient-crystal", border: "1px solid lightgray", fontColor: "black", fontSize: 20, symbolRightBorder: "1px solid white", borderRadius: 5 }); $("div[data-ctype='text'] div[data-action='startText']").unbind("click").on("click",function(){ var text = $("div[data-ctype='text'] textarea").val(); text = text.split("\n"); counter1.show(text[0]); // for immediately start for(var i in text){ if(i == 0) continue; counter1.show(text[i], 3000); } }); </script>

show code

Time Counter
This type of the counter displays local browser time.
This counter will be useful for websites or a page where time is needed.

hours

minutes

seconds

<div class="countdownBlock" style="font-family:Anton;"> <div class="oneTime" style="width: 100px;"> <span data-type="info">days</span> <span class="timeCounter1"></span> </div> <div class="oneTime" style="width: 100px;"> <span data-type="info">hours</span> <span class="timeCounter2"></span> </div> <div class="oneTime" style="width: 100px;"> <span data-type="info">minutes</span> <span class="timeCounter3"></span> </div> </div> <script type="text/javascript"> var date; config = { background: "gradient-black", fontColor: "white", fontSize: 43, paddingBottom: 6, symbolRightBorder: "1px solid white", borderRadius: 10 } counter1 = new oCounter( $.extend({ wrapper: ".timeCounter1", mask: "00" }, config) ); counter2 = new oCounter( $.extend({ wrapper: ".timeCounter2", mask: "00" }, config) ); counter3 = new oCounter( $.extend({ wrapper: ".timeCounter3", mask: "00" }, config) ); interval = setInterval(function(){ date = new Date(); counter1.show((date.getHours()<10?"0":"") + date.getHours()); counter2.show((date.getMinutes()<10?"0":"") + date.getMinutes()); counter3.show((date.getSeconds()<10?"0":"") + date.getSeconds()); }, 1000); </script> <style> .countdownBlock {width: 85%;} .countdownBlock > .oneTime{ display: inline-block; text-align: center; } .countdownBlock > .oneTime > span[data-type=info]{ display: inline-block; margin-bottom: 7px; width: 70%; background-color: #444; border-radius: 5px; font-size: 12px; color: white; } </style>

show code

Currency Counter
This counter may have decimal and/or thousandth separators.
You can also define prefix and postfix (e.g. display currency sign).
Separators are very customizable, so you can set your own to adjust it to the user's view. Dots and commas are the most common.

<span class="counterCurrency"></span> <script type="text/javascript"> var currencies, i; currencies = ["14.50", "7400.00", "57700.40", ".99", "800.10"]; counter1 = new oCounter({ wrapper: ".counterCurrency", height: 40, mask: "$00,000000", background: "gradient-green", border: "1px solid lightgray", fontColor: "white", fontWeight: "bold", fontSize: 35, fontFamily: "Black Ops One", cycle: true, paddingBottom: 3, symbolRightBorder: "1px solid white", borderRadius: 30 }); for(i in currencies){ counter1.show(currencies[i], 500); } </script>

show code

Visitors Counter
This is a simple example of your website visitors counter with highlight (blink) function.
This function may be useful for other situations, not for visitors counter only.

<span class="counterVisitors"></span> <script type="text/javascript"> var values = [3,4,17,12,34,130,74]; counter1 = new oCounter({ wrapper: ".counterVisitors", mask: "000", background: "#6c8dae", fontColor: "white", fontWeight: "bold", fontSize: 40, cycle: true, height: 50, symbolRightBorder: "1px solid white", borderRadius: 2 }); for(i in values){ counter1.show(values[i], 1000).blink(); // 1000 - timeout } </script>

show code

Anti-Bot Captcha
Note that this classic kind of anti-spam security prevents only from spam bots and it should not be used with a security-sensitive forms.
This captcha can be used in contact forms, blog pages and other forms.

<span class="counterCaptcha"></span> <button class="btn btn-small btn-danger" style="margin-top:-6px;margin-left:20px;"><i class="ionicons ion-refresh btn-big-ionicon"></i></button> <script type="text/javascript"> var chars, captcha; chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; counter1 = new oCounter({ wrapper: ".counterCaptcha", mask: " ", background: "#d9534f", fontColor: "white", fontSize: 35, height: 42, symbolRightBorder: "1px solid white", }); captcha = ""; for(var i=0; i < 6; i++ ){ captcha += chars.charAt(Math.floor(Math.random() * chars.length)); } counter1.show(captcha); $("div[data-ctype=captcha] div[data-action='startCaptcha']").unbind("click").on("click",function(){ captcha = ""; for( var i=0; i < 6; i++ ){ captcha += chars.charAt(Math.floor(Math.random() * chars.length)); } counter1.show(captcha); }); </script>

show code

Countdown Timer Counter
This type of counter may be useful for 'Under Construction' websites, Landing pages or other websites or pages with an upcoming events.

Type End Date and Time (mm/dd/YYYY HH:MM):

days

hours

minutes

seconds

show code

Visual Counter Builder
In this section you can make your own counter building and configuring.
Also you can use our presets as an examples.

Click any 'Preset' to load the values and then press 'START' to show:

START

Preset_1

Preset_2

Preset_3

Preset_4

Preset_5

Enter a New Values:

Wrapper:

Mask:

Duration:

Random Duration:

Width:

Height:

Bottom Padding:

Font Size:

Font Weight:

Font Color:

Background:

Shadow:

Border:

Border Radius:

Right | Border:

Left Symbol Space:

Right Symbol Space:

Cycle:

Reverse Direction:

Random Display:

Animation Effect:

Set Responsive:

RANGE & FONT SIZE (px)

Text and Symbols to Show:
Replace with text to show in Visual Configurator.
Don't forget to make necessary changes to 'Mask' field.

FEATURES:

Fully customizable and Easy to use;
Contains code only without any images;
Counter has build-in responsive features;
Multi-language support;
Special national characters included for German, French, Spanish, Italian, Czech, Slovak, Ukrainian and Russian languages;
Counter can be used as any text, date, time, symbol or mixed displayer;
Animated and smoothed scroll effects in 30+ different styles;
Supports prefix or postfix counter with any symbol (e.g. currency sign);
Supports Google fonts, Background presets and Counter types for the best visual features;
Visual Builder presented for quick and easy setting up of a custom Counter;
Easy in coding, editing and configuring due to implemented descriptive enumerations;
Compatible with IE 8,9,10,11 / Chrome / Safari / Firefox / Opera browsers;

DOCUMENTATION:

Integration:

Placing counter on your website can be done in 4 simple steps:

1. Copy JavaScript core file [ortusitCounter.js] and CSS file for gradient backgrounds [ortusitCounter.css] to your localhost;
2. Add the needed jQuery, JavaScript and CSS definitions in HEAD section of your website:

a) Add definitions for supporting jQuery with Local file or CDN method:
link to local file:

load from CDN Service:

b) Add JavaScript and CSS definitions:

For example, if you make an integration into your index.html - its will look like:

<!DOCTYPE html> <html lang="en"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Ultimate JavaScript Counter | 2016</title>  <link rel="shortcut icon" href="assets/img/favicon.ico">  <script src="assets/js/jquery-1.11.0.min.js"></script>  <script src="assets/js/ortusitCounter.js"></script>   <link href="assets/css/ortusitCounter.css" rel="stylesheet" type="text/css"> </head>

3. Define HTML element (e.g. span or div), which you want to display as the counter and create its code:

4. Add JavaScript code which will create the counter on your website:

Look at the Property names and Descriptions (with examples) list below to find out how the counter can be configured.
To understand with examples how to control the counter, please visit Counter Control Methods section.

Property Names and Descriptions:

wrapper

use to specify the container for counter

received value type : string

initialization of the counter in the container by its ID

initialization of the counter in the container by its class name

mask

use to set the mask to display

received value type : string

default value : " " (16 [space] chars)

the counter receives up to 16 text characters and displays all these 16 characters (by default)

After setting the mask "ortus " ('ortus' + 11 [space] chars), the counter will display 'ortus' + 11 transmitted chars only.
In case of transmitting the string with 0 chars to the counter, the counter will display 'ortus' + 11 [space] chars from the mask ([spaces] in this context).
If the mask is "ortus00000000000" ('ortus' + 11 zeros) then in case of transmitting of the string with 0 chars the counter will display 'ortus' + 11 chars from the mask (zeros in this context).
If 1 char is transmitted, the counter will display 'ortus' + 10 zeros + the transmitted char

"0" and "[space]" in the mask are replaceable chars transmitted to the counter in the form of the string. Other chars in the mask will be displayed without changes.

e.g. to display time in format 00:00:00 am(pm) it is necessary to use the mask "00:00:00 " and transmit the string "031457 pm" to the counter. For that purpose it is possible to use the mask "00000000 " but then it is necessary to transmit the string "03:14:57 pm" to the counter.

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", mask : "00:00:00 " }); counter1.show("031447 pm"); </script>

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", mask : "00000000 " }); counter1.show("03:14:47 pm"); </script>

duration

used to specify the animation duration

received value type : int

default value : 800 (ms)

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", duration : 1300 }); </script>

width

used to specify the container width

received value type : string

default value : automatically calculated the depending on the number of chars, border width and font size

possible values : 100, 150, 400, 800, "31%", "100%"

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", width : 1000 }); </script>

height

used to specify the container height

received value type : int

default value : automatically calculated the depending on border width and font size

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", height : 100 }); </script>

paddingBottom

used to correct text position toward top and bottom container border

received value type : int

default value : 4 conventional units (not pixels)

increase of the value results in increase of the space between bottom text border and bottom container border

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", paddingBottom : 10 }); </script>

fontWeight

used to change font weight

received value type : string

default value : inherited from the parent element

possible values : "normal", "bold", "100" - "800"

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", fontWeight : "bold" }); </script>

fontColor

used to change font color

received value type : string

default value : inherited from the parent element

possible values : "black", "white", "#def", "rgb(20,70,140)", "rgba(20,70,140, .5)"

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", fontColor : "black" }); </script>

background

used to change the container color background

received value type : string

default value : none

possible values : "black", "white", "#def", "rgb(20,70,140)", "rgba(20,70,140, .5)"

Also: gradient-black, gradient-blue, gradient-orange... Listed gradients are described in "ortusitCounter.css", similarly add your own one.

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", background : "gradient-black" }); </script>

shadow

used to define container shadow

received value type : string

default value : none

e.g. : "0px 5px 10px #000" (see description of the CSS shadow)

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", shadow : "0px 5px 10px #000" }); </script>

border

used to define container borders

received value type : string

default value : none

e.g. : "2px solid #08517d" (see description of the CSS border)

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", border : "2px solid #08517d" }); </script>

borderRadius

used to radius container borders (in pixels)

received value type : int

default value : none

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", borderRadius : 10 }); </script>

symbolRightBorder

used to define the style of character spacing separator

received value type : string

default value : none

e.g. : "2px solid #08517d" (see description of the CSS border)

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", symbolRightBorder: "2px solid #09517d" }); </script>

leftSymbolPadding

used to define the space before symbol

received value type : int

default value : 0

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", leftSymbolPadding: 5 }); </script>

rightSymbolPadding

used to define the space after symbol

received value type : int

default value : 0

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", rightSymbolPadding: 8 }); </script>

cycle

used to cycle the display of transmitted counter values

received value type : bool

default value : false

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", cycle : true }); counter1.show('ortus').show('it').show('group'); </script>

reverseDirection

used to change the direction of chars scroll

received value type : bool

default value : false

If "A" is displayed and then "B", "B" will scroll from the bottom.
In case of 'reverseDirection : true' - "B" will scroll from the top.

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", reverseDirection : true }); </script>

randomDisplay

used for shuffle the transmitted counter values

received value type : bool

default value : false

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", randomDisplay: true }); counter1.show("A", "B", "C"); </script>

randomDuration

used to align the animation speed

by default, counter displays each character with arbitrary correction to the speed of the animation

received value type : bool

default value : true

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", randomDuration: false }); counter1.show("ABCDEF"); </script>

animation

used to change animation effect

received value type : string

default value : "linear"

possible values : see in Visual Configurator

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", animation : "easeInOutBounce" }); </script>

responsive

used to change automatically the font size from the browser width

received value type : array(array(int, int, int), array(int, int, int))

default value : none

[[browser_width_from], [browser_width_to], [font_size_px]]

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", responsive : [[0, 799, 12], [800, 999, 16], [1000, 9999, 20]] }); </script>

blinkSpeed

used to define the highlight (blink) speed

received value type : int (ms)

default value : 300 ms

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", blinkSpeed : 1000 }); </script>

Counter Control Methods:

<span id="myCounter1"></span> <script type="text/javascript"> counter1 = new oCounter({ wrapper : "#myCounter1", duration : 2000 }); </script>

show(string)

will be sequential display of all transmitted values

show(string, delay)

received value type (string) - string

received value type (delay) - int (ms)

will be sequential display of all transmitted values with delay after last display

show(string, false)

received value type (string) - string

received value type (false) - bool

When 'false' is transmitted the data will be cleared and the transmitted value will be displayed immediately. Mainly used to display time and date.

blink()

used to display highlight (blink) transmitted value

default blink color : "#dd5a43"

blink(color)

used to define highlight (blink) color

received value type (color) - string

possible values : "black", "white", "#def", "rgb(20,70,140)", "rgba(20,70,140, .5)"

remove()

used to cycle the counters if you need to install the other counter instead of a cycled one.

ADDITIONAL SUPPORT

If you have any questions or need help with integration of this Ultimate JavaScript Counter to your website or you are interested in our other products, feel free to contact us.

Thank you!

Source Code | HTML element

Ultimate JavaScript Counter

FEATURES:

DOCUMENTATION:

Integration:

Property Names and Descriptions:

wrapper

mask

duration

width

height

paddingBottom

fontSize

fontWeight

fontColor

background

shadow

border

borderRadius

symbolRightBorder

leftSymbolPadding

rightSymbolPadding

cycle

reverseDirection

randomDisplay

randomDuration

animation

responsive

blinkSpeed

Counter Control Methods:

show(string)

show(string, delay)

show(string, false)

blink()

blink(color)

remove()

ADDITIONAL SUPPORT