[Front-end demo] Convert binary numbers to decimal numbers natively

https://github.com/florinpop17/app-ideas

Summarize

Article Directory

Effect

binary to decimal conversion
If the input is empty or not binary, prompt
empty

https://codepen.io/karshey/pen/dywXZYQ

insert image description here

JavaScript implements binary conversion

parseInt

parseInt('111',2)

Manual implementation

bin is the input string.

function Bin2Dec(bin) {
    
    
    let dec = 0;
    for (let index = bin.length - 1; index >= 0; index--) {
    
    
        let num = bin.length - 1 - index;
        dec += Math.pow(2, num) * parseInt(bin[index]);
    }
    return dec;
}

native code

You can use an online running website to run it, such as: https://uutool.cn/html/

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Binary to Decimal Converter</title>
    <!-- 在这里写CSS -->
    <style>
        .box {
      
      
            width: 400px;
            padding: 30px 20px;
            border: 1px solid #9e9e9e;
            border-radius: 10px;
            background-color: #baf0f0;
        }

        .input {
      
      
            margin-bottom: 20px;
        }

        .text {
      
      
            margin: 5px 0;
        }

        .button {
      
      
            height: 30px;
        }

        .put {
      
      
            width: 250px;
            height: 25px;
            background-color: #cfedf1;
            border: 1px solid #9e9e9e;
            border-radius: 7px;
            /* 输入的字离边距有10px */
            box-sizing: border-box;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <h2>Binary to Decimal Converter</h2>

    <div class="box">
        <div class="input box2">
            <div class="text">Binary Input</div>
            <form action="">
                <input type="text" placeholder="Enter 0 or 1" id="input" class="put">
                <input type="button" value="Convert" onclick="clickConvert()" class="button"></input>
            </form>
        </div>
        <div class="output box2">
            <div class="text">Binary Output</div>
            <form action="">
                <input type="text" id="output" class="put">
                <input type="button" value="Clear" onclick="Clear()" class="button"></input>
            </form>
        </div>
    </div>
</body>

</html>

<script>
    function clickConvert() {
      
      
        let bin = document.getElementById('input').value

        //判断输入是否为空
        if (bin === '') {
      
      
            alert('请输入二进制数')
            Clear()
            return
        }

        // 判断是否全0或1
        let flag = 0
        for (let i = 0; i < bin.length - 1; i++) {
      
      
            if (!(bin[i] === '0' || bin[i] === '1')) {
      
      
                flag = 1; break;
            }
        }
        if (flag) {
      
      
            alert('请输入二进制数')
            Clear()
            return
        }

        // 计算
        let dec = 0

        for (let index = bin.length - 1; index >= 0; index--) {
      
      
            let num = bin.length - 1 - index
            dec += Math.pow(2, num) * parseInt(bin[index])
        }

        document.getElementById('output').value = String(dec)
    };

    function Clear() {
      
      
        document.getElementById('input').value = ''
        document.getElementById('output').value = ''
        // alert('已清除数据')
    }
</script>

problems encountered

There is a query button on the page as Buttonthe label. After clicking the query button, the page will be automatically refreshed , causing the page to flicker and the assigned value to disappear. After checking the information, it is found that it is caused by the default behavior of the button.

The button label button will submit the form , and the input label type attribute is button will not perform any operations on the form.

Solution:

will <button>be changed to<input type='button'>