手写原生js实现简单计算器的功能

话不多说直接看图片

其实核心思想就是用了一个eval 函数里面可以解析带运算符的字符串但是一定要吧除号和乘号替换成代码里的* 和/ 其他就没有什么了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>ul{list-style: none;display: flex;width: 100px;margin-left:-34px;margin-top:3px;}li{margin-right:10px;width: 14px;height: 14px;border-radius: 50%;}li+li{margin-right:10px;}ul>li:nth-child(1){margin-right: 10px;background-color: #ff5351;}ul>li:nth-child(2){background-color: #ffbb41;}ul>li:nth-child(3){background-color: #0bc84d;}#input{height: 80px;width: 231px;background-color: #3c3d3a;overflow: hidden;}span{font-size:40px;float:right;color:white;position: relative;top:-10px;right:11px;}table{border-spacing: 0px;width: 231px;}table>tbody>tr:first-child>td{width: 57px;height: 49px;background-color: #4e4f4c;padding: 0px;border-right:1px solid #3c3d38;border-bottom:1px solid #3c3d38;color:white;text-align: center;vertical-align: center;font-size:20px;}table>tbody>tr>td:last-child{background-color: #ff9d2a;border:0px;border-bottom:1px  solid  #3c3d38;font-size:28px;}#first>td{font-size:15px;}tr#first>td:last-child{font-size:30px;}table>tfoot>tr>td{width: 57px;height: 49px;background-color: #6b6b69;border-right:1px solid #3c3d38;border-bottom:1px solid #3c3d38;color:white;text-align: center;font-size:20px;}table>tbody>tr>td{width: 57px;height: 49px;background-color: #6b6b69;padding:0px;border-right:1px solid #3c3d38;border-bottom:1px solid #3c3d38;color:white;text-align: center;vertical-align: center;font-size:20px;}table>tfoot>tr>td:last-child{background-color: #ff9d2a;border:0px;border-bottom:1px  solid  #3c3d38;font-size:28px;}table>tfoot>tr>td:nth-child(2){border-left:0px;}table>tfoot>tr>td:nth-child(1){border-right:0px;}</style>
</head>
<body><div id="input"><ul><li></li><li></li><li></li></ul><span id="show"></span></div><div id="calc"> <div id="methods"><table ><tbody><tr id="first"><td>AC</td><td>+/-</td><td>%</td><td>÷</td></tr><tr><td>7</td><td>8</td><td>9</td><td>×</td></tr><tr><td>4</td><td>5</td><td>6</td><td>-</td></tr><tr><td>1</td><td>2</td><td>3</td><td>+</td></tr></tbody><tfoot><tr><td>0</td><td ></td><td>.</td><td>=</td></tr></tfoot></table></div></div><script>// 获取表格标签 并为表格标签绑定事件函数 子元素通过冒泡共享父元素的函数var table=document.getElementsByTagName("table")[0]var show=document.getElementById("show")var fragment=`     <span id="add">+</span><span id="medium">/</span><span id="minus">-</span> `table.onclick=function(e){//   用e.target 代替this 获得目标元素var  td=e.target;console.log(td.innerHTML)if(td.nodeName=="TD"){switch(td.innerHTML){case "AC": show.innerHTML=""break;case '.':if(show.innerHTML.length!=0){show.innerHTML+="."}break;case "=": if(show.innerHTML!==""){try{if(show.innerHTML.indexOf("×")!=-1 ||show.innerHTML.indexOf("÷")!=-1 ){//    乘法的时候  将显示屏中所有的乘号都替换成*var str=show.innerHTML.replace(/×/g,"*")str1=str.replace(/÷/g,"/")show.innerHTML=str1}show.innerHTML=eval(show.innerHTML)}catch(err){show.innerHTML=err}}  break;case "": e.stopPropagation()break;case "+/-": show.innerHTML="-"+ show.innerHTMLbreak;//    其他的td default: show.innerHTML+=td.innerHTML}} }</script>
</body>
</html>``

手写原生js实现简单计算器的功能相关推荐

css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
纯手写原生PHP网站管理后台系统网站管理系统
一.源码简介一套纯手写原生的PHP网站管理后台,前端利用LayUI实现,实现PHP初学者专研学习使用,对于PHP学习的人,只有熟悉了原生的PHP开发,才适合利用其它框架搭建自己的网站平台.封城期间, ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
前端面试：手写代码JS实现字符串反转
前端萌新面试:手写代码JS实现字符串反转前言因为做前年小红书的前端校招面试题,发现出现好几道关于字符串对象和数组对象的题目,说难不难,但突然要写的话一时想不起来,这不想着做个小总结. 首先明白字符 ...
js html转盘点名,原生JS实现简易随机点名功能
定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图.· 上图中,左侧数字代表时间,单位毫秒:左侧文字代表某一个操 ...
原生js实现简单JSONP
JSONP是一种非常常见的实现跨域请求的方法.其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输. 用原生JS实现JSONP非常简单,无非几点: 1)定义一个函数,用于处理接 ...
python识别手写文字_Python3实现简单可学习的手写体识别(实例讲解)
1.前言版本:Python3.6.1 + PyQt5 + SQL Server 2012 以前一直觉得,机器学习.手写体识别这种程序都是很高大上很难的,直到偶然看到了这个视频,听了老师讲的思路后,瞬 ...
C语言练手项目--C 语言制作简单计算器
C 语言制作简单计算器一.需求二.实现 1.思路 2.代码 3.运行结果三.参考链接一.需求使用 C 语言做一个简单的计算器,能执行加.减.乘.除操作二.实现 1.思路 (1)标准输入到s ...

手写原生js实现简单计算器的功能

手写原生js实现简单计算器的功能相关推荐

最新文章

热门文章