计算器页面

已于 2023-05-08 14:29:01 修改
阅读量203 收藏
点赞数
文章标签： java
于 2022-05-04 22:41:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45151366/article/details/124579378
版权

HTML CSS JavaScript 计算器 前端开发
关键词由CSDN通过智能技术生成

<!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>

     #d{

         width: 600px;

         height:700px;

         border: 5px gray solid;

         position:absolute;

          top:50%;

          left:50%;

         transform: translate(-50%,-50%);

         background-image: url(image/1.jpg);

         background-size: cover;

         background-origin: padding-box;

     }

     #d1{

         width: 580px;

         height: 120px;

         border: 5px green solid;

         margin: 5px;

     }

     #input{

            width: 500px;

            height: 100px;

            background-color: rgb(255, 203, 229);

            border-radius: 25px;

           

        }

     #d2,#d3,#d4,#d5{

         width: 130px;

         height: 120px;

         margin: 5px;

         float: left;

         border: 5px gray solid;

     }

     button{

            width: 120px;

            height: 110px;

            background-image: url(image/3.jpg);

         

          margin: 5px;

            font-size: 40px;

            font-family: "华文琥珀";

            text-align: center;

        }

        #AC{

            float: left;

        }

   

   #output{

       float: right;

       height: 110px;

       width: 430px;

      background-image: url(image/2.jpg);

   

     

       border-radius: 1px 20% cyan;

   }

    </style>

</head>

<body>

    <div id="d">

    <div id="d1">

        <button id="ac" οnclick="AC()">AC</button>

        <input  type="text" id="output" value="" >

    </div>

    <div >

        <div id="d2"><button οnclick="num7();">7</button></div>

        <div id="d2"><button οnclick="num8();">8</button></div>

       <div id="d2"><button οnclick="num9();">9</button></div>

        <div id="d2"><button οnclick="sum();">+</button></div>

    </div>

    <div >

        <div id="d3"><button οnclick="num4();">4</button></div>

        <div id="d3"><button οnclick="num5();">5</button></div>

        <div id="d3"><button οnclick="num6();">6</button></div>

        <div id="d3"><button οnclick="sub();">-</button></div>

    </div>

    <div >

        <div id="d4"><button οnclick="num1();">1</button></div>

       <div id="d4"><button οnclick="num2();">2</button></div>

       <div id="d4"><button οnclick="num3();">3</button></div>

       <div id="d4"><button οnclick="muti();">*</button></div>

    </div>

    <div >

        <div id="d5"><button οnclick="num0();">0</button></div>

        <div id="d5"><button οnclick="doc();">.</button></div>

        <div id="d5"><button οnclick="equal();">=</button></div>

        <div id="d5"><button οnclick="divide();">/</button></div>

     </div>

   

    </div>

    <script>

   

function divide(num1,num2){

    if(num2==0){

        alert("输入错误,0不能做除数!");

    }

    return num1/num2;

}     function num0(){

            setout(getout()+"0");

        }

        function num1(){

            setout(getout()+"1");

        }

        function num2(){

            setout(getout()+"2");

        }

        function num3(){

            setout(getout()+"3");

        }

        function num4(){

            setout(getout()+"4");

        }

        function num5(){

            setout(getout()+"5");

        }

        function num6(){

            setout(getout()+"6");

        }

        function num7(){

            setout(getout()+"7");

        }

        function num8(){

            setout(getout()+"8");

        }

        function num9(){

            setout(getout()+"9");

        }

        function doc(){

            setout(getout()+".");

        }

        function sum(){

            setout(getout()+"+");

        }

        function sub(){

            setout(getout()+"-");

        }

        function muti(){

            setout(getout()+"*");

        }

        function divide(){

            setout(getout()+"/");

        }

        function equal(){//  识别  运算符  将元素字符 变成 真正的运算符  并计算出结果 eval();

            setout(eval(getout()));

        }

        function AC(){

            setout("0");

        }

    function getout(){

        return document.getElementById("output").value; //获取值

    }

    function setout(str){

        document.getElementById("output").value = str;  //写入表单

    }

    </script>

</body>

</html>

