计算器实现js

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量73 收藏
点赞数
分类专栏： 前端 文章标签： javascript servlet html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56921846/article/details/126049207
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        td {

            font-size: 20px;

            width: 80px;

            height: 50px;

            text-align: center;

            background-color: aqua;

        }

        tr:first-child> td:first-child{

            background-color: rgb(170, 194, 216);

        }

        tr:not(:first-child)>td{

            border-radius: 30%;

        }

        input {

            width: 280px;

            height: 30px;

        }

        table{

            padding: 10px;

            padding-top: 30px;

            margin: 100px auto;

            border-radius: 10px;

            background-color: gray;

        }

       

    </style>

</head>

<body>

    <table border="1">

        <tr>

            <td colspan="4"><input type="text"></td>

        </tr>

        <tr style="height: 10px;"></tr>

        <tr>

            <td>x²</td>

            <td>x³</td>

            <td>←</td>

            <td>清空</td>

            </td>

        </tr>

        <tr>

            <td>7</td>

            <td>8</td>

            <td>9</td>

            <td style="background-color: orange;">×</td>

            </td>

        </tr>

        <tr>

            <td>4</td>

            <td>5</td>

            <td >6</td>

            <td style="background-color: orange;">-</td>

        </tr>

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

            <td  style="background-color: orange;">+</td>

        </tr>

        <tr>

            <td>.</td>

            <td>0</td>

            <td style="background-color: green;">÷</td>

            <td style="background-color: orange;">=</td>

        </tr>

    </table>

    <script>

        var inp = document.getElementsByTagName("input")[0]

        var xianshi = document.getElementsByTagName("td")[0]

        var pingfang = document.getElementsByTagName("td")[1]

        var lifang = document.getElementsByTagName("td")[2]

        var qingchu = document.getElementsByTagName("td")[3]

        var qingkong = document.getElementsByTagName("td")[4]

        var qi = document.getElementsByTagName("td")[5]

        var ba = document.getElementsByTagName("td")[6]

        var jiu = document.getElementsByTagName("td")[7]

        var cheng = document.getElementsByTagName("td")[8]

        var si = document.getElementsByTagName("td")[9]

        var wu = document.getElementsByTagName("td")[10]

        var liu = document.getElementsByTagName("td")[11]

        var jian = document.getElementsByTagName("td")[12]

        var yi = document.getElementsByTagName("td")[13]

        var er = document.getElementsByTagName("td")[14]

        var san = document.getElementsByTagName("td")[15]

        var jia = document.getElementsByTagName("td")[16]

        var dian = document.getElementsByTagName("td")[17]

        var ling = document.getElementsByTagName("td")[18]

        var chu = document.getElementsByTagName("td")[19]

        var dengyu = document.getElementsByTagName("td")[20]

        // 定义接收第一次值

        var a

        // 定义一个计算方法

        var jisuan = ""

        // 创建一个布尔值 来控制是否能清除上次输入的值默认可以清楚

        var clearOne=true

        ling.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 0

        }

        dian.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += "."

        }

        yi.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 1

        }

        er.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 2

        }

        san.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 3

        }

        si.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 4

        }

        wu.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 5

        }

        liu.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 6

        }

        qi.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 7

        }

        ba.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 8

        }

        jiu.onclick = function () {

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = true

            inp.value += 9

        }

        jia.onclick = function () {

            a = Number(inp.value)

            jisuan = "jia"

            inp.value = ""

        }

        jian.onclick = function () {

            a = Number(inp.value)

            jisuan = "jian"

            inp.value = ""

        }

        cheng.onclick = function () {

            a = Number(inp.value)

            jisuan = "cheng"

            inp.value = ""

        }

        chu.onclick = function () {

            a = Number(inp.value)

            jisuan = "chu"

            inp.value = ""

        }

        pingfang.onclick = function () {

            a = Number(inp.value)

            jisuan = "pingfang"

            inp.value = ""

        }

        lifang.onclick = function () {

            a = Number(inp.value)

            jisuan = "lifang"

            inp.value = ""

        }

        // 清除上次输入数字

        qingchu.onclick = function () {

            // 判断是否能清除上次

            if (clearOne == true) {

                b = inp.value

                var a1 = ""

                for (var i = 0; i < b.length - 1; i++) {

                    a1 += b[i]

                }

                b = a1

                inp.value = b

            }

        }

        // 清空

        qingkong.onclick = function () {

            inp.value = ""

            a = ""

        }






 

        dengyu.onclick = function () {

            var b = Number(inp.value)

            if (jisuan == "jia") {

                inp.value = b + a

            } else if (jisuan == "jian") {

                inp.value = a - b

            } else if (jisuan == "cheng") {

                inp.value = b * a

            } else if (jisuan == "chu") {

                inp.value = a / b

            } else if (jisuan == "pingfang") {

                inp.value = a * a

            } else if (jisuan == "lifang") {

                inp.value = a * a * a

            }

            // 将第一次直清空

            a = ""

            // 讲计算符号清空

            jisuan = ""

            // 创建一个布尔值 来控制是否能清除上次输入的值

            clearOne = false

        }

    </script>

