このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/odometer-theme-default.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/odometer.min.js"></script>
<script>
	$(window).load(function(){
		odometerOptions = {
			auto: false
		}

		var _odometer1 = new Odometer({
			el: $('#odometerDemo1')[0],
			value: 111111,
			theme: 'minimal',
			format: 'ddd.ddd'
		});

		var _odometer2 = new Odometer({
			el: $('#odometerDemo2')[0],
			value: 222222,
			theme: 'plaza',
			format: 'ddd.ddd'
		});

		var _odometer3 = new Odometer({
			el: $('#odometerDemo3')[0],
			value: 333333,
			theme: 'car',
			format: 'ddd,ddd'
		});

		var _odometer4 = new Odometer({
			el: $('#odometerDemo4')[0],
			value: 444444,
			theme: 'slot-machine',
			format: 'ddd,ddd.dd'
		});

		var _odometer5 = new Odometer({
			el: $('#odometerDemo5')[0],
			value: 555555,
			theme: 'train-station',
			format: 'ddd,ddd'
		});
		var _odometer6 = new Odometer({
			el: $('#odometerDemo6')[0],
			value: 666666,
			theme: 'digital',
			format: 'dddddd'
		});

		_odometer1.render();
		_odometer1.update(Math.random() * 1000000);
		_odometer2.render();
		_odometer2.update(Math.random() * 1000000);
		_odometer3.render();
		_odometer3.update(Math.random() * 1000000);
		_odometer4.render();
		_odometer4.update(Math.random() * 1000000);
		_odometer5.render();
		_odometer5.update(Math.random() * 1000000);
		_odometer6.render();
		_odometer6.update(Math.random() * 1000000);
		
		
		_timer = setInterval(function(){
			_odometer1.update(Math.random() * 1000000);
			_odometer2.update(Math.random() * 1000000);
			_odometer3.update(Math.random() * 1000000);
			_odometer4.update(Math.random() * 1000000);
			_odometer5.update(Math.random() * 1000000);
			_odometer6.update(Math.random() * 1000000);
		}, 4000);
	});
</script>
<div id="odometerDemo1" class="odometer-demo"></div><br />
<div id="odometerDemo2" class="odometer-demo"></div><br />
<div id="odometerDemo3" class="odometer-demo"></div><br />
<div id="odometerDemo4" class="odometer-demo"></div><br />
<div id="odometerDemo5" class="odometer-demo"></div><br />
<div id="odometerDemo6" class="odometer-demo"></div>

odometerについて

odometerは、数字のカウントを表示するプラグインです。
豊富なテーマが用意されているので、好みのものが見つかるはず。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • counter

    counter

    シンプルに数字のカウンターを設置できる