导航：首页 > 开发技术 >

原生JavaScript如何实现网页版计算器

发表于：2025-11-11 作者：千家信息网编辑

千家信息网最后更新 2025年11月11日，这篇文章主要介绍了原生JavaScript如何实现网页版计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。首先是网页计算器的样式部分

千家信息网最后更新 2025年11月11日原生JavaScript如何实现网页版计算器

这篇文章主要介绍了原生JavaScript如何实现网页版计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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

                 Document                                          0
            <
            >

js部分:

const bt = document.querySelectorAll('.keyboard button')const close = document.querySelector('.close')const res = document.querySelector('.res')//当点击的数字的时候let k = 0let onelet twofunction 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()}

感谢你能够认真阅读完这篇文章，希望小编分享的"原生JavaScript如何实现网页版计算器"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!

很赞哦！