桁数をそろえるために0を埋める

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>桁数をそろえるために0を埋める</title>
  6. <style type="text/css">
  7. td,th{border:1px solid #ccc;padding:3px;}
  8. </style>
  9. <body>
  10. <h1>桁数をそろえるために0を埋める</h1>
  11. <script type="text/javascript">
  12. /**
  13.  * 桁数をそろえるために0を埋める
  14.  * digit:桁
  15.  * num  :数字
  16.  */
  17. function convertNumberDigits(digit, num)
  18. {
  19.   var src = new String(num);
  20.   var cnt = digit - src.length;
  21.   
  22.   if (0 < cnt) {
  23.     while (cnt-- > 0) {
  24.       src = "0" + src;
  25.     }
  26.   }
  27.   return src;
  28. }
  29. document.write("<table>");
  30. document.write("<tr>");
  31. document.write("<th>内容</th>");
  32. document.write("<th>実行文</th>");
  33. document.write("<th>結果</th>");
  34. document.write("</tr>");
  35. document.write("<tr>");
  36. document.write("<td>「3」を「003」とする</td>");
  37. document.write("<td>convertNumberDigits(3, 3);</td>");
  38. document.write("<td>" + convertNumberDigits(3, 3) + "</td>");
  39. document.write("</tr>");
  40. document.write("<tr>");
  41. document.write("<td>「21」を「021」とする</td>");
  42. document.write("<td>convertNumberDigits(3, 21);</td>");
  43. document.write("<td>" + convertNumberDigits(3, 21) + "</td>");
  44. document.write("</tr>");
  45. document.write("<tr>");
  46. document.write("<td>「21」を「0021」とする</td>");
  47. document.write("<td>convertNumberDigits(4, 21);</td>");
  48. document.write("<td>" + convertNumberDigits(4, 21) + "</td>");
  49. document.write("</tr>");
  50. document.write("<tr>");
  51. document.write("<td>「21」と「3」を「2ケタ」にする</td>");
  52. document.write("<td>convertNumberDigits(2, 21);<br />convertNumberDigits(2, 3);</td>");
  53. document.write("<td>" + convertNumberDigits(2, 21) + "<br />" + convertNumberDigits(2, 3) + "</td>");
  54. document.write("</tr>");
  55. document.write("</table>");
  56. </script>
  57. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  58. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  59. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  60. </div>
  61. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  62. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  63. </div>
  64. </body>
  65. </html>