odometer.jsで数字をカウントさせて、出力結果が一桁の場合あたまに0を付ける方法

毎日すごしやすい季節ですねー！

今回は以前投稿したodometer.jsで数字をカウントさせながら表示するにご質問をいただきましたので簡単なのですがブログでご紹介したいと思います。

その質問というのがタイトルにある通り「デフォルト値を00からはじめて、表示したい数値が一桁台の場合は、01や02というように二桁表示にしたい」というものです。

早速ソースから！
HTMLは通常通り、JSとCSSを読み込ませます。

<link href="https://creatornote.nakweb.com/wp-content/themes/giraffe/css/odometer-theme-default.css" rel="stylesheet" type="text/css" >

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://creatornote.nakweb.com/wp-content/themes/giraffe/js/odometer.min.js"></script>

//※https://creatornote.nakweb.com/wp-content/themes/giraffe/cssやhttps://creatornote.nakweb.com/wp-content/themes/giraffe/js
は自分のパスに置き換えてくださいね！

回転させたいタグに[class=”odometer”]を付与します。

<div class="math_list05">
  <p class="mfsz"><span class="odometer" id="odo01">00</span><i>人</i><p>
</div>

[00]の部分を00からという指定にしてくださいね！

ここまでは前回と一緒です。
違うのがここから！


$(document).ready(function() {
setTimeout(function(){
$('#odo01').html('0' + 3);
}, 1000);
});

出力結果が一桁の時に0を付与するには、表示結果のまえに『’0′ + 』を付与してあげます！
これで結果も【03人】となったはず！

ぜひ試してみくださいね~♪

Share: