临平建设局网站,wordpress 上传图片500错误,帮别人做网站要投资吗,企业管理网站建设前言
本文主要讲解如何用纯前端制作计算器#xff0c;并且可以利用鼠标点击、键盘监听、键盘连续键监听实现加减乘除、delete、计算结果、清除全部数字等功能。那么好文本正式开始。
布局和样式流程
首先是HTMLCSS结构#xff1a;这里主要用到的是position定位和Flex布局…前言
本文主要讲解如何用纯前端制作计算器并且可以利用鼠标点击、键盘监听、键盘连续键监听实现加减乘除、delete、计算结果、清除全部数字等功能。那么好文本正式开始。
布局和样式流程
首先是HTMLCSS结构这里主要用到的是position定位和Flex布局。
首先我们准备一个大的div用于装最大的容器它的id为all然后我们准备三个小的div给这些div加上Flex-box弹性盒子布局这三个小div下面准备了四个小div四个小div主要用到的是flex1均匀的进行平分上述div的空间那么同时我们在最上面的0展示阶段设置了两个div第一个div用到的是positionabsolute绝对定位top40pxright:0px第二个div就是为了占据第一个div的空间因为绝对定位不占用页面空间但是我们还想要留出这部分空间所以使用另一个普通的div来实现这块空间的占据。
JS实现流程
我们使用事件委托来实现一个事件绑定所有计算器中能看到的按钮和最终值的id。想了解事件委托的小伙伴可以点击我的另一篇文章点击这里简单来说事件委托就是在父元素的监听事件下去绑定所有符合要求的子元素那么就实现一个事件多次复用和简化代码的操作了。首先我们定义两个变量分别存储id为all的DOM父元素和最终结果展示区域也就是ansDOM子元素给all添加一个点击监听事件如果这个事件对象下点击的目标对象下的className伪类名是flex_1,那么我就进入这个循环这里flex_1是所有按钮都绑定的一个伪类那么就可以用于判断。用innerHTML判断获取到的点击元素的内容比如点击内容为点击为等等然后去做对应的逻辑处理。最后用parseInt进行字符串转换数字操作然后赋值给result变量最终给ans变量的innerHTML赋值。实现计算器效果。
全部源码
!DOCTYPE html
htmlheadstyle* {padding: 0;margin: 0;}.container {width: 320px;background-color: #fafafa;border: 1px solid lightgray;position: relative;box-shadow: 1px 1px 15px lightgray;margin: 0 auto 0 auto;margin-top: 150px;}.contain {display: flex;justify-content: center;align-items: center;}.flex_1 {text-align: center;border: 1px solid lightgray;background-color: white;color: black;flex: 1;font-size: 24px;line-height: 50px;}#ans {height: 50px;position: absolute;top: 30px;right: 0;font-size: 24px;line-height: 50px;}/style/headbodydiv classcontainer idalldiv styleposition:absolute;top:10px;left:10px;font-size:12px计算器/divdiv styleposition:absolute;top:160px;right:5px; idans0/divdiv styleheight:200px;/divdiv classcontaindiv classflex_10/divdiv classflex_11/divdiv classflex_12/divdiv classflex_1-/div/divdiv classcontaindiv classflex_13/divdiv classflex_14/divdiv classflex_15/divdiv classflex_1/div/divdiv classcontaindiv classflex_16/divdiv classflex_17/divdiv classflex_18/divdiv classflex_1*/div/divdiv classcontaindiv classflex_19/divdiv classflex_1÷/divdiv classflex_1AC/divdiv classflex_1/div/div/divscriptlet ans document.getElementById(ans)let lastKeyCode null;document.getElementById(all).addEventListener(click, function(e) {if (e.target.className flex_1) {if (ans.innerHTML 0) {switch (e.target.innerHTML) {case AC:break;case :break;case :break;case -:break;case *:break;case ÷:break;default:ans.innerHTML e.target.innerHTML}} else if (e.target.innerHTML AC) {ans.innerHTML 0} else if (e.target.innerHTML ) {computeResult()} else if (ans.innerHTML.length 22) {ans.innerHTML e.target.innerHTML}}})document.onkeydown function(e) {if (lastKeyCode ! 16) {if ((e.keyCode 57 e.keyCode 47) ||(e.keyCode 105 e.keyCode 96)) {if (ans.innerHTML.length 22) {let temp e.keyCode 57 ? e.keyCode - 48 : e.keyCode - 96;if (ans.innerHTML 0) {ans.innerHTML temp} else {ans.innerHTML temp;}}} else if (ans.innerHTML.length 22 || e.keyCode 8 || e.keyCode 187 ||e.keyCode 13) {ans.innerHTML keyMany()switch (e.keyCode) {case 189:if (ans.innerHTML.length 22)ans.innerHTML -;break;case 191:if (ans.innerHTML.length 22)ans.innerHTML ÷;break;case 8:ans.innerHTML ans.innerHTML.length 1 ? ans.innerHTML.slice(0, ans.innerHTML.length -1) : ;break;case 13:computeResult();break;case 187:computeResult();break;}}} else if (ans.innerHTML.length 22) {if (e.keyCode 187) {ans.innerHTML keyMany()ans.innerHTML } else if (e.keyCode 56) {ans.innerHTML keyMany()ans.innerHTML *}}if (lastKeyCode null) {lastKeyCode e.keyCode}}document.onkeyup function(e) {lastKeyCode null}function keyMany() {let temp ans.innerHTML[ans.innerHTML.length - 1]if (temp || temp - || temp ÷ || temp *) {ans.innerHTML ans.innerHTML.slice(0, ans.innerHTML.length - 1)console.log(ans.innerHTML);}return ans.innerHTML;}function computeResult() {let arr Array.from(ans.innerHTML)let startData ,sym ,endData arr.forEach((item, index) {if (index 0 item -) {startData 0sym -}else if (isSym(item)) {if (sym ! ) {switch (sym) {case :startData Number(startData) Number(endData);break;case -:startData Number(startData) - Number(endData);break;case *:startData Number(startData) * Number(endData);break;case ÷:startData Number(startData) / Number(endData);break;}endData ;}sym item;} else {if (startData || sym ) {startData item} else {if (index arr.length - 1) {if (!isSym(arr[index])) {endData item;}switch (sym) {case :startData Number(startData) Number(endData);break;case -:startData Number(startData) - Number(endData);break;case *:startData Number(startData) * Number(endData);break;case ÷:startData Number(startData) / Number(endData);break;}endData ;} else {endData item;}}}})ans.innerHTML startData}function isSym(data) {if (data || data - || data * || data ÷) {return true;} else {return false;}}/script/body
/html
