JQuery Number Counter Plugin

Developer
Darby Rathbone
Size
3,195 Kb
Views
44,528
  1. JQuery Number Counter Plugin Previews
  2. JQuery Number Counter Plugin HTML Codes
  3. JQuery Number Counter Plugin CSS Codes
  4. JQuery Number Counter Plugin JS Codes

How do I make an jquery number counter plugin?

This is a fork of a project and I added a few features. What is a jquery number counter plugin? How do you make a jquery number counter plugin? This script and codes were developed by Darby Rathbone on 03 October 2022, Monday.

JQuery Number Counter Plugin Previews
IQ Test

JQuery Number Counter Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery Number Counter Plugin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Number Counter Plugin</h1> <span class="ticker--one">o</span> <span class="ticker--two">Click</span> <span class="ticker--three">Hover</span> <span class="ticker--four">o</span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery Number Counter Plugin - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Andada);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
.container { width: 960px; font-family: 'Andada', serif; text-align: center; margin: 50px auto;
}
h1 { color: #333; font-size: 3em; margin: 15px 0;
}
[class*="ticker"] { width: 75px; height: 75px; color: white; font-size: 1.5em; line-height: 75px; display: inline-block; margin: 20px; border-radius: 50%; border-bottom: 3px solid black; background: #4d4d4d;
}

JQuery Number Counter Plugin - Script Codes JS Codes

(function ($){ $.fn.ticker = function(options){ var settings = $.extend({ speed : 50, number : 0, end : 100, direction : 0.01, bounce :false }, options); $(this).text(settings.number); var selector = $(this).get(); var direction = parseFloat(parseFloat(settings.direction).toFixed(12)); var i = parseFloat(settings.start); $(this).text(settings.number); var ticker = function ticker(){ //i+=direction; i +=parseFloat(direction); i=parseFloat(i.toFixed(12)); $(selector).text(i); if(i >= settings.end || i<=settings.start) { if (settings.bounce) direction*=-1; else clearInterval(timer); } } var timer = setInterval(ticker, settings.speed); return this; }
}(jQuery));
$(function(){ $(".ticker--one").ticker({ speed: 100, start: 10, end: 20, direction: 1 }); $(".ticker--two").ticker({ speed: 1, start: 0, end: 1000, direction : 1, bounce:true }); $(".ticker--three").ticker({ speed: 400, start: 0, end: 20, bounce:true }); $(".ticker--four").ticker({ speed: 50, start: 0, end: 500, bounce:true });
});
JQuery Number Counter Plugin - Script Codes
JQuery Number Counter Plugin - Script Codes
Home Page Home
Developer Darby Rathbone
Username blackkbot
Uploaded October 03, 2022
Rating 3
Size 3,195 Kb
Views 44,528
Do you need developer help for JQuery Number Counter Plugin?

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!

Darby Rathbone (blackkbot) Script Codes
Name
Graphing equations
A Pen by Darby Rathbone
Slow Delaunay triangulation
Webworker with an editable textbox
Sudoku grid
3d css transformations
3d pure javascript 2d canvas
A linearly interpolated spline
Remote image
Perlin noise on worker
Create amazing marketing copy 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!