JavaScript应用:简单计算器的实现

JS实现简单计算器

页面布局设计(HTML+CSS)

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器title>
    <link rel="stylesheet" type="text/css" href="./style.css"> 
   
    <script src="https://code.jquery.com/jquery-latest.min.js">script> 
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">7button>td>
                <td><button id="c22" onclick="cal(this)" value="8">8button>td>
                <td><button id="c23" onclick="cal(this)" value="9">9button>td>
                <td rowspan="2"><button id="c24" onclick="cal(this)">Cbutton>td>
            tr>
            <tr>
                <td><button id="c31" onclick="cal(this)" value="4">4button>td>
                <td><button id="c32" onclick="cal(this)" value="5">5button>td>
                <td><button id="c33" onclick="cal(this)" value="6">6button>td>
            tr>
            <tr>
                <td><button id="c41" onclick="cal(this)" value="1">1button>td>
                <td><button id="c42" onclick="cal(this)" value="2">2button>td>
                <td><button id="c43" onclick="cal(this)" value="3">3button>td>
                <td rowspan="2"><button id="c44" onclick="cal(this)">=button>td>
            tr>
            <tr>
                <td colspan="2"><button id="c51" onclick="cal(this)" value="0">0button>td>
                <td><button id="c53" onclick="cal(this)">.button>td>
            tr>
        table>
    div>
    
                    
                    

你可能感兴趣的:(JavaScript,js,计算器)