JS + HTML实现计算器

最新推荐文章于 2024-07-22 08:55:10 发布
最新推荐文章于 2024-07-22 08:55:10 发布
阅读量292 收藏 3
点赞数
文章标签： js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41679133/article/details/107563060
版权

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .calculator {
            width: 700px;
            height: 700px;
            margin: 30px auto;
            border: 1px solid grey;
        }
        .screen {
            width: 100%;
            height: 200px;
        }
        .keyboard {
            width: 100%;
            height: 500px;
            /* background: olivedrab; */
        }
        .keyboard ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
        }
        .keyboard ul li{
            text-align: center;
            line-height: 90px;
            font-size: 25px;
            box-sizing: border-box;
            flex: 0 1 auto;
            width: 25%;
            height: 20%;
            border-right: 1px solid grey;
            border-bottom:1px solid grey;
            
        }
        .keyboard ul li:hover{
            background: #ddd;
        }
        .keyboard ul li.topBor {
            border-top: 1px solid grey;
        }
        .keyboard ul li.rightBor {
            border-right: 0;

        }
        .keyboard ul li.rightBor:hover {
            background: skyblue;

        }
        .keyboard li.noNum {
            background: rgb(240, 238, 238);
        }
        .calculator .screen-calc {
            width: 100%;
            height: 100px;
            color: rgb(31, 29, 29);
        }
        .calculator .screen-input {
            width: 100%;
            height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="screen">
            <div class="screen-calc"></div>
            <div class="screen-input"></div>
        </div>
        <div class="keyboard">
            <ul>
                <li class="topBor noNum">CE</li>
                <li class="topBor noNum">C</li>
                <li class="topBor noNum"><-</li>
                <li class="topBor rightBor noNum">÷</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li class="rightBor noNum">*</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li class="rightBor noNum">-</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li class="rightBor noNum">+</li>
                <li class="noNum">±</li>
                <li>0</li>
                <li class="noNum">.</li>
                <li class="rightBor noNum">=</li>
            </ul>            
        </div>
    </div>
    <script>
        //键盘对象
        (function(){
            function KeyBoard(list,screenInput,screenCalc){
                this.list = list;
                this.screenInput = screenInput;
                this.value = 0;
                this.screenCalc = screenCalc;
            }
            KeyBoard.prototype.init = function(){
                this.bindEvent();
            }
            KeyBoard.prototype.bindEvent = function(){
                this.list[4].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    console.log(this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1]);
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷' )&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '7';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '7';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    console.log(this.value)
                    }
                }.bind(this);
                this.list[5].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '8';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '8';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[6].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '9';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '9';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[8].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '4';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '4';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[9].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '5';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '5';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[10].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '6';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '6';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[12].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '1';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '1';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[13].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '2';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '2';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[14].onclick = function(){
                    if(this.screenInput.innerHTML == '0'){
                        this.screenInput.innerHTML = '';
                    }
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '3';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '3';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[17].onclick = function(){
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenInput.innerHTML == ''){
                        this.screenInput.innerHTML = '0';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '0';
                    this.value = parseFloat(this.screenInput.innerHTML);
                    }
                }.bind(this);
                this.list[18].onclick = function(){
                    console.log(this.screenInput.innerHTML.match(/\./g));  //或者indexOf('.')返回-1
                    if(this.screenInput.innerHTML.match(/\./g) !== null){
                        return;
                    }
                    if((this.screenCalc.innerHTML == '' && this.screenInput.innerHTML == '') || ((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenCalc.innerHTML != ''&&this.screenInput.innerHTML=='')){
                        this.screenInput.innerHTML = '0' + '.';
                    }else{
                    this.screenInput.innerHTML = this.screenInput.innerHTML + '.';
                    }
                }.bind(this);
                this.list[3].onclick = function(){
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenCalc.innerHTML!=''&&this.screenInput.innerHTML==''){
                        this.screenCalc.innerHTML = this.screenCalc.innerHTML.slice(0,this.screenCalc.innerHTML.length-1) + '÷';
                        return;
                    }
                    if(this.screenCalc.innerHTML == '' && this.screenInput.innerHTML == ''){
                        this.screenCalc.innerHTML='0÷';
                        return;
                    }
                    if(this.screenCalc.innerHTML == ''){
                    this.screenCalc.innerHTML = this.screenInput.innerHTML + '÷';
                    this.screenInput.innerHTML = '';
                    }
                    else{
                        this.screenCalc.innerHTML=this.screenCalc.innerHTML+ this.screenInput.innerHTML + '÷';
                        this.screenInput.innerHTML = '';
                    }
                    // console.log(this.screenCalc.innerHTML)
                }.bind(this);
                this.list[7].onclick = function(){
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenCalc.innerHTML!=''&&this.screenInput.innerHTML==''){
                        this.screenCalc.innerHTML = this.screenCalc.innerHTML.slice(0,this.screenCalc.innerHTML.length-1) + '*';
                        return;
                    }
                    if(this.screenCalc.innerHTML == '' && this.screenInput.innerHTML == ''){
                        this.screenCalc.innerHTML='0*';
                        return;
                    }
                    if(this.screenCalc.innerHTML == ''){
                    this.screenCalc.innerHTML = this.screenInput.innerHTML + '*';
                    this.screenInput.innerHTML = '';
                    }
                    else{
                        this.screenCalc.innerHTML=this.screenCalc.innerHTML+ this.screenInput.innerHTML + '*';
                        this.screenInput.innerHTML = '';
                    }
                    // console.log(this.screenCalc.innerHTML)
                }.bind(this);
                this.list[11].onclick = function(){
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenCalc.innerHTML!=''&&this.screenInput.innerHTML==''){
                        this.screenCalc.innerHTML = this.screenCalc.innerHTML.slice(0,this.screenCalc.innerHTML.length-1) + '-';
                        return;
                    }
                    if(this.screenCalc.innerHTML == '' && this.screenInput.innerHTML == ''){
                        this.screenCalc.innerHTML='0-';
                        return;
                    }
                    if(this.screenCalc.innerHTML == ''){
                    this.screenCalc.innerHTML = this.screenInput.innerHTML + '-';
                    this.screenInput.innerHTML = '';
                    }
                    else{
                        this.screenCalc.innerHTML=this.screenCalc.innerHTML+ this.screenInput.innerHTML + '-';
                        this.screenInput.innerHTML = '';
                    }
                    // console.log(this.screenCalc.innerHTML)
                }.bind(this);
                this.list[15].onclick = function(){
                    if((this.screenCalc.innerHTML[this.screenCalc.innerHTML.length-1] == '+'||'-'||'*'||'÷')&&this.screenCalc.innerHTML != ''&&this.screenInput.innerHTML==''){
                        this.screenCalc.innerHTML = this.screenCalc.innerHTML.slice(0,this.screenCalc.innerHTML.length-1) + '+';
                        return;
                    }
                    if(this.screenCalc.innerHTML == '' && this.screenInput.innerHTML == ''){
                        this.screenCalc.innerHTML='0+';
                        return;
                    }
                    if(this.screenCalc.innerHTML == ''){
                    this.screenCalc.innerHTML = this.screenInput.innerHTML + '+';
                    this.screenInput.innerHTML = '';
                    }
                    else{
                        this.screenCalc.innerHTML=this.screenCalc.innerHTML+ this.screenInput.innerHTML + '+';
                        this.screenInput.innerHTML = '';
                    }
                    // console.log(this.screenCalc.innerHTML)
                }.bind(this);
                this.list[19].onclick = function(){
                    this.screenCalc.innerHTML=this.screenCalc.innerHTML+ this.screenInput.innerHTML;
                    this.screenInput.innerHTML = eval((this.screenCalc.innerHTML.replace('÷','/')).replace(/--/g,'+'));
                    this.screenCalc.innerHTML = '';
                }.bind(this);
                this.list[1].onclick = function(){
                    this.screenInput.innerHTML = '';
                    this.screenCalc.innerHTML = '';
                }.bind(this);
                this.list[0].onclick = function(){
                    this.screenInput.innerHTML = '';
                }.bind(this);
                this.list[2].onclick = function(){
                    this.screenInput.innerHTML = this.screenInput.innerHTML.slice(0,this.screenInput.innerHTML.length-1);  //slice含头不含尾
                }.bind(this);
                this.list[16].onclick = function(){
                    if(this.screenInput.innerHTML != ''){
                    this.screenInput.innerHTML = '-' + this.screenInput.innerHTML;
                    }
                }.bind(this);

            }


            window.KeyBoard = KeyBoard;
        })();
        var key = new KeyBoard(document.getElementsByTagName('li'),document.getElementsByClassName('screen-input')[0],
        document.getElementsByClassName('screen-calc')[0]);
        key.init();
        (function(){
            
        })();
        
    </script>
