「10進数と16進数の変換」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

10進数と16進数の変換

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>10進数と16進数の変換</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <script type="text/javascript">
  10.   $(document).ready(function () {
  11.     ko.applyBindings(new viewModel());
  12.   });
  13.   
  14.   function viewModel() {
  15.     var self = this;
  16.     
  17.     // 10進数を16進数に変換
  18.     self.inputNum01 = ko.observable();
  19.     self.convertNum01 = ko.computed( function() {
  20.       if ( self.inputNum01() != undefined && self.inputNum01() != "" )
  21.       {
  22.         // 数値化（parseFloat()）してから、16進数の表記に変換
  23.         return parseFloat(self.inputNum01()).toString(16);
  24.       }
  25.       else
  26.       {
  27.         return "";
  28.       }
  29.     }, this);
  30.     
  31.     // 16進数を10進数に変換
  32.     self.inputNum02 = ko.observable();
  33.     self.convertNum02 = ko.computed( function() {
  34.       if ( self.inputNum02() != undefined && self.inputNum02() != "" )
  35.       {
  36.         // 10進数の表記に変換
  37.         return parseInt(self.inputNum02(), 16);
  38.       }
  39.       else
  40.       {
  41.         return "";
  42.       }
  43.     }, this);
  44.   }
  45.   
  46. </script>
  48. <style type="text/css">
  49. th{
  50.   text-align:left;
  51.   background-color:#fff;
  52.   padding:3px;
  53. }
  55. .cap th{
  56.   text-align:center;
  57.   background-color:#e0e0e0;
  58. }
  60. td{
  61.   text-align:center;
  62.   padding:3px;
  63. }
  64. input{
  65.   width:50px;
  66.   text-align:center;
  67. }
  68. </style>
  70. </head>
  71. <body>
  72. <h1>10進数と16進数の変換：表示部は「knockout.js」</h1>
  74. <table border="1">
  75. <tr class="cap"><th>内容</th><th>元</th><th>結果</th></tr>
  76. <tr>
  77.   <th>10進数を16進数に変換</th>
  78.   <td><input type="text" data-bind="value: inputNum01" /></td>
  79.   <td><span data-bind="visible: convertNum01, text: convertNum01"></span></td>
  80. </tr>
  81. <tr>
  82.   <th>16進数を10進数に変換</th>
  83.   <td><input type="text" data-bind="value: inputNum02" /></td>
  84.   <td><span data-bind="visible: convertNum02, text: convertNum02"></span></td>
  85. </tr>
  86. </table>
  88. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  89. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  90. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  91. </div>
  93. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  94. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  95. </div>
  97. </body>
  98. </html>