89 lines
2.9 KiB
HTML
89 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" type="text/css" href="counter.css">
|
|
<title>Increment Numeric Value Example</title>
|
|
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
|
|
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
|
|
<script type="text/javascript" src="counter.js"></script>
|
|
<style>
|
|
body {
|
|
color: #fff;
|
|
max-width:100%;
|
|
margin: 0;
|
|
text-align: center;
|
|
display: block;
|
|
min-height: 100vh;
|
|
background: linear-gradient(45deg, rgb(149, 10, 155) 0%, rgb(149, 10, 155) 9%,rgb(120, 16, 136) 9%, rgb(120, 16, 136) 13%,rgb(178, 3, 174) 13%, rgb(178, 3, 174) 32%,rgb(91, 23, 117) 32%, rgb(91, 23, 117) 42%,rgb(32, 36, 79) 42%, rgb(32, 36, 79) 46%,rgb(61, 30, 98) 46%, rgb(61, 30, 98) 70%,rgb(3, 43, 60) 70%, rgb(3, 43, 60) 100%);
|
|
}
|
|
|
|
.counter {
|
|
display: inline-block;
|
|
margin:1.5%;
|
|
font-size:50px;
|
|
width:200px;
|
|
vertical-align: middle;
|
|
background-color: #222;
|
|
font-family: 'Archivo Black';
|
|
}
|
|
.container { margin: 150px auto; max-width: 960px; }
|
|
</style>
|
|
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
<body><div id="jquery-script-menu">
|
|
<div class="jquery-script-center">
|
|
<ul>
|
|
<li><a href="https://www.jqueryscript.net/animation/increment-numeric-counter.html">Download This Plugin</a></li>
|
|
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
|
|
</ul>
|
|
<div class="jquery-script-ads"><script type="text/javascript"><!--
|
|
google_ad_client = "ca-pub-2783044520727903";
|
|
/* jQuery_demo */
|
|
google_ad_slot = "2780937993";
|
|
google_ad_width = 728;
|
|
google_ad_height = 90;
|
|
//-->
|
|
</script>
|
|
<script type="text/javascript"
|
|
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
|
|
</script></div>
|
|
<div class="jquery-script-clear"></div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<h1>Increment Numeric Value Example</h1>
|
|
<div>
|
|
<span class="counter" data-count="123">0</span>
|
|
<h3>Humans</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="counter" data-count="3">0</span>
|
|
<h3>Dogs</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="counter" data-count="654">0</span>
|
|
<h3>Distance travelled</h3>
|
|
</div>
|
|
</div><script type="text/javascript">
|
|
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-36251023-1']);
|
|
_gaq.push(['_setDomainName', 'jqueryscript.net']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|