取范围滑块值并转换为二进制

时间:2014-12-11 01:31:00

标签: javascript jquery css range

我有以下函数,当放入输入时将字母或数字转换为十六进制,十进制和二进制...它工作得很好但我希望有一个范围滑块从0到9以及该滑块的值到放在输入内并转换......

我有点管理......但它没有转换它......

JSfiddle SCRIPT

$(document).ready(function(){
       $('#ch').keypress(function(e){
           var ch = String.fromCharCode(e.which);
           $('#hex').html(Convert.toHex(ch));
           $('#dec').html(Convert.toDec(ch));
           $('#bin').html(Convert.toBin(ch));

           $('#ch').val(ch);
           return false;
       });
    });

var Convert = {
     chars: " !\"#$%&amp;'()*+'-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
     hex: '0123456789ABCDEF', bin: ['0000', '0001', '0010', '0011', '0100', '0101', '0110', '0111', '1000', '1001', '1010', '1011', '1100', '1101', '1110', '1111'],

     decToHex: function(d){
          return (this.hex.charAt((d - d % 16)/16) + this.hex.charAt(d % 16));
     },
     toBin: function(ch){
          var d = this.toDec(ch);
          var l = this.hex.charAt(d % 16);
          var h = this.hex.charAt((d - d % 16)/16);

          var hhex = "ABCDEF";
          var lown = l < 10 ? l : (10 + hhex.indexOf(l));
          var highn = h < 10 ? h : (10 + hhex.indexOf(h));
          return this.bin[highn] + ' ' + this.bin[lown];
     },
     toHex: function(ch){
          return this.decToHex(this.toDec(ch));
     },
     toDec: function(ch){
          var p = this.chars.indexOf(ch);
          return (p <= -1) ? 0 : (p + 32);
     }
};

HTML

<script>
    function updateTextInput(val) {
      document.getElementById('ch').value=val; 
    }
</script>

<input  type="range" name="rangeInput" id="rangeInput" value="0" min="0" max="9" onchange="updateTextInput(this.value);" />

<input class="convert" maxlength="1" name="ch" id="ch" />

<ul class="output">
<li><span id="hex">&nbsp;</span></li>
<li><span id="dec">&nbsp;</span></li>
<li><span id="bin">&nbsp;</span></li>
</ul>

1 个答案:

答案 0 :(得分:1)

我认为最简单的方法是在文本和范围输入中添加单独的事件,如下所示:

$(document).ready(function(){
       var convert = function(ch) {
           $('#hex').html(Convert.toHex(ch));
           $('#dec').html(Convert.toDec(ch));
           $('#bin').html(Convert.toBin(ch));
           $('#ch').val(ch);
       };
       $('#rangeInput').change(function(e){
           var ch = this.value;
           convert(ch);
       });
       $('#ch').keypress(function(e){
           var ch = String.fromCharCode(e.which);
           convert(ch);
       });
    });

JSfiddle SCRIPT