<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.target').each(function(){
var Target = $(this);
var duration = Target.data('duration');
var startValue = Target.data('start');
Target.html(startValue);
var f = Calc.bind(this);
Target.timer = setInterval(f, duration);
});
function Calc(){
var Target = $(this);
var startValue = Target.data('start');
var endValue = Target.data('end');
var step = Target.data('step');
startValue += step;
if (startValue < endValue) {
Target.data('start', startValue);
}
else {
window.clearInterval(Target.timer);
startValue = endValue
};
Target.html(startValue);
}
});
</script>
</head>
<body>
<span class="target" data-start="0" data-end="8000" data-step="1000" data-duration="1010"></span>
<span class="target" data-start="0" data-end="12" data-step="1" data-duration="1010"></span>
</body>
</html>