计算器（js）_计算器js完整代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43417378/article/details/121990546

本文介绍了一个使用JavaScript实现的简单计算器功能，该计算器通过读取三个输入字段的值，并乘以一个预设系数来计算最终结果。文章展示了如何进行数值验证、错误处理及结果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算器（js）

<div class="wrapper container-fluid" id="bladder">
        <div class="row" style="display: block;">
            <div class="col-xs-6">
                <div class="form-content">
                    <form class="form-horizontal">
                        <fieldset>
                            <legend lang="zh-CN">参数</legend>
                            <div class="form-group">
                                <div class="col-xs-10">
                                    <input id="c1" type="text" class="form-control">
                                </div>
                                <span>cm</span>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-10">
                                    <input id="c2" type="text" class="form-control">
                                </div>
                                <span>cm</span>
                            </div>
                            <div class="form-group">
                                <div class="col-xs-10">
                                    <input id="c3" type="text" class="form-control">
                                </div>
                                <span>cm</span>
                            </div>
                            
                            <div class="form-group">
                                × <span  id="L3">0.52</span>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="col-xs-6 ">
                <div class="form-content">
                    <form class="form-horizontal">
                        <fieldset>
                            <legend lang="zh-CN">计算结果</legend>
                            <!-- <textarea id="res" class="form-control" style="height: 280px;"></textarea> -->
                            <div class="col-xs-10">
                            	<input id="result" class="form-control">
                            </div>
                            <span>mL</span>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
        <div class="text-center">
            <button type="button" onclick="countBladder()" class="btn btn-success" lang="zh-CN">计算结果</button>
            <button type="button" onclick="clearCountBladder()" class="btn btn-secondary " lang="zh-CN">清空结果</button>
        </div>
    </div>

function countBladder() {
        /* $("input:text").each(function () {
            if ($.trim($(this).val()) == "") // 判断value值是否为空
            {
                $(this).parent().parent().find('label').css('color', '#F91C0C')
                $(this).focus(function () {
                    $(this).parent().parent().find('label').css('color', '')
                })
                return;
            }
        }); */

        //计算
        var c1 = $('#c1').val();
        c1 = c1.replace(/\s+/g, "");
        var c2 = $('#c2').val();
        c2 = c2.replace(/\s+/g, "");
        var c3 = $('#c3').val();
        c3 = c3.replace(/\s+/g, "");
        var L3 = $('#L3').text();

        if (!c1 || !c2 || !c3 || !L3) {
            layer.alert(window.lang.translate('参数不能为空！'), {
                title: window.lang.translate('提示'),
                icon: 5,
                skin: 'layer-ext-moon'
            });
            return false;
        }
        if (!IsNum(c1) || !IsNum(c2) || !IsNum(c3) || !IsNum(L3)) {
            layer.alert(window.lang.translate('参数必须是数字！'), {
                title: window.lang.translate('提示'),
                icon: 5,
                skin: 'layer-ext-moon'
            });
            return false;
        }

        /*if (!s1 && typeof(s1)!="undefined" && s1!=0){
            layer.alert('数据不能为空！', {icon: 1,skin: 'layer-ext-moon'});
        }*/
        var int1 = parseInt(c1);
        var int2 = parseInt(c2);
        var int3 = parseInt(c3);
        var int4 = parseFloat(L3);
        var result=int1*int2*int3*int4;
        $('#result').val(result);

    }
function clearCountBladder() {
        $("input:text").val('');
        //$("input:text").parent().parent().find('label').css('color', '')
        $("#c1").focus();
        $('#result').text('');
    }
// 判断是否为数字
    function IsNum(s) {
        if (s != null && s != "") {
            return !isNaN(s);
        }
        return false;
    }
    
//屏蔽浏览器自身F12事件
    document.onkeydown = function (event) {
        if (event.keyCode == 123) {
            event.returnValue = false;
            return;
        }
    }