L̶
关注
行列式计算器（计算四阶以内的行列式）
05-21
本软件可以方便的计算四阶以内的行列式(包括上三角式),并可以生成计算过程,减轻行列式计算烦琐的问题。
手机房贷计算器页面模板.zip
03-13
【标题】"手机房贷计算器页面模板.zip"是一个包含手机应用房贷计算器页面设计和代码的压缩文件，主要用于开发或设计移动设备上的房贷计算功能。房贷计算器是帮助用户计算贷款月供、总利息和贷款总额的工具，它依据...
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2113
<!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>Do
JS验证码
03-16 113
<PREclass=jsname="code"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3....
JS实现验证码
热门推荐
Judev的专栏
07-14 1万+
最近做了一个注册界面，需要有验证码。我以前没有做过，第一个想法就知道要用到js来处理，后来想了一下，就在js里这样写到：第一种想法： function validate(){/*    var str="";    var code = form1.CODE.value; var spans = document.getElementById("divCode").all; for(v
Vue tab选项卡
小羽向前跑
02-07 2045
最终效果： 功能： 点击标题显示对应内容   tab.vue所有代码： &lt;template&gt; &lt;div&gt; &lt;div id="tab"&gt; &lt;div class="tab-tit"&gt; &lt;!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId
html静态前端计算器页面
08-17
【HTML静态前端计算器页面】是一种基于HTML、CSS（SCC可能是笔误，应为CSS）构建的简单网页应用，主要用于实现基本的算术运算。在这个项目中，开发者使用纯前端技术来模拟一个功能完备的计算器界面，用户可以直接在...
编写一个web的计算器页面
10-11
在本文中，我们将深入探讨如何使用JavaServer Pages（JSP）技术来编写一个Web计算器页面，实现基本的加、减、乘、除功能。JSP是Java平台上的动态网页开发技术，它允许开发者将HTML代码与Java代码混合，以便在服务器...
MIT App Inventor 计算器 两个计算器页面可进行切换，分别实现混合计算与普通计算.zip
06-17
4. **逻辑控制**：为了实现页面切换，应用需要有一个导航系统，比如Button或ImageButton组件，当点击时会切换到另一个计算器页面。此外，应用还需要处理用户输入的计算表达式，确保正确执行计算。 5. **计算逻辑**...
块级元素在块级别元素中居中
heartAndthink的博客
08-31 969
引言: 通常情况下块级元素重置居中有两种方式 1.利用margin值 2.利用定位和负边距 但是一次我遇到这种情况(子块级元素高度是自适应的，高度值不确定)，以上方法就不好使了，改怎么解决呢 答案是:父元素属性设置为    display：table-cell  ,  vertical-align:middle; display: 
js验证码
dgdisme
08-08 916
非常实用的js验证码,留著,日後由
JS-验证码
weixin_43091563的博客
12-14 158
<html> <head lang="en"> <meta charset="UTF-8"> <title>验证码</title> <style> input,span,i{ border: dashed 1px red; height: ...
js中的验证码
InvisibleMouse的博客
03-25 555
前言 之前也写过一些不同方式的验证码，但是没有保存，之后也不知所踪了。于是就想写一篇关于验证码的文章，到最后用到的时候复制黏贴就OK了（嘿嘿，就是偷懒）。 之前写的验证码是配合着java后端与ajax来实现的；但是这次上网先查了一下有关验证码的文章，貌似直接在前端就可以完成验证码的实现验证功能。so，这次就尝试着纯前端的验证码。 在开始之前先向大家推荐一个有关jQuery的网站:jquery库（...
Vue 选项卡
你好！刘斩仙
07-19 1120
方式一 单独组件，切换的是不同的组件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,mini
vue 选项卡
qq_38210427的博客
04-25 554
初学者来说，这样的页面也是练手的好题目。下面一组代码，就能够实现基础的选项卡功能。在一个页面中实现多内容的切换。在实际的应用中也是比较常见的。选项卡是前端常见的一种形式。
计算器vue计算器页面
最新发布
09-15
Vue.js计算器页面通常是一个交互式的前端应用，它利用Vue.js的组件化特性来构建。设计这样的页面，首先会创建一个基础的HTML结构，然后利用Vue实例管理状态、事件监听以及计算功能。以下是简单的步骤： 1. HTML布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值