您的当前位置：首页正文

html——计算器

来源：九壹网

一、需求

运用html相关知识制作一个简易计算器，在浏览器页面显示出来

二、步骤

1.在script中定义一个方法，用两个变量接收数据，判断是哪个运算符

2.使用表单相关知识用于在浏览器上显示页面

3.呈现于浏览器上的页面

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function f(b){
        //从页面上接受到的所有数据都是字符串所以需要将其转换为小数类型
        //parseFloat是将字符串换为小数类型
        //document.calc.num1.value表示的是页面上叫calc的表单名字中叫num1的文本框的里面的值
            var num1 = parseFloat(document.calc.num1.value);
            var num2 = parseFloat(document.calc.num2.value);
            if(b=='+')
                document.calc.sum.value=num1+num2;
            else if(b=='-')
                document.calc.sum.value=num1-num2;
            else if(b=='*')
                document.calc.sum.value=num1*num2;
            else if(b=='/')
                document.calc.sum.value=num1/num2;
        }
    </script>
</head>
<body>
    <form name="calc">
        num1:<input type="text" name="num1"><br>
        num2:<input type="text" name="num2"><br>
<!--onclick表示鼠标点击事件，点击后执行的函数就是f函数-->
        <input type="button" onclick="f('+')" value="+">
        <input type="button" onclick="f('-')" value="-">
        <input type="button" onclick="f('*')" value="*">
        <input type="button" onclick="f('/')" value="/"><br>
        结果:<input type="text" name="sum">
    </form>
</body>
</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文