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

转化显示后的二进制数为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. MkDocs 文档生成逻辑浅析

    Markdown 和 MkDocs 简介 Markdown 的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客.世界上最流行的博客平台 WordPress 和大型 CMS 如 Jo ...

  2. 2.ajax+servlet实现注册时用户名验证

    效果: 精灵图(来源:从百度注册中download下来的): userVerify.jsp <%@ page language="java" contentType=&quo ...

  3. Python+selenium实现登录脚本

    import unittestfrom selenium import webdriverfrom time import sleepclass LoginCase(unittest.TestCase ...

  4. 【Css】Layout布局(一)

    看下图: css框模型(Box Model),也有叫做盒模型的.规定了元素框处理元素内容.内边距.边框 和 外边距 的方式. element元素,也是内容的主体: padding内边距,也右称为填充的 ...

  5. Log4J 配置文件模板及代码说明

    相对而言,这个日志系统的配置就没那么随意了,而且有些功能用起来也不是那么爽,譬如动态读取配置文件.不过鉴于使用这个日志的系统还是很多,所以也写一个demo贴出来,风格跟log4j2一样,配置的说明全在 ...

  6. Unity GL画折线

    新建一个脚本,这个物体得挂在有摄像机组件的物体上才能生效 OnPostRender() 这个函数才会被自动调用(类似生命周期自动调用) 然后就可以代码画线了,原理是openGL的画线 using Un ...

  7. django允许跨域请求配置

    django允许跨域请求配置 下载corsheader pip install django-cors-headers 修改setting.py中配置 在INSTALLED_APPS中增加corshe ...

  8. idea maven install 卡住，无报错排查。

    今天使用idea打包,执行install,看控制台日志,卡主了(意思是日志不继续在控制台输打印了,卡主了,也看不到错误),也没有报错,然后进行排查. 进入dos命令,进入到项目的根目录,使用 运行 m ...

  9. CCF 201409-4 最优配餐

    问题描述 试题编号: 201409-4 试题名称: 最优配餐 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么 ...

  10. <数据挖掘导论>读书笔记5关联分析的基本概念和算法

    关联规则的强度可以用support度和confidence(置信)度来度量 关联规则发现  给定事务的集合T,关联规则发现是指找出支持度大于等于minsup并且置信度大于等于minconf的所有规则, ...