- ベストアンサー
WEBサイトの文字列表示
ライフネットの見積もり画面で金額がスロットのように表示されますがどうやって出来るのでしょうか？ 何かサンプルがあれば教えて下さい！
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
JavaScript を使えばできるよ！ Firefox と Chrome なら問題ないとおもうけど、 IE なら version 9 で。 「表示させる数値」に 123456789 を入力して実行してみて！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="Shift_JIS"/> <title>数字が入れ替わる JavaScript サンプル</title> <style> body { font-family:meiryo,sans-serif; } input, button { font-family:inherit; font-size:inherit; } h1 { font-size:120%; } h2 { font-size:110%; } [name=estimate] strong { font-size:150%; } [name=estimate] input { width:8em; background-color:white; text-align:right; } [name=estimate] button { font-size:85%; } </style> </head> <body> <section> <h1>数字が入れ替わる JavaScript サンプル</h1> <p>エラー処理して無いので数値だけ入力してね。</p> <form name="estimate"> <h2>表示させる数値</h2> <div> \<input type="text" name="result" value="0"/>- <button type="submit">実行</button> <button type="reset">クリア</button> </div> <h2>表示場所</h2> <div> <strong>\<input disabled="disabled" type="text" name="price" value="0"/>-</strong> </div> </form> </section> <script> document.forms['estimate'].onsubmit = function () { var est = document.forms['estimate']; nextprice.result = parseInt(est.result.value); //nextprice.addnumber 一回目の追加分(10^n)を計算 var log10 = Math.log(nextprice.result)*Math.LOG10E; var ru_log10 = (log10 == Math.floor(log10))? log10: 1+Math.floor(log10); nextprice.addnumber = Math.pow(10,ru_log10-1); window.setTimeout(nextprice,100); return false; } function nextprice () { var est = document.forms['estimate']; var price = parseInt(est.price.value); while (nextprice.result < price + nextprice.addnumber) { //桁を落として再確認 //console.log(nextprice.addnumber); nextprice.addnumber /= 10; if (nextprice.addnumber < 1) //1 より小さいなら終了 return; } est.price.value = price + nextprice.addnumber; window.setTimeout(nextprice, 100); } </script> </body> </html>
