jQuery ht5计算器

最新推荐文章于 2024-08-10 21:02:37 发布
最新推荐文章于 2024-08-10 21:02:37 发布
阅读量527 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1462860631/article/details/121485216
版权

javascript 前端 html5

一个简易计算器

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
                list-style: none;
                text-decoration: none;
            }

            .container {
                margin: 0 auto;
                width: 500px;
                height: 500px;
                margin-top: 50px;
            }

            td:nth-child(1) {
                width: 80px;
            }

            td:nth-child(2) {
                width: 80px;
            }

            td:nth-child(3) {
                width: 80px;
            }

            td:nth-child(4) {
                width: 80px;
            }

            .box {
                height: 40px;
                text-align: center;
                line-height: 40px;
                color: aliceblue;
            }

            div {
                margin-right: 8px;
            }

            input {
                width: 313px;
                height: 50px;
                color: #F0F8FF;
                background-color: #000000;
                font-size: 25px;
                text-align: right;

            }

            td {
                padding-bottom: 5px;
            }

            .box_set_color {
                background-color: dimgrey;
            }

            .box_num_color {
                background-color: mediumblue;
            }

            .box_num_color_d {
                background-color: mediumblue;
            }

            .box_algo_color {
                background-color: darkgoldenrod;
            }

            .box_equal_color {
                background-color: coral;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <table>
                <tr>
                    <td colspan="4"><input type="text" id="txt" /></td>
                </tr>
                <tr>
                    <td>
                        <div class="box box_set_color storage">存储</div>
                    </td>
                    <td>
                        <div class="box box_set_color read">存取</div>
                    </td>
                    <td>
                        <div class="box box_set_color return">退格</div>
                    </td>
                    <td>
                        <div class="box box_set_color empty">清屏</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="box box_num_color">7</div>
                    </td>
                    <td>
                        <div class="box box_num_color">8</div>
                    </td>
                    <td>
                        <div class="box box_num_color">9</div>
                    </td>
                    <td>
                        <div class="box box_algo_color">/</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="box box_num_color">4</div>
                    </td>
                    <td>
                        <div class="box box_num_color">5</div>
                    </td>
                    <td>
                        <div class="box box_num_color">6</div>
                    </td>
                    <td>
                        <div class="box box_algo_color">x</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="box box_num_color">1</div>
                    </td>
                    <td>
                        <div class="box box_num_color">2</div>
                    </td>
                    <td>
                        <div class="box box_num_color">3</div>
                    </td>
                    <td>
                        <div class="box box_algo_color">+</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="box box_num_color">0</div>
                    </td>
                    <td>
                        <div class="box box_num_color_d">.</div>
                    </td>
                    <td>
                        <div class="box box_equal_color">=</div>
                    </td>
                    <td>
                        <div class="box box_algo_color">-</div>
                    </td>
                </tr>
            </table>
        </div>

        <script src="js/jquery-3.6.0.min.js"></script>
        <script>
            //数字
            $(".box_num_color").click(function() {
                var temp = $("#txt").val() + $(this).text() + "";
                if (Number(temp) == Number($(this).text())) {
                    $("#txt").val($(this).text());
                } else {
                    $("#txt").val(temp);
                }
            })
            //逗号
            $(".box_num_color_d").click(function() {
                // var temp=$("#txt").val()+$(this).text()+"";
                // $("#txt").val(temp);
                var add = $("#txt").val().indexOf("+");
                var reduce = $("#txt").val().indexOf("-");
                var ride = $("#txt").val().indexOf("x");
                var except = $("#txt").val().indexOf("/");
                var val = $("#txt").val();
                if (add != -1) { 
                    val = val.split("+"); //获取第二位数
                    if (val[1].indexOf(".") == -1 && val[1].length > 0) { //判断是否有点 点是不是在第一位
                        var temp = $("#txt").val() + $(this).text() + "";
                        $("#txt").val(temp);
                    }
                    

                } else if (reduce != -1) {
                    val = val.split("-");
                    if (val[1].indexOf(".") == -1 && val[1].length > 0) {
                        var temp = $("#txt").val() + $(this).text() + "";
                        $("#txt").val(temp);
                    }
                } else if (ride != -1) {
                    val = val.split("x");
                    if (val[1].indexOf(".") == -1 && val[1].length > 0) {
                        var temp = $("#txt").val() + $(this).text() + "";
                        $("#txt").val(temp);
                    }
                } else if (except != -1) {
                    val = val.split("/");
                    if (val[1].indexOf(".") == -1 && val[1].length > 0) {
                        var temp = $("#txt").val() + $(this).text() + "";
                        $("#txt").val(temp);
                    }
                } else {
                    if (val.indexOf(".") == -1) {
                        if (val.length > 0) {
                            var temp = $("#txt").val() + $(this).text() + "";
                            $("#txt").val(temp);
                        } else {
                            var temp = 0+ $(this).text() + "";
                            $("#txt").val(temp);
                        }

                    }
                }
            })
            //算法
            $(".box_algo_color").click(function() {
                var add = $("#txt").val().indexOf("+");
                var reduce = $("#txt").val().indexOf("-");
                var ride = $("#txt").val().indexOf("x");
                var except = $("#txt").val().indexOf("/");
                var val = $("#txt").val();
                if (add != -1) {
                    val = val.split("+");
                    val = Number(val[0]) + Number(val[1]);
                    $("#txt").val("");
                    var temp = val + $(this).text() + "";
                    $("#txt").val(temp);

                } else if (reduce != -1) {
                    val = val.split("-");
                    val = Number(val[0]) - Number(val[1]);
                    $("#txt").val("");
                    var temp = val + $(this).text() + "";
                    $("#txt").val(temp);
                } else if (ride != -1) {
                    val = val.split("x");
                    val = Number(val[0]) * Number(val[1]);
                    $("#txt").val("");
                    var temp = val + $(this).text() + "";
                    $("#txt").val(temp);
                } else if (except != -1) {
                    val = val.split("/");
                    val = Number(val[0]) / Number(val[1]);
                    $("#txt").val("");
                    var temp = val + $(this).text() + "";
                    $("#txt").val(temp);
                } else {
                    var temp = $("#txt").val() + $(this).text() + "";
                    $("#txt").val(temp);
                }
            });
            //结果
            $(".box_equal_color").click(function() {
                var add = $("#txt").val().indexOf("+");
                var reduce = $("#txt").val().indexOf("-");
                var ride = $("#txt").val().indexOf("x");
                var except = $("#txt").val().indexOf("/");
                var val = $("#txt").val();
                if (add != -1) {
                    val = val.split("+");
                    val = Number(val[0]) + Number(val[1]);
                    $("#txt").val("");
                    $("#txt").val(val);

                } else if (reduce != -1) {
                    val = val.split("-");
                    val = Number(val[0]) - Number(val[1]);
                    $("#txt").val("");
                    $("#txt").val(val);
                } else if (ride != -1) {
                    val = val.split("x");
                    val = Number(val[0]) * Number(val[1]);
                    $("#txt").val("");
                    $("#txt").val(val);
                } else if (except != -1) {
                    val = val.split("/");
                    val = Number(val[0]) / Number(val[1]);
                    $("#txt").val("");
                    $("#txt").val(val);
                } else {
                    $("#txt").val(val);
                }
            });
            //清屏
            $(".empty").click(function() {
                $("#txt").val("");
            });
            //退格
            $(".return").click(function() {
                var val = $("#txt").val();
                if (val != "") {
                    val = val + '';
                    val = val.substring(0, val.length - 1);
                    $("#txt").val(val);
                }
            });

            var arr = [];
            //存储
            $(".storage").click(function() {
                var val = $("#txt").val();
                arr[0] = val;
            })
            //存取
            $(".read").click(function() {
                if (arr[0] != undefined) {
                    $("#txt").val("");
                    $("#txt").val(arr[0]);
                }
            });
        </script>
    </body>
</html>

谎言中等待
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 380
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 411
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 409
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 301
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
【Vue3】图片未加载成功前占位
菜就多练
08-08 322
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 432
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1429
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
Vue 标准开发方式与组件、插槽的高效使用
小刘哥的博客
08-10 297
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。本文将详细探讨 Vue.js 的标准开发方式，以及如何有效地使用组件、插槽等核心功能。
Unity数据持久化 之 Json序列化与反序列化
2301_77947509的博客
08-09 434
Json的序列化与反序列化
Vue3中的history模式路由：打造无缝导航体验！
Jacklx888的博客
08-10 256
Hey小伙伴们，今天给大家带来Vue3中使用history模式路由的实战案例！🌟 Vue3的路由功能非常强大，可以帮助我们轻松实现单页面应用中的页面切换。但是你知道吗？默认情况下Vue Router使用的是hash模式，URL会带上一个“#”。为了获得更加美观的URL，我们可以使用history模式。今天我们就来一起看看如何在Vue3中使用history模式吧！🚀
i5ting_toc工具优化
麦麦麦先森的小世界
08-07 572
markdown转换支持带左侧导航的html
第15节课：表单高级功能——提升用户填写体验与数据交互
学问小小谢的技术博客
08-07 686
在现代Web应用中，表单是用户与服务器交互的重要方式。HTML5引入了一系列高级表单属性和数据绑定技术，极大地提升了用户的填写体验和表单数据的处理效率。本节课将深入探讨`autocomplete`、`autofocus`、`placeholder`等表单属性，以及表单数据的动态绑定和更新技术。
[Vue3] - 5 watch与watchEffect用法
weixin_45291798的博客
08-09 684
一全部属性firstName:'张',lastName:'三',job:{name:'前端工程师'}});接收的参数newValue与oldValue，person下的job对象改变，watch也能监视到，在vue2中只有开启了deep深度监视才会生效1 无法获取正确的oldValue2 deep设置无效，强制开启深度监视watch监听的是RefImpl或Proxy结构watchEffect监听回调中用到额度属性。
Java网络编程——HTTP协议原理
oageux的博客
08-07 685
Java网络编程——HTTP协议原理
colResizable插件实现网页中表格列宽自定义
每天学习一点点
08-09 210
解决方法：使用jQuery的一个插件，名称叫 colResizable，可以实现。需求：页面上每个字段的列宽，可以通过页面拖动的形式进行调整。该插件依赖jQuery，所以需要在使用前引用jQuery。.Table指表格中table的class名称。
JavaScript中的Truthy & Falsy值以及等号判断
悦涵仙子的技术笔记本
08-10 142
obj.b==null相当于obj.b === null || obj.b ===undefined的简写。
页面绘制的来龙去脉
编程语言技巧经验分享
08-10 418
1）如果是单重缓冲，页面可能会有这种情况：A 数据需要显示，然后是 B 数据显示，B 数据显示需要耗费一定时间，但是这个时间里，C 数据也请求了展示，我们可能会看到，在展示 C 数据的时候，还有 B 数据的残影。
Vue - v-wave 波浪动画组件
miaomiaowins的博客
08-07 1023
这个动画库可以在标签中添加新的v-wave属性，来让点击标签元素后添加漂亮的波纹效果，并且可以根据父元素自动形成波纹的颜色，也可以自定义波纹颜色，持续时间，透明度，触发的对象等。
Vue3: ref 拿到 DOM / 组件实例
weixin_52268321的博客
08-08 197
【代码】Vue3: ref 拿到 DOM / 组件实例。
jquery实现简易计算器
06-27
jQuery实现简易计算器是一个常见的前端开发练习，通常使用JavaScript和jQuery库来增强用户界面的交互性。以下是一个简单的步骤来创建一个基本的加减乘除计算器： 1. 引入jQuery：首先在HTML文件中引入jQuery库，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值