</body>
</html>

演示

在这里插入图片描述

出发的星辰
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用 JavaScript 和 HTML 制作一个计算器
pydby01的博客
12-17 4226
引言 这是一篇很棒的文章，在这里你可以学习如何从零做出一款计算器。我们希望你使用 JavaScript 开发并且思考怎么构建一款计算器, 如何编写代码，以及最后，如何整理自己的代码。 在这篇文章结束，你会得到一款和 iPhone 计算器功能一样的计算器（除了 +/- 和百分比功能外）。 前置条件 在你开始本节课程前，请确保你对 JavaScript 有一个不错的了解。最起码，你需要知道以下事情： If/else 分支 For 循环 JavaScript 函数 箭头函数 &am...
JS实现计算器
m0_46647730的博客
07-01 154
计算器
HTML实现计算器
m0_62727420的博客
07-03 1万+
HTML实现计算器
HTML+CSS+JS实现计算器
程序员老茶的博客
10-30 498
1. 创建HTML页面，包含数字和操作符的按钮以及一个输出框 2. 使用CSS样式美化页面 3. 使用JavaScript编写计算器的逻辑，通过绑定事件处理程序，实现对按钮的响应和输出结果到输出框
html实现计算器
zmk0820的博客
03-24 4565
html实现计算器
【HTML】简易计算器
Sunny的博客
03-05 5345
设计一个简易计算器，在“操作数”标签右侧的两个文本框中输入操作数，当单击“+，-，*，/”按钮时，对两个操作数进行运算并将结果填入到“结果”标签右侧的文本框中。
用JavaScript和HTML实现一个精美的计算器
黑夜开发者的博客
07-29 3035
计算器是我们日常生活中经常使用的工具之一，可以帮助我们进行简单的数学运算。在本博文中，我将使用JavaScript编写一个漂亮的计算器，并添加加减乘除功能。这个计算器将有一个精美的用户界面，包含9个数字按钮和加减乘除操作符。好了，本文的内容就分享到这里。希望你在使用这个精美计算器的过程中有所收获，它不仅能帮助你进行基本的数学运算，还能为你提供一个愉快的使用体验。如果你对编程感兴趣，也欢迎自行扩展功能，让这个计算器变得更加强大。
html + css + js 实现计算器
11-23
本项目“html + css + js 实现计算器”就是将这三者结合起来，创建一个功能完备的在线计算器。 首先，让我们详细了解一下HTML部分。HTML文档通常由一系列的元素构成，这些元素通过标签来定义。在这个计算器项目中，...
html+js实现简易计算器功能
04-22
简易计算器，利用html+js实现，通过浏览器客户端进行编译实现，弹出窗口，进行选择计算。
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
基于html+css+js实现简易计算器代码实例
10-15
最后，JavaScript（JavaScript Object Notation）负责实现计算器的功能。在`contain.js`中，我们可以编写事件监听器和计算逻辑。例如： ```javascript function get(value) { document.querySelector('#display')....
用HTML实现简易版计算器
热门推荐
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
HTML和JavaScript实现一个简单的计算器
qq_57142520的博客
08-14 1688
使用HTML和JavaScript实现一个简单的计算器。
快速使用HTML、CSS、JavaScript编写一个简单计算器
bjjgff的博客
01-28 2628
首先在根目录下创建一个名为 css的目录， 在css目录下创建 main.css样式文件。在index.html 文件的 head标签中，我们要引入css样式，编写以下标签。我们在项目目录当中创建一个 名为 index.html的文件，在文件中编写以下内容。首先创建一个名为 js的目录，在js目录下创建calculartor.js文件。因为HTML结构是比较单一化的，我们需要使用CSS样式对它进行美化。在index.html文件中的 body标签下，编写以下内容。三、编写JavaScript逻辑代码。
用html、css、js写一个简易加法计算器
weixin_68478645的博客
01-15 1347
第二步：用css添加样式（比如：背景颜色，按钮样式，位置，）第三步：用js实现点击按钮获取用户输入的值，并计算求和。第一步：用HTML完成布局。
前端案例：简易计算器（html+css+JavaScript）
qq_45831018的博客
09-19 4906
本文章介绍了使用HTML+CSS+JavaScript制作一个简易计算器。
HTML实现加减乘除的计算器+JavaScrip小知识点
全栈
04-15 6868
下面是一些小的知识点，可以看看，网页的计算机代码在下面，小伙伴们花点耐心， 1、form表单 form提交数据 提交方式有两种：action提交路径，mothod提交方式 提交方式有两种：get显示数据，post隐藏数据， input：属性 name起名字，id唯一，checked单选框选中，selected下拉框选中，select下拉框，option列表选项，textarea文本域，text文本框，password密码框，radio单选按钮，CheckBox多选框，submit提交...
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 278
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
html+js实现计算器
04-27
好的，以下是一个简单的HTML和JavaScript实现计算器的示例： ```html <!DOCTYPE html> <html> 计算器 <input type="text" id="input" disabled><br> ()">清空 ()">退格</button><br> ('7')">7 ('8')">8...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值