您的位置：首页 > 编程技术 > js  >  javascript实现编写网页版计算器

javascript实现编写网页版计算器

 更新时间：2021年8月9日 00:00  点击：1865

本篇主要记录的是利用javscript实现一个网页计算器的效果，供大家参考，具体内容如下

话不多说，代码如下：

首先是html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用js实现网页版计算器</title>
    <link rel="stylesheet" href="cal.css" >
</head>
<body>
<div id="container" class="container">
    <input id="result" class="result">
    <div id="cal" class="clearfix">
        <div id="num" class="fl">
            <div id="top" class="clearfix">
                <input id="clear" type="button" value="C">
                <input id="antonyms" type="button" value="+/-">
                <input id="remainder" type="button" value="%">
            </div>
            <div id="bonttom" class="clearfix">
                <input type="button" value="7">
                <input type="button" value="8">
                <input type="button" value="9">
                <input type="button" value="4">
                <input type="button" value="5">
                <input type="button" value="6">
                <input type="button" value="1">
                <input type="button" value="2">
                <input type="button" value="3">
                <input class="zero" type="button" value="0">
                <input type="button" value=".">
            </div>
        </div>
        <div id="math" class="fr math">
            <input type="button" value="/" onclick="onclicknum('/')">
            <input type="button" value="＊" onclick="onclicknum('*')">
            <input type="button" value="＋" onclick="onclicknum('+')">
            <input type="button" value="－" onclick="onclicknum('-')">
        </div>
        <input id="res" type="button" value="＝">
    </div>
</div>
</body>
</html>

接下来是css样式代码：

* {
    margin: 0px;
    padding: 0px;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: block;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    _zoom: 1;
}

input {
    display: block;
}

.container {
    width: 240px;
    height: 400px;
    border: 2px solid #eb4509;
    margin: 100px auto;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

input {
    width: 60px;
    height: 60px;
    border: 1px solid #000;
    float: left;
    background: #ddd;
    font-size: 24px;
    color: #eb4509;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.math input {
    float: none;
}

input.zero {
    width: 120px;
}

#num {
    width: 180px;
}

#cal #math {
    width: 60px;
}

.result {
    width: 100%;
    height: 100px;
    line-height: 100px;
    border: none;
    background-color: #dfdfdf;
    font-size: 30px;
    float: none;
    outline: none;
    text-align: right;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

最后上js代码：

<script type="text/javascript">
    var numresult;
    var str;

    var flag;
    var bot = document.getElementById("bonttom");
    var botInputs = bot.getElementsByTagName("input");
    var clear = document.getElementById("clear");
    var res = document.getElementById("res");
    var math = document.getElementById("math");
    var mathInputs = math.getElementsByTagName("input");
    var antonymsBtn = document.getElementById("antonyms");
    var remainderBtn = document.getElementById("remainder");


    //点击数字以及加减乘除
    imporIn(botInputs);
//    imporIn(mathInputs);

    function imporIn(eles) {
        for (var i = 0; i < eles.length; i++) {
            eles[i].onclick = function () {
                onclicknum(this.value);
            }
        }
    }

    //点击清空c按钮
    clear.onclick = function () {
        onclickclear();
    }

    //点击＝号得到结果
    res.onclick = function () {
        onclickresult();
    }

    //点击＋／－
    antonymsBtn.onclick = function () {
        antonyms();
    }

    //点击％
    remainderBtn.onclick = function () {
        remainder();
    }

    function onclicknum(nums) {
        if (flag) {
            console.log("num=" + nums);
            if (nums !== "/" && nums !== "+" && nums !== "-" && nums !== "*") {
                str.value = "";

                console.log("aa" + nums);
            }
        }
        flag = false;
        str = document.getElementById("result");
        str.value = str.value + nums;
    }

    //清空
    function onclickclear() {
        str = document.getElementById("result");
        str.value = "";
    }

    //得到结果
    function onclickresult() {
        str = document.getElementById("result");
        numresult = eval(str.value);
        str.value = numresult;
        flag = true;
    }

    //正负数
    function antonyms() {
        str = document.getElementById("result");
        str.value = -str.value;
    }

    //%
    function remainder() {
        str = document.getElementById("result");
        str.value = str.value / 100;
    }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。

[!--infotagslink--]

相关文章

  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15

  • 利用JS实现点击按钮后图片自动切换的简单方法

    下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25

  • 详解前端安全之JavaScript防http劫持与XSS

    作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24

  • JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签...2016-01-02

  • js+css实现回到顶部按钮（back to top）

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03

  • js实现上传图片及时预览

    这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09

  • 一个关于JS正则匹配的踩坑记录

    这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-13

  • Nest.js参数校验和自定义返回数据格式详解

    这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28

  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-20

  • node.js如何操作MySQL数据库

    这篇文章主要介绍了node.js如何操作MySQL数据库，帮助大家更好的进行web开发，感兴趣的朋友可以了解下...2020-10-29

  • js屏蔽F12审查元素，禁止修改页面代码等实现代码

    有时候我们需要屏蔽客户端的F12，以防菜鸟也可以随意修改我们的代码，也处于源码的保护等操作，这里就为大家分享一下常见的代码...2020-10-03

  • 基于JavaScript实现文字超出部分隐藏

    这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01

  • js组件SlotMachine实现图片切换效果制作抽奖系统

    这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19

  • C#实现简易计算器功能(附源码)

    这篇文章主要为大家详细介绍了C#实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-21

  • js实现列表按字母排序

    这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11

  • NodeJS实现阿里大鱼短信通知发送

    本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20

  • js实现调用网络摄像头及常见错误处理

    这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07

  • JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15

  • JS实现随机生成验证码

    这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06