用javascript做一个计算器,用js做一个计算器代码

最新推荐文章于 2024-08-11 01:47:13 发布

小狗AI

最新推荐文章于 2024-08-11 01:47:13 发布

阅读量3.7k

点赞数 4

文章标签：人工智能

本文链接：https://blog.csdn.net/ai_lover_cat/article/details/133917125

版权

大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！

JS实现简单计算器

页面布局设计（HTML+CSS)

由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在html中使用<></>标签引入了JQuery，在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象thispython for语句用法。
.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
    <link rel="stylesheet" type="text/css" href="./style.css"> <!-- css样式 -->
   
    < src="https://code.jquery.com/jquery-latest.min.js"></> <!-- 引用JQuery库 -->
</head>
<body>
    <div>
        <table>
            <tr>
                <td colspan="3"><input type="text" value="0"/></td>
            </tr>
            <tr>
                <td><button id="c11" onclick="cal(this)">+</button></td>
                <td><button id="c12" onclick="cal(this)">-</button></td>
                <td><button id="c13" onclick="cal(this)">×</button></td>
                <td><button id="c14" onclick="cal(this)">/</button></td>
            </tr>
            <tr>
                <td><button id="c21" onclick="cal(this)" value="7">7</button></td>
                <td><button id="c22" onclick="cal(this)" value="8">8</button></td>
                <td><button id="c23" onclick="cal(this)" value="9">9</button></td>
                <td rowspan="2"><button id="c24" onclick="cal(this)">C</button></td>
            </tr>
            <tr>
                <td><button id="c31"