javascrip 实现简单的计算器功能

页面样式


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

      // window.onload 获取元素getElementById

        window.onload = function(){

            var oTxt1 = document.getElementById('val01');

            var oTxt2 = document.getElementById('val02');

            var oFuhao = document.getElementById('fuhao');

            // 这三个要放在button函数里面，因为s1.value是获取input里面的输入，但是这个时候还没有输入了

            // var iNum1 = oTxt1.value;

            // var iNum2 = oTxt2.value;

            // var iNum3 = oFuhao.value;

            oBtn = document.getElementById('btn');

　　　　　　　// 计算按钮点击事件

            oBtn.onclick = function(){

                var iNum1 = oTxt1.value;

                var iNum2 = oTxt2.value;

                var iNum3 = oFuhao.value;

                var iResult;

　　　　　　　　　　//如果两个输入有一个是空的话
　　　　　　　　　　//return是让if里面执行结束

                if (iNum1=='' || iNum2=='') {

                    alert('不能为空');

                    return;

                }
　　　　　　　　　　//isNaN() 如果是true，说明是非数字，所以如果两个输入中有非数字，就提示alert

                if (isNaN(iNum1) || isNaN(iNum2)) {

                    alert('不能有字母');

                    return;

                }
　　　　　　　　　　//对+-*/四个操作对应的value进行判断
　　　　　　　　　　//如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数

                if (iNum3 == 0) {

                    iResult = parseInt(iNum1) + parseInt(iNum2)

                }

                else if (iNum3 == 1) {

                    iResult = parseInt(iNum1) - parseInt(iNum2)

                }

                else if (iNum3 == 2) {

                    iResult = parseInt(iNum1) * parseInt(iNum2)

                }

                else if (iNum3 == 3) {

                    iResult = parseInt(iNum1)/parseInt(iNum2)

                }

                alert(iResult);

            }

        }

    </script>

</head>

<body>

    <h3>计算器</h3>

    <input type="text" id="val01">

    <select id="fuhao">

        <option value="0">+</option>

        <option value="1">-</option>

        <option value="2">*</option>

        <option value="3">/</option>

    </select>

    <input type="text" id="val02">

    <input type="button" id="btn" value="计算">

</body>

</html>

巴特西

javascrip 实现简单的计算器功能

最新文章

热门文章