原生JavaScript实现网页版计算器

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

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

原生JavaScript实现网页版计算器_第1张图片

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



 

    
    
    
    Document
    

 

 
    
0
<
>

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()
}

以上代码就把一个简单的计算机做好了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(原生JavaScript实现网页版计算器)