脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js网页版计算器

原生JavaScript实现网页版计算器

 更新时间：2021年11月02日 09:40:33   作者：南方@后来  
这篇文章主要为大家详细介绍了原生JavaScript实现网页版计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现网页版计算器的具体代码，供大家参考，具体内容如下

由于无聊看电脑上的系统软件翻到了计算器这个功能，就简单写一下这个计算器的功能吧，这个网页版计算器基本功能都有吧，但是不是很完全，仅供参考。

首先是网页计算器的样式部分不想手写直接复制即可

<!DOCTYPE html>
<html lang="zh-CN">
 
<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: 0;
            padding: 0;
            box-sizing: border-box;
        }
 
        .cal {
            width: 420px;
            margin: 100px auto;
            background-color: #E6E6E6;
 
            padding: 2px;
            overflow: hidden;
        }
 
 
        .show {
            position: relative;
            width: 416px;
            height: 120px;
 
            font-size: 50px;
            line-height: 50px;
            font-weight: 700;
        }
 
        .show button {
            display: none;
 
            position: absolute;
            top: -2px;
            right: -2px;
 
            width: 60px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: transparent;
            background-color: #E6E6E6;
 
            font-size: 30px;
            font-weight: 100;
            cursor: pointer;
        }
 
        .show button:hover {
            background-color: #e81123;
            color: #f0f0f0
        }
 
        .res,
        .left,
        .right {
            position: absolute;
            bottom: 0;
 
            height: 60px;
            line-height: 60px;
            padding: 0 3px;
        }
 
        .res {
            right: 0;
            /* width: 100%; */
 
            text-align: right;
        }
 
        .left {
            display: none;
            background-color: #E6E6E6;
        }
 
        .right {
            display: none;
            right: 0;
            background-color: #E6E6E6;
        }
 
        .left:hover,
        .right:hover {
            color: #2e8eda;
        }
 
        .keyboard {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
 
 
 
        .btn {
            display: flex;
            justify-content: center;
 
            width: 100px;
            height: 60px;
            line-height: 60px;
            margin: 2px;
 
            background-color: #f0f0f0;
            border: transparent;
 
            font-size: large;
        }
 
        .btn:hover {
            background-color: #d6d6d6;
        }
 
        .digital {
            background-color: #fafafa;
            font-weight: 700;
        }
 
        .equal {
            background-color: #8abae0;
        }
 
        .equal:hover {
            background-color: #4599db;
        }
    </style>
</head>
 
<body>
 
    <div class="cal">
        <div class="show">
            <button class="close">×</button>
            <div class="res">0</div>
            <div class="left">&lt;</div>
            <div class="right">&gt;</div>
        </div>
        <div class="keyboard">
            <!-- 0 -->
            <button class="btn percent">%</button>
            <!-- 1 -->
            <button class="btn clearOne">CE</button>
            <!-- 2 -->
            <button class="btn clearAll">C</button>
            <!-- 3 -->
            <button class="btn back">del</button>
            <!-- 4 -->
            <button class="btn div1">1/x</button>
            <!-- 5 -->
            <button class="btn square">x²</button>
            <!-- 6 -->
            <button class="btn sqrt">²√x</button>
            <!-- 7 -->
            <button class="btn div">÷</button>
            <!-- 8 -->
            <button class="btn digital">7</button>
            <!-- 9 -->
            <button class="btn digital">8</button>
            <!-- 10 -->
            <button class="btn digital">9</button>
            <!-- 11 -->
            <button class="btn mul">x</button>
            <!-- 12 -->
            <button class="btn digital">4</button>
            <!-- 13 -->
            <button class="btn digital">5</button>
            <!-- 14 -->
            <button class="btn digital">6</button>
            <!-- 15 -->
            <button class="btn sub">-</button>
            <!-- 16 -->
            <button class="btn digital">1</button>
            <!-- 17 -->
            <button class="btn digital">2</button>
            <!-- 18 -->
            <button class="btn digital">3</button>
            <!-- 19 -->
            <button class="btn add">+</button>
            <!-- 20 -->
            <button class="btn neg">+/-</button>
            <!-- 21 -->
            <button class="btn digital">0</button>
            <!-- 22 -->
            <button class="btn digital">.</button>
            <!-- 23 -->
            <button class="btn equal">=</button>
        </div>
    </div>
    <script src="./计算机.js"></script>
</body>
 
</html>

js部分:

const bt = document.querySelectorAll('.keyboard button')
const close = document.querySelector('.close')
const res = document.querySelector('.res')
//当点击的数字的时候
let k = 0
let one
let two
function arr(num) {
    bt[num].onclick = function () {
        res.innerText += bt[num].innerText
        res.innerText = parseFloat(res.innerText)
        // console.log(one)
 
    }
}
//小数点
//保留结果小数
function fn() {
    if (res.innerText.length > 8) {
        res.innerText = res.innerText.slice(0, 10)
    }
    if (res.innerText == 'NaN') {
        res.innerText = 0
    }
 
}
 
//当点击的是运算符号的时候
function symbol(str, fu) {
    bt[str].onclick = function () {
        k++
        if (k > 1) {
            return
        }
        one = parseFloat(res.innerText)
        // switch (fu) {
        //     case '+':
        //         one += one
        //         break;
        //     case '-':
        //         one -= one
        //         break;
        //     case '*':
        //         one *= one
        //         break;
        //     case '/':
        //         one /= one
        //         break;
        // }
        res.innerText = ''
        close.style.display = 'block'
        close.innerText = bt[str].innerText
        console.log(one)
    }
}
 
arr(21)
arr(18)
arr(17)
arr(16)
arr(14)
arr(13)
arr(12)
arr(10)
arr(9)
arr(8)
arr(22)
//运算符号
symbol(0)
symbol(7, '/')
symbol(11, '*')
symbol(15, '-')
symbol(19, '+')
console.log(bt[22].innerText)
bt[22].onclick = function () {
    res.innerText += bt[22].innerText
    console.log(565)
}
bt[23].onclick = function () {
    two = parseFloat(res.innerText)
    switch (close.innerText) {
        case '%':
            //toFixed(11)保留11位小数
            res.innerText = one % two
            k = 0
            break;
        case '+':
            res.innerText = one + two
            k = 0
            break;
        case '-':
            res.innerText = one - two
            k = 0
            break;
        case 'x':
            res.innerText = one * two
            k = 0
            break;
        case '÷':
            res.innerText = one / two
            k = 0
            break;
    }
    // console.log(res.innerText.length)
    fn()
 
 
}
bt[1].onclick = function () {
    res.innerText = ''
}
bt[2].onclick = function () {
    res.innerText = '0'
    close.innerText = 'x'
    close.style.display = ''
    one = 0
    two = 0
}
bt[3].onclick = function () {
    res.innerText = res.innerText.slice(0, res.innerText.length - 1)
    if (res.innerText.length === 0) {
        res.innerText = '0'
        return
    }
}
bt[4].onclick = function () {
    res.innerText = 1 / parseFloat(res.innerText)
    fn()
}
bt[5].onclick = function () {
    res.innerText = parseFloat(res.innerText) * parseFloat(res.innerText)
    fn()
}
 
bt[6].onclick = function () {
    res.innerText = Math.sqrt(parseFloat(res.innerText))
    fn()
}
bt[20].onclick = function () {
    res.innerText = 0 - parseFloat(res.innerText)
    fn()
}

以上代码就把一个简单的计算机做好了，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 浅析hasOwnProperty方法的应用

    浅析hasOwnProperty方法的应用

    这篇文章主要是对hasOwnProperty方法的应用进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • javascript伸缩菜单栏实现代码分享

    javascript伸缩菜单栏实现代码分享

    这篇文章主要介绍了javascript伸缩菜单栏实现代码，点击标题显示下级菜单，节约了空间，使页面排版更加紧凑，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS实现CheckBox复选框全选、不选或全不选功能

    JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭，如一次性处理多个产品，或对文章的删除、产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，需要的朋友可以参考下
    2016-02-02
  • JavaScript如何删除数组元素(总结篇)

    JavaScript如何删除数组元素(总结篇)

    在JavaScript中,除了Object之外,Array类型恐怕就是最常用的类型了,与其他语言的数组有着很大的区别,JavaScript中的Array非常灵活,今天我就来总结了一下JavaScript中Array删除的方法,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • 微信小程序学习笔记之文件上传、下载操作图文详解

    微信小程序学习笔记之文件上传、下载操作图文详解

    这篇文章主要介绍了微信小程序学习笔记之文件上传、下载操作,结合实例形式分析了微信小程序图片文件传输的原理、步骤及后台php操作相关实现技巧,并结合图文形式予以详细说明,需要的朋友可以参考下
    2019-03-03
  • JS 获取HTML标签内的子节点的方法

    JS 获取HTML标签内的子节点的方法

    下面小编就为大家带来一篇JS 获取HTML标签内的子节点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript数据结构之二叉树的查找算法示例

    JavaScript数据结构之二叉树的查找算法示例

    这篇文章主要介绍了JavaScript数据结构之二叉树的查找算法,结合具体实例形式分析了javascript针对二叉树节点最小值、最大值的相关查找操作实现技巧,需要的朋友可以参考下
    2017-04-04
  • JavaScript中的E-mail 地址格式验证

    JavaScript中的E-mail 地址格式验证

    本文给大家分享JavaScript中的E-mail 地址格式验证，项目要求输入的数据必须包含@符号和点号。代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2018-03-03
  • 10分钟彻底搞懂微信小程序单页面应用路由

    10分钟彻底搞懂微信小程序单页面应用路由

    这篇文章主要给大家介绍了光宇微信小程序单页面应用路由的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • echarts地图区域显示不同颜色代码示例

    echarts地图区域显示不同颜色代码示例

    地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气,这篇文章主要给大家介绍了关于echarts地图区域显示不同颜色的相关资料,需要的朋友可以参考下
    2023-10-10

最新评论