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].innerTextres.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].innerTextconsole.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].innerTextconsole.log(565)
}
bt[23].onclick = function () {two = parseFloat(res.innerText)switch (close.innerText) {case '%'://toFixed(11)保留11位小数res.innerText = one % twok = 0break;case '+':res.innerText = one + twok = 0break;case '-':res.innerText = one - twok = 0break;case 'x':res.innerText = one * twok = 0break;case '÷':res.innerText = one / twok = 0break;}// 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 = 0two = 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原生-网页版计算器相关推荐

源代码之网页版计算器（js）
今天给大家分享一个网页版计算器的源码,需要的可以拿走哦~~ HTML: <!DOCTYPE html> <html> <head> <title>js蓝 ...
Spring Boot入门（9）网页版计算器
介绍在写了前八篇Spring Boot项目的介绍文章后,我们已经初步熟悉了利用Spring Boot来做Web应用和数据库的使用方法了,但是这些仅仅是官方介绍的一个例子而已. 本次分享将介绍 ...
用计算机弹暖暖数字代码,奇迹暖暖网页版计算器
<远征>即将推出衣橱系统或将成为网游版奇迹暖暖双十一狂欢刚刚落幕,这几天的状态都将在等快递.拆快递中度过,而你剁手而来的衣服,是否需要一个大大的衣帽间呢? 谁才是虎牙直播中流砥柱骚男 ...
php编网页版计算器,php编程实现简单的网页版计算器功能示例
本文实例讲述了php编程实现简单的网页版计算器功能.分享给大家供大家参考,具体如下: 如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础知识来做的网页版计算器,功能只有&qu ...
php编网页版计算器,php实现简单的网页版计算器功能的方法
这篇文章主要介绍了php编程实现简单的网页版计算器功能,涉及php简单表单操作与数值运算相关实现技巧,需要的朋友可以参考下如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础 ...
php编网页版计算器,php 简单网页计算器的完整代码
这篇文章主要为大家详细介绍了php 简单网页计算器的完整代码,具有一定的参考价值,可以用来参考一下. 对php实现的一个简单的网页计算器代码感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...
WEB网页版计算器（HTML、CSS、JavaScript实现）
划重点!!! (兄弟们只需要建一个test的html文件.file的CSS文件和test1的js文件,将对应的代码粘贴进去可以运行啦~) 一.效果截图: 功能: 1.实现简单的四则运算. ...
基于JavaScript的网页版【定期存款计算器 - DepositCaculator v1.0】
使用方法:复制全部源代码,另存为.html文件. 免责声明:此程序为作者练习作品,不保证结果100%正确,对使用本程序造成的任何损失概不负责. <!DOCTYPE HTML PUBLIC &qu ...
Javascript之网页版待办事项
本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能. 其中页面的HTML布局和CSS样式取用原站,JS部分为自己编写. 效果图完整代码 HTML.JS部分 < ...

JavaScript原生-网页版计算器

JavaScript原生-网页版计算器相关推荐

最新文章

热门文章