JavaScript
搜索
分类

原生JavaScript实现网页版计算器

作者：南方@后来 时间：2024-04-23 09:27:08　

本文实例为大家分享了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&sup2;</button>
           <!-- 6 -->
           <button class="btn sqrt">&sup2;√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()
}

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

来源：https://blog.csdn.net/weixin_44897872/article/details/121070238

标签：js,网页,计算器
0
投稿

猜你喜欢

  • js实现贪吃蛇游戏含注释

    2024-04-19 10:05:44

  • Bootstrap Table的使用总结

    2024-03-14 01:53:06

  • python3实现字符串的全排列的方法(无重复字符)

    2022-04-14 19:47:56

  • python 统计list中各个元素出现的次数的几种方法

    2022-12-09 10:04:01

  • mysql 存在该记录则更新，不存在则插入记录的sql

    2024-01-29 07:19:24

  • Python 格式化输出_String Formatting_控制小数点位数的实例详解

    2023-11-29 12:09:14

  • 解决Python下json.loads()中文字符出错的问题

    2022-06-17 21:16:52

  • XMLHTTP自动判断远程网页字符编码

    2007-12-28 13:41:00

  • 解决在Dreamweaver中不支持中文文件名的方法

    2010-09-02 12:35:00

  • Python的SQLalchemy模块连接与操作MySQL的基础示例

    2024-01-20 07:37:13

  • 与MSSQL对比学习MYSQL的心得（五）--运算符

    2024-01-15 17:13:36

  • pandas计算最大连续间隔的方法

    2022-05-23 12:05:21

  • perl中heredoc使用说明

    2023-09-20 06:29:40

  • MYSQL之on和where的区别解读

    2024-01-21 20:17:46

  • 对python pandas读取剪贴板内容的方法详解

    2023-07-11 09:15:45

  • SQL Server比较常见数据类型详解

    2024-01-26 11:28:48

  • MySQL去重的方法整理

    2024-01-27 07:04:42

  • 页面加载对访问的影响

    2009-10-30 18:54:00

  • CentOS 7 中以命令行方式安装 MySQL 5.7.11 for Linux Generic 二进制版本教程详解

    2024-01-26 00:24:39

  • Python实现监控程序执行时间并将其写入日志的方法

    2023-01-15 01:35:53
    • asp之家 网络编程 m.aspxhome.com