js实现标准科学程序员多进制计算器切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js实现标准科学程序员多进制计算器切换效果代码，支持多种场景的计算器，支持标准、科学、多进制计算，包含十六进制、十进制、八进制、二进制的计算。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>


</head>

<body>
    <style>
        .standard-main,
        .science-main,
        .programmer-main {
            background-color: #F2F2F2;
            margin: 40px auto 0px;
            box-shadow: 0px 0px 15px #4D4D4D;
        }
        
        ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        
        li {
            float: left;
            text-align: center;
            cursor: pointer;
        }
        
        li img {
            height: 14px;
        }
        
        .title {
            height: 30px;
            line-height: 30px;
        }
        
        .result {
            height: 120px;
            text-align: right;
        }
        
        .second {
            font-size: 40px;
            font-weight: bold;
            padding-right: 10px;
        }
        
        .pre {
            color: #A7A7A7;
            padding-right: 10px;
        }
        
        /*计算器类型*/
        .type {
            height: 20px;
            text-align: left;
            margin-left: 10px;
            font-weight: bold;
            margin-top: 10px;
            cursor: pointer;
        }
        
        /*类型选择侧边栏*/
        .type-bar {
            display: none;
            height: 90px;
            width: 100px;
            position: absolute;
            top: 110px;
            background-color: #E6E6E6;
        }
        
        .type-bar li {
            float: left;
            width: 100px;
            text-align: center;
            line-height: 30px;
        }
        
        .active {
            background-color: #CFCFCF;
        }
        
        /*数字加粗*/
        .number {
            font-weight: bold;
        }
        
        /*共用部分结束*/
        
        /*计算器标准版界面开始*/
        .standard-main {
            width: 350px;
            height: 480px;
        }
        
        #std-top-symbol {
            border-top: 1px #A7A7A7 solid;
            height: 52px;
        }
        
        #std-num-symbol {
            background-color: #E6E6E6;
            height: 270px;
            font-size: 20px;
        }
        
        #std-top-symbol li,
        #std-num-symbol li {
            line-height: 52px;
            width: 87.5px;
        }
        
        /*标准界面结束*/
        
        /*科学型界面开始*/
        .science-main {
            display: none;
            width: 350px;
        }
        
        .sci-result {
            height: 120px;
            text-align: right;
        }
        
        #sci-top-symbol {
            border-top: 1px #A7A7A7 solid;
            height: 135px;
        }
        
        #sci-top-symbol li,
        #sci-num-symbol li {
            line-height: 45px;
            width: 70px;
        }
        
        #sci-num-symbol {
            height: 235px;
            background-color: #E6E6E6;
        }
        
        /*科学型界面结束*/
        
        /*程序员型界面开始*/
        .programmer-main {
            display: none;
            width: 350px;
        }
        
        .pro-result {
            height: 220px;
            text-align: right;
        }
        
        #pro-top-symbol {
            border-top: 1px #A7A7A7 solid;
            height: 45px;
        }
        
        #pro-top-symbol li {
            line-height: 45px;
            width: 58px;
        }
        
        #pro-num-symbol li {
            line-height: 45px;
            width: 70px;
        }
        
        #pro-num-symbol {
            height: 235px;
            background-color: #E6E6E6;
        }
        
        /*四个进制*/
        #pro-scales {
            margin-left: 20px;
        }
        
        #pro-scales div {
            text-align: left;
            margin-top: 5px;
            cursor: pointer;
        }
        
        /*当前使用的进制*/
        .scale-active {
            color: cornflowerblue;
        }
        
        /*按键不可用*/
        .disable-btn {
            color: #CACACA;
        }
        
        /*程序员型界面结束*/
    </style>
    <div class="row">

        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <form class="form-inline" role="form">
                        <h4 class="mr-sm-1"><i class="fa fa-calculator"></i> 在线计算器</h4>
                        <button type="button" class="btn btn-outline-primary mr-sm-1" id="submitBTN1"><i class="fa fa-calculator"></i> 标准计数器</button>
                        <button type="button" class="btn btn-outline-warning mr-sm-1" id="submitBTN2"><i class="fas fa-square-root-alt"></i> 科学计算器</button>
                        <button type="button" class="btn btn-outline-dark mr-sm-1" id="submitBTN3"><i class="fab fa-buromobelexperte"></i> 进制转换器</button>
                    </form>
                </div>
                <div class="card-body">

                    <!--标准型-->
                    <div class="standard-main" id="std-main">
                        <div class="title">
                            &nbsp;&nbsp;计算器
                        </div>
                        <!--结果显示区域-->
                        <div class="result">
                            <!--显示类型信息-->
                            <div class="type" id="std-show-bar">
                                ☰&nbsp;&nbsp;&nbsp;标准计算器
                            </div>
                            <!--上一步的结果-->
                            <div class="pre" id="std-pre-step">
                                &nbsp;
                            </div>
                            <!--第二个/运算结果-->
                            <div class="second" id="std-show-input">0</div>
                        </div>
                        <ul id="std-top-symbol">
                            <li value="17">%</li>
                            <li value="18">√</li>
                            <li value="19"><img src="https://static.runoob.com/images/mix/x_2.png" style="height: 18px;" /></li>
                            <li value="20"><img src="https://static.runoob.com/images/mix/1_x.png" /></li>
                        </ul>
                        <!--数字和符号-->
                        <ul id="std-num-symbol">
                            <li value="37">CE</li>
                            <li value="38">C</li>
                            <li value="39">Back</li>
                            <li value="16">÷</li>
                            <li class="number" value="7">7</li>
                            <li class="number" value="8">8</li>
                            <li class="number" value="9">9</li>
                            <li value="15">×</li>
                            <li class="number" value="4">4</li>
                            <li class="number" value="5">5</li>
                            <li class="number" value="6">6</li>
                            <li value="14">-</li>
                            <li class="number" value="1">1</li>
                            <li class="number" value="2">2</li>
                            <li class="number" value="3">3</li>
                            <li value="13">+</li>
                            <li value="11">±</li>
                            <li class="number" value="0">0</li>
                            <li value="10">.</li>
                            <li value="12">=</li>
                        </ul>
                        <!--侧边栏，选择计算器类型-->
                        <ul class="type-bar" id="std-type-bar">
                            <li class="active">标准</li>
                            <li value="2">科学</li>
                            <li value="3">程序员</li>
                        </ul>
                    </div>
                    <!--科学型-->
                    <div class="science-main" id="sci-main">
                        <div class="title">
                            &nbsp;&nbsp;计算器
                        </div>
                        <!--结果显示区域-->
                        <div class="sci-result">
                            <!--显示类型信息-->
                            <div class="type" id="sci-show-bar">
                                ☰&nbsp;&nbsp;&nbsp;科学计算器
                            </div>
                            <!--上一步的结果-->
                            <div class="pre" id="sci-pre-step">
                                &nbsp;
                            </div>
                            <!--第二个/运算结果-->
                            <div class="second" id="sci-show-input">0</div>
                        </div>
                        <!--上面的3行运算符-->
                        <ul id="sci-top-symbol">
                            <li value="21">(</li>
                            <li value="22">)</li>
                            <li value="23"><img src="https://static.runoob.com/images/mix/x_y_sqrt.png" style="height: 18px;width: 22px;" /></li>
                            <li value="24">n!</li>
                            <li value="25">Exp</li>
                            <li value="19"><img src="https://static.runoob.com/images/mix/x_2.png" style="height: 18px;" /></li>
                            <li value="26"><img src="https://static.runoob.com/images/mix/x_y.png" style="height: 18px;" /></li>
                            <li value="27">sin</li>
                            <li value="28">cos</li>
                            <li value="29">tan</li>
                            <li value="30"><img src="https://static.runoob.com/images/mix/10_x.png" /></li>
                            <li value="31">log</li>
                            <li value="32">sinh</li>
                            <li value="33">cosh</li>
                            <li value="34">tanh</li>
                        </ul>
                        <!--数字和符号-->
                        <ul id="sci-num-symbol">
                            <li value="35">π</li>
                      .........完整代码请登录后点击上方下载按钮下载查看