js写了一个计算器

最新推荐文章于 2023-11-05 20:49:23 发布
最新推荐文章于 2023-11-05 20:49:23 发布
阅读量612 收藏 3
点赞数 1
分类专栏： 大前端 文章标签： js计算器 js学习 js初学 计算器 计算器思维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoLong2345/article/details/52960169
版权

说明：

1：这个计算器可以进行进行连加、连减、连乘、连除、并且支持小键盘输入

2：这个计算器有一个问题没有解决，混合运算代

效果图如下：


代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 201px;
            margin: 100px auto;
            border: 1px solid black;
        }
        .top{
            width: 100%;
            height: 26px;
            background-color: #00bcd4;
            text-align: center;
            line-height: 22px;
        }
        .top input{
            width: 200px;
            height: 22px;
            border: none;
            outline: none;
            text-align: right;
        }
        .center{
            width: 100%;
            height:174px;
            background-color: #ccc;
            border-bottom: 1px solid black;
        }
        .center input{
            width: 70px;
            height: 30px;
            margin-right: -2px;
            margin-top: 5px;
        }
        .center .big{
            width: 91px;
            height: 30px;
            margin-left: 4px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top" id="text">
            <input type="text" id="text_t" value="">
        </div>
        <div class="center" id="center">
            <input type="button" value="CE" class="big" οnclick="clear1()">
            <input type="button" value="<-" class="big" οnclick="clear2()">
            <input type="button" value="背景色" class="big" οnclick="colour()">
            <input type="button" value="1" οnclick="count(1)">
            <input type="button" value="2" οnclick="count(2)">
            <input type="button" value="3" οnclick="count(3)">
            <input type="button" value="4" οnclick="count(4)">
            <input type="button" value="5" οnclick="count(5)">
            <input type="button" value="6" οnclick="count(6)">
            <input type="button" value="7" οnclick="count(7)">
            <input type="button" value="8" οnclick="count(8)">
            <input type="button" value="9" οnclick="count(9)">
            <input type="button" value="0" οnclick="count(0)">
            <input type="button" value="." οnclick="count('.')">
            <input type="button" value="=" οnclick="count('=')">
            <input type="button" value="+" οnclick="count('+')">
            <input type="button"value="-" οnclick="count('-')">
            <input type="button" value="*" οnclick="count('*')">
            <input type="button" value="/" οnclick="count('/')">
        </div>
    </div>
</body>
<script type="text/javascript">

    function colour1(){
        var color1=parseInt(Math.random()*15);
        switch (color1)
        {
            case 10:
                return "a";
                break;
            case 11:
                return "b";
                break;
            case 12:
                return "c";
                break;
            case 13:
                return "d";
                break;
            case 14:
                return "e";
                break;
            case 15:
                return "f";
                break;
            default:
                return color1;
                break;
        }
    }
    function colour(){
//        var color=[0];
//        for (var i=0;i<6;i++){
//            color[i]=colour1();
//        }
        document.getElementById("center").style.backgroundColor="#"+colour1()+""+colour1()+""+colour1()+""+colour1()+""+colour1()+""+colour1();

    }
    function counts(a){
        if(a!="=")
        document.getElementById("text_t").value=document.getElementById("text_t").value+a;
        var mess= document.getElementById("text_t").value;
        var res;
        if(a=="="){
            if(mess.split("+").length>1){
                res=parseFloat(mess.split("+")[0])+parseFloat(mess.split("+")[1]);
                alert(mess.split("+")[1]);
            }else if(mess.split("-").length>1){
                res=parseFloat(mess.split("-")[0])- parseFloat(mess.split("-")[1]);
            }else if(mess.split("*").length>1){
                res=parseFloat(mess.split("*")[0])* parseFloat(mess.split("*")[1]);
            }else if(mess.split("/").length>1){
//                mess.replace("/",'/');
//                res=parseFloat(parseFloat(mess.split("/")[0])/(parseFloat(mess.split("/")[0])));
                res=parseFloat(mess.split("/")[0])/ parseFloat(mess.split("/")[1]);
//                t=parseFloat(em.split("/")[0])/parseFloat(em.split("/")[1]);
            }else{
                res= "结果无法算出";
            }
            document.getElementById("text_t").value=res;
        }
    }
    function count(test){
//        var in=document.getElementsByName("input")[test]
//       var q= document.getElementsByClassName("btn");
//        alert(q);
//        for(var w=0;w< q.length;q++)
//        {
//        }
        if(test!="=")

        document.getElementById("text_t").value=document.getElementById("text_t").value+test;
        var em=document.getElementById("text_t").value;
        var t;

        if(test=="=") {
            if(em.split("*").length>1)
            {
                t=parseFloat(em.split("*")[0]);
                for(var i=1;i< em.split("*").length;i++)
                {
                    t=t*parseFloat(em.split("*")[i]);
                }
            }
            if(em.split("/").length>1)
            {

                if(parseFloat(em.split("/")[1]==0))
                {
                    t=parseFloat(em.split("*")[0]);
                    for(var i=1;i< em.split("*").length;i++)
                    {
                        t=t/parseFloat(em.split("*")[i]);
                    }
                }

                else
                    t=parseFloat(em.split("/")[0])/parseFloat(em.split("/")[1]);
            }
            if(em.split("+").length>1)
            {
                t=parseFloat(em.split("-")[0]);
                for(var i=1;i< em.split("+").length;i++)
                {
                    t=t+parseFloat(em.split("+")[i]);
                }
            }

            if(em.split("-").length>1)
            {
                t=parseFloat(em.split("-")[0]);
                for(var i=1;i< em.split("-").length;i++)
                {
                    t=t-parseFloat(em.split("-")[i]);
                }
            }

            document.getElementById("text_t").value=t;
        }
    }
    document.onkeydown = function()
    {
        if(window.event.keyCode==46)
        clear1();
        if(window.event.keyCode==8)
        clear2();
        var s=window.event.keyCode-96;
        if(window.event.keyCode>=96&&window.event.keyCode<=105)
            document.getElementById("text_t").value=document.getElementById("text_t").value+s;
        switch (window.event.keyCode){
            case 107:
                document.getElementById("text_t").value=document.getElementById("text_t").value+"+";
                break;
            case 109:
                document.getElementById("text_t").value=document.getElementById("text_t").value+"-";
                break;
            case 106:
                document.getElementById("text_t").value=document.getElementById("text_t").value+"*";
                break;
            case 111:
                document.getElementById("text_t").value=document.getElementById("text_t").value+"/";
                break;
            case 110:
                document.getElementById("text_t").value=document.getElementById("text_t").value+".";
                break;
        }
        var em=document.getElementById("text_t").value;
       var t=em;
        if (window.event.keyCode==13)
        {
            if(em.split("*").length>1)
            {
                t=parseFloat(em.split("*")[0]);
                for(var i=1;i< em.split("*").length;i++)
                {
                    t=t*parseFloat(em.split("*")[i]);
                }
            }
             if(em.split("/").length>1)
            {

                if(parseFloat(em.split("/")[1]==0))
                {
                    t=parseFloat(em.split("*")[0]);
                    for(var i=1;i< em.split("*").length;i++)
                    {
                        t=t/parseFloat(em.split("*")[i]);
                    }
                }

            else
                t=parseFloat(em.split("/")[0])/parseFloat(em.split("/")[1]);
        }
            if(em.split("+").length>1)
            {
                t=parseFloat(em.split("-")[0]);
                for(var i=1;i< em.split("+").length;i++)
                {
                    t=t+parseFloat(em.split("+")[i]);
                }
            }

            if(em.split("-").length>1)
            {
                t=parseFloat(em.split("-")[0]);
                for(var i=1;i< em.split("-").length;i++)
                {
                    t=t-parseFloat(em.split("-")[i]);
                }
            }

            document.getElementById("text_t").value=t;
        }

    }
    function clear2(){
        document.getElementById("text_t").value=document.getElementById("text_t").value.substring(0,document.getElementById("text_t").value.length-1);
    }
    function clear1(){
        document.getElementById("text_t").value="";
    }
    </script>
</html>


JavaScript实现计算器
weixin_55017780的博客
05-17 3322
运用运算符来制作一个简易的计算器，通过讲解来让大家认识一下计算器实现原理。 第一步、 构建HTML的布局，先写四个span标签备注好参数和运算符和结果，再写一个div盒子里面包含第二行内容，第二行代表参数一的input标签为了实现可以上下选择的效果只需要改变将input中type里text类型该为number类型即可，而代表运算符的是一个下拉框里面包含加减乘除，只需要在select标签里给四个option代表加减乘除。参数二则是一个input的文本框，计算的按钮则使用一个button按钮可以通过鼠标点击
用 JavaScript 和 HTML 制作一个计算器
pydby01的博客
12-17 4273
引言 这是一篇很棒的文章，在这里你可以学习如何从零做出一款计算器。我们希望你使用 JavaScript 开发并且思考怎么构建一款计算器, 如何编写代码，以及最后，如何整理自己的代码。 在这篇文章结束，你会得到一款和 iPhone 计算器功能一样的计算器（除了 +/- 和百分比功能外）。 前置条件 在你开始本节课程前，请确保你对 JavaScript 有一个不错的了解。最起码，你需要知道以下事情： If/else 分支 For 循环 JavaScript 函数 箭头函数 &am...
使用JS写一个计算器
weixin_30646315的博客
11-08 5688
先上效果图： 简单的加减乘除功能还是有的，所以我们就考虑怎么来实现这个功能。 根据预期效果，可以确定页面中的布局要用到table tr td。 所以先放上页面布局,table的边框宽度border，colspan来设置某一行的宽度为4倍一列宽度，显示结果的地方要显示输入的所有值，先用id来区分，给value一个空，来获取其他按钮键入的value值，...
使用JS编写简单的计算器
weixin_44530087的博客
06-02 411
使用JS编写简单的计算器 HTML写出计算器整体框架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <link rel="stylesheet" href="css/Calculator.css" /> </head> <body> <div id="calculator"
JavaScript计算器
运维工程师(Sun Robin)
09-09 521
计算器 M Backspace CE C MC MR MS M+ 7 8 9
js编写的一个网页版的计算器
05-16
这是一个用javascript编写的计算器，界面是网页版。而且采用的是css布局，而不是用表格，模仿的是windows8.1自带的计算器。
js写的简单计算器
01-09
在本案例中，我们讨论的是一个使用JavaScript编写的简单计算器。这个计算器可能包含了基本的数学运算，如加法、减法、乘法和除法，这些是计算器的基本功能。 首先，让我们深入了解一下JavaScript中的基础语法和数据...
在页面上使用javascript写一个计算器
04-24
在网页上创建一个JavaScript计算器是一项基础但实用的编程任务，它可以帮助我们理解DOM操作、事件处理和基本的数学计算。让我们深入探讨这个话题。 首先，HTML（HyperText Markup Language）是构建网页的基本语言，...
js编写简易的计算器
12-28
第一个数：<input type=text id=num1 /><p></p> <button type=button >+</button> <button type=button >-</button> <button type=button >*</button> <button...
使用 JavaScript 创建一个简单的计算器
最新发布
qq_60597540的博客
11-05 7575
通过这个示例，我们可以看到使用 JavaScript 创建一个简单的计算器是非常简单的。JavaScript 提供了丰富的功能和灵活性，使得开发者能够轻松地实现各种交互功能。以上代码是一个简单的 HTML 页面，其中包括两个输入框和四个按钮，用于实现加、减、乘、除操作。JavaScript 是一种广泛应用于网页开发的脚本语言，它具有灵活、动态和强大的特性。本文将演示如何使用 JavaScript 创建一个简单的计算器，并实现基本的加减乘除操作。MDN Web 文档：JavaScript。
用JavaScript写一个简单的计算器
ayi644640的博客
10-02 863
本文使用js实现了一个简单的加、减、乘、除计算器。 以下是css部分代码： *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; height:auto; outline:1px solid #b9b9b9; margin:50px...
JS原生——编写简易计算器
m0_64954687的博客
12-06 9288
计算器
js写一个计算器
qq_43248604的博客
06-09 142
Document input{ width:60px; } #inp1{ width:280px; text-align:right; } <!--第一行 清除按钮--> <tr> <td><input type="button" value="Clear" onclick="inputPCB(this)"/></td> </tr> &lt...
用js写一个计算器(很简单)
weixin_52630329的博客
12-19 3256
首先要知道我们常用的计算器都有哪些按键，有’0~9’，’+’ ,’ -’ , ‘*’, ‘/’，还有’=’ 和’.’，基本是这些按键，然后我们去创建一些按键。 之后我们去设置样式，设置完去js里写数据 获取上面的input var text = document.querySelector(‘input[type = text]’) 获取box下所有的input var bts = document.querySelectorAll(’.box input’) 获取box var box = docume
用js写一个计算器
热门推荐
小王同学
05-05 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Calaulate~&lt;/title&gt; &lt;style&gt; * { padding: 0; margin: 1px; }
用js编写一个简单地计算器
m0_57860459的博客
12-31 707
1.使用函数的方式重写电影列表和影院列表页面 2.写一个简单的计算器(eval用来计算) //html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte...
用JS写的一个简易计算器
yuiku008的专栏
05-19 3605
计算器var num1,num2;function  validate(num1,num2){ //判断是否完整填写条件var isCompute = false;if(num1 ==""){alert("请输入第一个数");}else if(isNaN(num1)){alert("请输入数字");}else if(num2 ==""){alert("请输入第二个数");}else if(isNa
JS写一个简易计算器
lanseguhui的博客
06-28 1645
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简单计算器&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=
JS写计算器
qq_45635596的博客
12-04 119
<style> .con{ border: 1px solid #000000; width: 500px; height: 600px; text-align: center; position: relative; left:0; right: 0; top: 0;
JavaScript写一个计算器
04-27
好的，以下是一个简单的JavaScript计算器示例： HTML代码： ```html <!DOCTYPE html> 计算器 *" onclick="calculator.result.value+='*'" /> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值