主要需求：十进制转二进制，可以控制指定的位数。

转化显示后的二进制数为bin-bit中输入的数字宽度。
dec-number为5，bin-bit为5，则转化后数字为00101。
如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错。

一、十进制转二进制，不控制位数。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>10进制转2进制，不带位数控制</title>

 </head>

 <body>

     <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">

     <button id="trans-btn">转化为二进制</button>

     <p id="result">运算结果</p>

     <script>

         //点击事件

         document.getElementById("trans-btn").onclick = function () {

             var x = document.getElementById("dec-number").value;

             dec2bin(x);

         }

         function dec2bin(decNumber) {

             // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数

             if (decNumber < 0) {

                 alert("请输入一个非负整数");

             } else {

                 var q = binary(decNumber);

                 document.getElementById("result").innerHTML = ("计算结果为：" + q);

             }

         }

         // 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内

         // Some coding

         function binary(num) {

             var resArry = [];

             var xresArry = [];

             i = 0;

             //除2取余

             for (; num > 0;) {

                 resArry.push(num % 2);

                 num = parseInt(num / 2);

                 i++;

             }

             //倒序排列

             for (j = i - 1; j >= 0; j--) {

                 xresArry.push(resArry[j]);

             }

             return xresArry.join().replace(/,/g, "");

         }

     </script>

 </body>

 </html>

二、十进制转二进制，控制位数。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>10进制转2进制，带位数控制</title>

 </head>

 <body>

     <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">

     <input id="bin-bit" type="number" placeholder="输入需要显示的位数">

     <button id="trans-btn">转化为二进制</button>

     <p id="result">运算结果</p>

     <script>

         //点击事件

         document.getElementById("trans-btn").onclick = function () {

             var x = document.getElementById("dec-number").value;

             var y = document.getElementById("bin-bit").value;

             dec2bin(x, y);

         }

         function dec2bin(decNumber, bit) {

             // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数

             if (decNumber < 0) {

                 alert("请输入一个非负整数");

             } else {

                 var q = binary(decNumber, bit);

                 document.getElementById("result").innerHTML = ("计算结果为：" + q);

             }

         }

         // 实现党点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内

         // Some coding

         function binary(num, Bits) {

             var resArry = [];

             var xresArry = [];

             i = 0;

             //除2取余

             for (; num > 0;) {

                 resArry.push(num % 2);

                 num = parseInt(num / 2);

                 i++;

             }

             //倒序排列

             for (j = i - 1; j >= 0; j--) {

                 xresArry.push(resArry[j]);

             }

             //报错

             if (Bits < xresArry.length) {

                 console.log("控制位小于转换位数");

             }

             //补0操作

             if (Bits) {

                 for (r = xresArry.length; r < Bits; r++) {

                     xresArry.unshift("0");

                 }

             }

             return xresArry.join().replace(/,/g, "");

         }

     </script>

 </body>

 </html>

涉及的知识点：

十进制转二进制，除2取余，倒序排列。

push()

unshift()

join()

replace()

<input placeholder="请输入">

JS十进制转二进制（控制位数）的更多相关文章

  1. Javascript-可定义位数的十进制转二进制

    // 十进制转二进制 function binary (num, Bits) { var d = parseInt(num / 2) var resArry = [num % 2] for(; d ! ...

  2. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  3. 十进制转二进制and位运算符

    先给大家送个福利! ---------------简单口算-------------------------- 10 >>  1010   除2取余倒写 /* 十进制转二进制规则是:除二取 ...

  4. C语言 · 递归求二进制表示位数

    算法训练 6-2递归求二进制表示位数   时间限制:10.0s   内存限制:256.0MB      问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数 ...

  5. [ActionScript 3.0] 十进制与二进制，十六进制等数据之间的相互转换

    将十进制转换为二进制,方法是:将数字除以2,根据余数来从右往左排列二进制的位数,如下以十进制数10为例 10除以2得5,余数为0,故第一个位置为0: 5除以2得2,余数为1,故第二个位置为1: 2除以 ...

  6. JS字符串与二进制的转化

    JS字符串与二进制的相互转化 1 2 3 4 5 //字符串转ascii码,用charCodeAt(); //ascii码转字符串,用fromCharCode(); var str = "A ...

  7. 蓝桥杯 算法训练 ALGO-151 6-2递归求二进制表示位数

    算法训练 6-2递归求二进制表示位数   时间限制:10.0s   内存限制:256.0MB 问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数是1001 ...

  8. C# 十进制与二进制、十六进制、八进制之间的转换

    1.十进制 转 二进制 将十进制数不断地除2,将所有余数倒叙填写,即可得到所需二进制数据. public static string DecimalToBinary(int vDecimal) { / ...

  9. Java实现 蓝桥杯VIP 算法训练 递归求二进制表示位数

    问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数是1001,因此位数是4. 样例输入 一个满足题目要求的输入范例. 9 样例输出 与上面的样例输入对应的 ...

随机推荐

  1. 使用单个httpclient实例请求数据。

    做J2EE的都知道httpclient这个工具,Android也自带这个工具,不过和J2EE上的不一样,可能是google在添加的时候,自己修改了一部分代码. 在J2EE中可以使用如下代码,在多线程的 ...

  2. 一个python 服务器程序性能分析

    该服务器为bono,启动11个进程. 1.设置cprofile 在启动服务的总入口设置cprofile if __name__=="__main__": import cProfi ...

  3. HTML-基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  4. NavigatorIOS

    使用 NavigatorIOS,我们需要给他指定一个路由,这样它才能知道显示哪个页面 实例化 Navigator 需要2个必要的属性 —— initialRoute 和 renderSence,它们的 ...

  5. [LnOI2019]加特林轮盘赌

    Luogu5249 轮流开枪打一个环上的人 , 每次\(p\)的概率打死 , \(p\)始终相同 , 从第\(1\)个人开始 , 求第\(k\)个人成为唯一幸存者的概率 \(19.3.30\) 官方题 ...

  6. shell (2) 时间处理

    获取当前的时间,并输出 #!/bin/bash if [ $# -ne 1 ];then echo "input an dmesg time" exit 1 fi unix_tim ...

  7. Pycharm+QTDesigner+PyQt5环境配置

    python+PyQt5写界面很方便,记录下个人配置环境过程.... 安装软件: pycharm2017 Qt5.9.6 python3.6.6/python2.7.15 配置PyQt5: pytho ...

  8. Behind the scenes of the C# yield keyword（转）

    https://startbigthinksmall.wordpress.com/2008/06/09/behind-the-scenes-of-the-c-yield-keyword/ Behind ...

  9. 分分钟钟学会Python - 数据类型（dict）

    今日内容 字典(dict) 具体内容 1.字典含义 帮助用户去表示一个事物的信息(事物是有多个属性). 基本格式 data = {键:值,键:值,键:值,键:值,键:值,键:值,} # 练习题 use ...

  10. java se系列（十一）线程

    1 线程的概述 进程:正在运行的程序,负责了这个程序的内存空间分配,代表了内存中的执行区域. 线程:就是在一个进程中负责一个执行路径. 多线程:就是在一个进程中多个执行路径同时执行. 图上的一键优化与 ...