</body>

</html>

一只java小菜鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js实现简单计算器
10-23
一个简洁的网页JS计算器，附详细代码释义。通过下边的效果演示就可以看到，这是一个挺小的js网页计算器，界面美化的我想还是不错的，毕竟在没有使用任何图片修饰的情况下，很好看，而且功能挺实用，可以完成基本的...
js实现计算器功能
12-28
本文实例为大家分享了js实现计算器功能的具体代码，供大家参考，具体内容如下 知识点 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。 代码如下 <!DOCTYPE html> <html lang=en> ...
javascript实现计算器
anan的博客
01-05 9331
       首先说明一下为什么发这篇文章，因为今天早晨看到一篇类似的文章，我看了他的源码，发现实在太啰嗦了，于是便准备把这篇文章发出来！        其实使用javascript的函数来实现计算器可以说是练习javascript的一个好方法，虽然我的代码可...
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
JS实现计算器
qq_45921597的博客
09-25 2248
【代码】JS实现计算器。
JavaScript实现计算器
wangshiyi13的博客
07-18 5349
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
利用js实现计算器
object not found的博客
08-10 2万+
使用原生html，css，js创造的一个网页计算器
javascript实现简单的计算器
weixin_60537353的博客
11-14 837
javascript实现简单的计算器
JavaScript实现简易计算器
明哥
03-20 3398
效果图： 1、涉及内容 1、文本域标签 <textarea></textarea> 的 readonly 属性用于设置文本域文字为只读； 2、DOM 获取元素，getElementById() 获取带有指定 id 的节点； 3、DOM 事件中的 target 是指获取事件的目标，即触发事件的真实元素。 如下代码中： btn.onclick = function (e) { //判断只有点击到按钮...
javascript 实现简单计算器
weixin_51008360的博客
04-15 1367
文章目录css代码html代码js代码 效果图： css代码 <style type="text/css"> div{ margin: auto; border: 1px solid orange; overflow: hidden; font-size: 30px; } div:active{ background-color: pink; } #div1{ width: 700px; } #div2{
网页计算器原生js实现
qq_40664548的博客
04-21 547
鼠标点击按钮或者键盘按键都可实现！！！（话不多说，直接上源码） 计算器 简单的计算器 ...
javascript实现计算器功能
10-15
主要为大家详细介绍了javascript实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js html实现计算器功能
10-17
主要为大家详细介绍了js html实现计算器功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现简易计算器
10-15
主要为大家详细介绍了JS实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue前端打包
weixin_63680330的博客
07-04 300
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 483
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 95
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
创建react的脚手架
Mmj_mmj的博客
07-05 355
网址：creat-react-app.bootcss.com主流的脚手架：creat-react-app。
js实现计算器
05-25
以下是一个简单的 JavaScript 计算器实现： HTML: ``` <!DOCTYPE html> <title>JavaScript Calculator <td><button onclick="input('7')">7</button></td> <td><button onclick="input('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只java小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值