html——计算器

菜鸟逆袭记w

于 2024-08-12 18:48:17 发布

阅读量393

点赞数 1

文章标签： html 前端笔记程序人生学习方法

本文链接：https://blog.csdn.net/2401_86506743/article/details/141138945

版权

一、需求

运用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>