html+css+js的ios计算器实现2

最新推荐文章于 2022-06-29 17:32:50 发布
最新推荐文章于 2022-06-29 17:32:50 发布
阅读量1.2k 收藏 4
点赞数
文章标签： css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lutrra/article/details/120911797
版权

在这里插入图片描述

<!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>
        *{
            margin: 0px;
            padding: 0px;
            font-size: 30px;
            color: #fff;
        }
        .entry{
            margin: auto;
            width: 400px;
            height: 690px;
            background-color: #000;
        }
        #result{
            height: 200px;
            width: 400px;
            box-sizing: border-box;
            padding-left: 0;
            padding-bottom: 1px;
            padding-left: 0px;
            padding-right: 15px;
            text-align: right;
            line-height: 10%;
            color: #fff;
            font-size: 50px;
            border: none;
            background-color: black;
        }
        #result::-webkit-input-placeholder{
            color: #fff;
        }
        .button_body{
            padding-left: 10px;
            padding-right: 10px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
        }
        .button{
            width: 80px;
            height: 80px;
            line-height: 80px;
            background-color: #a5a5a5;
            border-radius: 50%;
            text-align: center;
            margin-top: 10px;  
        }
        .button_de{
            width: 160px;
            height: 80px;
            line-height: 80px;
            background-color: #a5a5a5;
            margin-top: 10px;  
            border-top-left-radius: 80px;
            border-bottom-left-radius: 80px;
            border-top-right-radius: 80px;
            border-bottom-right-radius: 80px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <!-- &times;&divide -->
    <div class="entry">
        <input type="text" id="result" placeholder="0">
        <div class="button_body">
        <div class="button" onclick="clearAll()">AC</div>
        <div class="button" onclick="change()">+/-</div>
        <div class="button" onclick="percentage()">%</div>
        <div id="divide" class="button" onclick="divide('/')" style="background-color: #f1a33b;">&divide;</div>
        <div class="button" onclick="numberClick(7)">7</div>
        <div class="button" onclick="numberClick(8)">8</div>
        <div class="button" onclick="numberClick(9)">9</div>
        <div id="mul" class="button" onclick="mul('*')" style="background-color: #f1a33b;">&times;</div>
        <div class="button" onclick="numberClick(4)">4</div>
        <div class="button" onclick="numberClick(5)">5</div>
        <div class="button" onclick="numberClick(6)">6</div>
        <div id="sub" class="button" onclick="sub('-')" style="background-color: #f1a33b;">-</div>
        <div class="button" onclick="numberClick(1)">1</div>
        <div class="button" onclick="numberClick(2)">2</div>
        <div class="button" onclick="numberClick(3)">3</div>
        <div id="add" class="button" onclick="add('+')" style="background-color: #f1a33b;">+</div>
        <div class="button_de" onclick="numberClick(0)">0</div>
        <div class="button">.</div>
        <div class="button" onclick="equal()" style="background-color: #f1a33b;">=</div>
        </div>
    </div>
    <script>
        var signs='';
        var number1='';
        var number2='';
        var sum=0;
        var result=document.getElementById("result");
        var sub_button=document.getElementById("sub");
        var add_button=document.getElementById('add');
        var mul_button=document.getElementById('mul');
        var divide_button=document.getElementById('divide');
        count=0;
       //点击数字
       function numberClick(number){
           if(signs==''){
               number1=number1+number;
               result.value=number1;
               console.log('number1'+':'+number1);
               console.log('signs'+signs);
           }else{
                 result.value='';
                 number2=number2+number;
                 result.value=parseFloat(number2);
                 console.log('number2'+':'+number2); 
                 console.log('signs'+signs);
           }
       }
       //AC
       function clearAll(){
           signs='';
           number1='';
           result.value=0;
           count=0;
       }
       //+/-
       function change(){
           sum=result.value;
           sum=sum*-1;
           console.log(sum);
           result.value=sum;
       }
       //%
       function percentage(){
           number1=result.value/100;
           result.value=number1;
           number1='';
       }
       // 除以
       function divide(sign){
           signs=sign;
       }
       //乘以
       function mul(sign){
           signs=sign;
       }
       //加
       function add(sign){
           signs=sign;
       }

       function sub(sign){
           signs=sign;
       }
       //divide
       divide_button.onmousedown=function(){
        if(signs=='/'){
            if(number1!=''&&number2!=''){
                sum=parseFloat(number1)/parseFloat(number2);
                number1='';
            }
            if(number1==''&&number2!=''){
                sum=sum/parseFloat(number2);
            }
            if(number2==''){
                prompt('被除数不为0')
            }
        }
        if(signs=='-'){
            if(number1!=''){
                sum=parseFloat(number1)-parseFloat(number2);
                number1='';
            }else{
                sum=sum-parseFloat(number2);
            }
        }
        if(signs=='+'){
                if(number1!=''){
                    sum=parseFloat(number1)+parseFloat(number2);
                    number1='';
                }else{
                    sum=sum+parseFloat(number2);
                }
           }
           if(signs=='*'){
                if(number1!=''){
                sum=parseFloat(number1)*parseFloat(number2);
                number1='';
                }else{
                sum=sum*parseFloat(number2);
                }
           }
           divide_button.style.backgroundColor="#a5a5a5";
       }
       divide_button.onmouseup=function(){
        if(number2!=''){
               result.value=sum;
               number2='';
            }
            signs='';
            console.log('signs'+signs+'onmouseup:sum:'+sum);
            divide_button.style.backgroundColor="#f1a33b";
       }
       //mul
       mul_button.onmousedown=function(){
        if(signs=='-'){
            if(number1!=''){
                sum=parseFloat(number1)-parseFloat(number2);
                number1='';
            }else{
                sum=sum-parseFloat(number2);
            }
        }
        if(signs=='+'){
                if(number1!=''){
                    sum=parseFloat(number1)+parseFloat(number2);
                    number1='';
                }else{
                    sum=sum+parseFloat(number2);
                }
           }
           if(signs=='*'){
                if(number1!=''){
                sum=parseFloat(number1)*parseFloat(number2);
                number1='';
                }else{
                sum=sum*parseFloat(number2);
                }
           }
           console.log('add_button:onmousedown:sum:'+sum);
           mul_button.style.backgroundColor="#a5a5a5";
       }
       mul_button.onmouseup=function(){
            if(number2!=''){
               result.value=sum;
               number2='';
            }
            signs='*';
            console.log('signs'+signs+'onmouseup:sum:'+sum);
            mul_button.style.backgroundColor="#f1a33b";
       }
       //add
       add_button.onmousedown=function(){
        if(signs=='-'){
            if(number1!=''){
                sum=parseFloat(number1)-parseFloat(number2);
                number1='';
            }else{
                sum=sum-parseFloat(number2);
            }
        }
        if(signs=='+'){
            if(number1!=''){
                sum=parseFloat(number1)+parseFloat(number2);
                number1='';
            }else{
                sum=sum+parseFloat(number2);
            }
        }
        if(signs=='*'){
                if(number1!=''){
                sum=parseFloat(number1)*parseFloat(number2);
                number1='';
                }else{
                sum=sum*parseFloat(number2);
                }
           }
        console.log('add_button:onmousedown:sum:'+sum);
        add_button.style.backgroundColor="#a5a5a5";
        }
        add_button.onmouseup=function(){
            if(number2!=''){
               result.value=sum;
               number2='';
           }
            signs='+';
            console.log('signs'+signs+'onmouseup:sum:'+sum);
            add_button.style.backgroundColor="#f1a33b";
       }
       //减
       sub_button.onmousedown=function(){
           if(signs=='-'){
                if(number1!=''){
                    sum=parseFloat(number1)-parseFloat(number2);
                    number1='';
                }else{
                    sum=sum-parseFloat(number2);
                }
           }
           if(signs=='+'){
                if(number1!=''){
                    sum=parseFloat(number1)+parseFloat(number2);
                    number1='';
                }else{
                    sum=sum+parseFloat(number2);
                }
           }
           if(signs=='*'){
                if(number1!=''){
                sum=parseFloat(number1)*parseFloat(number2);
                number1='';
                }else{
                sum=sum*parseFloat(number2);
                }
           }
           console.log('onmousedown:sum:'+sum);
           sub_button.style.backgroundColor="#a5a5a5";
       }
       sub_button.onmouseup=function(){
           if(number2!=''){
               result.value=sum;
               number2='';
           }
           signs='-';
           console.log('onmouseup:sum:'+sum);
           sub_button.style.backgroundColor="#f1a33b";
       }
       //等于
       function equal(){
           if(signs=='/'){
                if(number2=='0'){
                    alert('number不为0');
                }else{
                    if(number1==''){
                        sum=sum/parseFloat(number2);
                    }else{
                        sum=parseFloat(number1)/parseFloat(number2);
                        }
                }
               result.value=sum;
               signs='';
               number1='';
               number2='';
           }
           if(signs=='*'){
               if(number1==''){
                sum=sum*parseFloat(number2);
               }else{
                sum=parseFloat(number1)*parseFloat(number2);
               }
               result.value=sum;
               signs='';
               number1='';
               number2='';
           }
           if(signs=='+'){
               if(number1==''){
                sum=sum+parseFloat(number2);
                result.value=sum;
                signs='';
                number1='';
                number2='';
               }else{
                sum=parseFloat(number1)+parseFloat(number2);
                result.value=sum;
                signs='';
                number1='';
                number2='';
               }
           }
           if(signs=='-'){
               if(number1==''){
                sum=sum-parseFloat(number2);
                result.value=sum;
                signs='';
                number1='';
                number2='';
               }else{
                sum=parseFloat(number1)-parseFloat(number2);
                result.value=sum;
                signs='';
                number1='';
                number2='';
               }
            }
            count=0;
            console.log('count:'+count);
       }
    </script>
</body>
</html>
Lutrra
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js html5仿apple苹果计算器样式代码
09-08
js html5仿apple苹果计算器样式代码
HTML+CSS+JS实现 ❤️基于Javascript简单计算器特效❤️
java李阳勇的博客
09-10 1288
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： CSS样式： body { display: flex; justify-content: center; align-items: center; min-
HTML、CSS与JS实现简易iPhone计算器
BIG BOSS的博客
08-02 1644
效果如图 源码，通俗易懂 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #bg{ width: 246px; height: 400px; background:...
用JavaScript写iPhone计算器
GeekLazy 极懒
11-19 980
用JS写一计算器作为练习，基本实现iPhone计算器的功能和逻辑，分享一下设计过程： 1. 设计核心界面 2. 静态动态效果 3. 完成运算逻辑 完成后计算机能实现： 完成加减乘除取余等基本运算 直接输入“=”对运算结果重复上一步运算操作 被除数为“0”弹出警告窗口 …… 1. 设计核心界面参考iPhone，先把最初的结构搭好：我用了table来排版，便于调整：<table bgcolor="bl
web网页版苹果计算器（HTML、CSS、JavaScript实现）
王春燕的博客
06-29 2047
注意事项 1、html结构上，分为三个部分：显示区、按钮区、底部白条 2、css样式上 需要解决外边距重叠的问题，可用overflow: hidden; 点击高亮效果，可用 filter: brightness(160%) 3、js 绑定点击事件的时候，用事件委托，提高整体性能，如果点击的不是按钮，则return（具体看代码） 用switch···case···处理功能按钮处理方法 flag表示输入是否输入首次输入 转化位百分比的按钮因为需要涉及到小数,所以要用parseFloat方法来将...
CSS3实现ios7计算器 CSS3实现ios7计算器网页特效.zip
11-17
在本项目中，“CSS3实现ios7计算器”是一个利用现代Web技术，特别是CSS3，来构建的模拟iOS7风格计算器的实例。这个项目主要涉及前端开发中的几个关键技术和概念，包括CSS、JavaScript、jQuery以及HTML5。下面将详细...
iOSCalculator:The iOS calculator created by JavaScript. (JavaScript 实现 iOS 下的计算器)
05-31
本项目旨在实现浏览器上的iOS计算器。 这个项目可以分为 3 个部分： HTML 、 CSS和JavaScript 。 下面我将详细介绍这三个部分。 HTML 首先，我们需要创建一个 HTML 文件来定义 iOS 计算器的布局。 它只有一个...
js-calculator:用JavaScript制作的iOS主题计算器
05-18
JavaScript计算器是一种基于Web的模拟应用，它利用JavaScript编程语言实现了一个功能齐全的计算器，具有与iOS设备上的计算器类似的用户界面和功能。这个项目名为"js-calculator"，它旨在为用户提供一个在浏览器环境...
Calculate:使用HTML，CSS和Vanilla JS编写的IOS 7计算器的副本
03-31
这个项目利用了三种主要的Web开发技术：HTML（超文本标记语言）用于构建页面结构，CSS（层叠样式表）用于设计和美化界面，以及Vanilla JS（原生JavaScript）来实现计算器的逻辑功能。 **HTML（超文本标记语言）** ...
微信小程序实现iOS计算器weapp-calculator-master.zip
09-25
"微信小程序实现iOS计算器weapp-calculator-master.zip" 是一个包含源代码的压缩包，用于教授如何使用微信小程序开发一个类似于iOS系统自带的计算器应用。 这个项目的核心知识点包括： 1. **微信小程序基础结构**...
js虚拟计算器
Demo_csdn
10-15 535
今天分享一个计算器的代码实现效果 可以实现加，减，乘，除的简单运算 也是用js写的，喜欢的可以拿去玩玩， 有什么写得不好的，下面评论，我也好修改 这是HTML的效果图： 下面是一些代码的展示 这是HTML的代码 <h1>简易计算器</h1> <div id="display" style="height: 80px;width: 400px;backgrou...
javascript高级程序设计——笔记
junlin_tu的博客
09-19 1669
javascript高级程序设计——笔记基本概念 基本数据类型包括Undefined/Null/Boolean/Number和String 无须指定函数的返回值，实际上，未指定返回值的函数返回的是一个特殊的undefined值 变量、作用域和内存问题 基本类型值在内存中占据固定大小的空间，因此保存在栈内存中 引用类型的值是对象，保存在堆内存中 确定一个值是哪种基本类型用typeof，确定一个值是哪种
JavaScript -- 进阶篇
SunMoonJP的博客
02-27 1278
一、JS基础语法 1.1：什么是变量？什么是变量？从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，盒子用来存放物品，物品可以是衣服、玩具、水果…等。 1.2：给变量取个名字（变量名）我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字(也就是变量的名字)。我么赶快给变量取个好听的名字吧！变量名可以任意取，只不
C++ FAQ学习笔记 13 章 运算符重载
黄老板的专栏
08-28 706
[13.3] 有什么运算符重载的实例？ [Recently changed so it uses the std:: syntax (on 7/00). Click here to go to the next FAQ in the "chain" of recent changes.] 这里有一些运算符重载的实例： myString + yourString 可以连
【1+X Web】1+X高级试题（5）
热门推荐
`雾博客
12-07 3万+
shadowOffsetX = float 阴影向右偏移量。shadowOffsetY = float 阴影向下偏移量。shadowBlur = float 阴影模糊效果。shadowColor = color 阴影颜色。【canvas属性】
HTML 简易计算器（界面类似手机上的计算器），能实现简单的加减乘除运算和退格清除功能（不看小心后悔！）
qq_53400553的博客
06-11 1617
拿走请三连，并注明出处 新手上路，看到的大佬请多指教！ 代码介绍：能实现简单的加减乘除运算和清除退格功能，界面友好，类似手机上的计算器界面 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>简易计算器</title> <styletype="text/css"> ...
javascript实现计算器效果
weixin_44637515的博客
10-25 254
HTML代码 <body> <table> <tr><td colspan="4"><div style="height: 20px;background-color: beige" id="display"></div></td></tr> <tr&gt...
【无标题】
weixin_46471694的博客
12-07 112
html和css代码是我自己补充的，不知道对不对，求大佬帮帮我 这个链接是全部文件和代码 https://download.csdn.net/download/weixin_46471694/57801937 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>calculator</title> <link rel="styleshee
【web】模仿苹果计算器「html」「css」「javascript」
Khalil三省的博客妙妙屋
06-01 4213
上web前端的课,老师布置了一个使用**html,css,javascript**来完成一个**计算器**的作业 作为一个资深的果粉,当然是选择做一个**苹果计算器**啦! **话不多说 ,先先贴一张成品图** 是不是和苹果自带的计算器不能说完全一样,可以说一模一样()嘿嘿...
HTML+CSS+JS制作一个科学计算器
最新发布
07-14
以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript制作一个科学计算器： HTML部分： ```html <!DOCTYPE html> <html> 科学计算器 <link rel="stylesheet" type="text/css" href="style.css"> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值