【前端demo】简易计算器 原生实现

文章目录

    • 效果
    • 代码
      • html
      • css
      • js

其他demo:https://blog.csdn.net/karshey/article/details/132585901

效果

在这里插入图片描述
效果预览:https://codepen.io/karshey/pen/RwERjGz

参考:

js实现仿华为手机计算器,兼容电脑和手机屏幕_dengluandai1740的博客-CSDN博客

Javascript iOS Style Calculator

Javascript Calculator

代码

本想尝试不用eval()而是手动实现的,后来发现细节太多了,越写问题越多。。所以就算了

思路:

  • 把点击的数字或符号拼接为字符串,每次点击=时直接放到eval中计算
  • 注意将x改为*
  • html用table实现,占两行的=用rowspan实现

注意,table的margin是失效的。

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Calculator</title><link rel="stylesheet" href="style.css"><body><div class="calculator"><div class="screen"><div class="in" id="in"></div><div class="out" id="out"></div></div><div class="btn"><table><tr class="op"><td onclick="clearSceen()">C</td><td onclick="command('/')">/</td><td onclick="command('x')">x</td><!-- 打< 要写&lt --><td onclick="del()">&lt;-</td></tr><tr><td onclick="command(7)">7</td><td onclick="command(8)">8</td><td onclick="command(9)">9</td><td class="op" onclick="command('-')">-</td></tr><tr><td onclick="command(4)">4</td><td onclick="command(5)">5</td><td onclick="command(6)">6</td><td class="op" onclick="command('+')">+</td></tr><tr><td onclick="command(1)">1</td><td onclick="command(2)">2</td><td onclick="command(3)">3</td><td class="equal" rowspan="2" onclick="cal()">=</td></tr><tr><td onclick="command('%')">%</td><td onclick="command(0)">0</td><td onclick="command('.')">.</td></tr></table></div></div>
</body></html><script src="index.js"></script>

css

* {margin: 0;padding: 0;
}html,
body {overflow: hidden;
}.calculator {width: 300px;height: 445px;margin: 100px auto;border: 1px solid #E4E4E4;position: relative;
}.in,
.out {height: 60px;line-height: 60px;text-align: right;padding: 0 10px;overflow: hidden;
}.in {font-weight: 700;font-size: 20px;
}.out {color: #a9a9a9;font-size: 16px;
}.btn {position: absolute;bottom: 0px;
}.btn td {width: 75px;height: 60px;line-height: 60px;/* 左右居中 */text-align: center;font-size: 20px;border: 1px solid #E4E4E4;/* hover时是手掌形状 */cursor: pointer;
}/* 所有按钮在hover时都有阴影 除了= */
.btn td:hover:not(.equal) {background-color: #ebebeb;
}.op {background-color: #F5F5F5;color: #00ACC2;
}.equal {background-color: #00ACC2;color: #fff;
}

js

let calIn = document.getElementById('in')
let calOut = document.getElementById('out')function command(str) {calIn.innerHTML = '' ? str : calIn.innerHTML + str
}function cal() {calOut.innerHTML = eval(calIn.innerHTML.replace(/x/g, '*').replace(/%/, '/100'));if (calIn.innerHTML == 'undefined' || calOut.innerHTML == 'undefined') calOut.innerHTML = ''// else {//     calIn.innerHTML = calOut.innerHTML//     calOut.innerHTML = ''// }
}function clearSceen() {calIn.innerHTML = ''calOut.innerHTML = ''
}function del() {if (calIn.innerHTML.length) {calIn.innerHTML = calIn.innerHTML.slice(0, calIn.innerHTML.length - 1)}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/93889.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Golang数据结构和算法

Golang数据结构和算法 数据的逻辑结构和物理结构常见数据结构及其特点算法的时间复杂度和空间复杂度Golang冒泡排序Golang选择排序Golang插入排序Golang快速排序Golang归并排序Golang二分查找Golang sort包Golang链表Golang container/list标准库Golang栈stackGolang二叉搜索树…

JasperReport定义变量后打印PDF变量为null以及整个pdf文件为空白

问题1: JasperReport打印出来的整个pdf文件为空白文件&#xff1b; 问题2&#xff1a;JasperReport定义变量后打印PDF变量为null&#xff1b; 问题1原因是因为缺少数据源JRDataSource JasperFillManager.fillReport(jasperReport, params,new JREmptyDataSource());如果你打印…

python爬虫-Selenium

一、Selenium简介 Selenium是一个用于Web应用程序测试的工具&#xff0c;Selenium 测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。模拟浏览器功能&#xff0c;自动执行网页中的js代码&#xff0c;实现动态加载。 二、环境配置 1、查看本机电脑谷歌浏览器的版…

全民健康生活方式行动日,天猫健康联合三诺生物推出“15天持续测糖计划”

糖尿病是全球高发慢性病中患病人数增长最快的疾病&#xff0c;是导致心血管疾病、失明、肾衰竭以及截肢等重大疾病的主要病因之一。目前中国有近1.4亿成人糖尿病患者&#xff0c;科学的血糖监测和健康管理对于糖尿病患者来说至关重要。 在9月1日全民健康生活方式行动日前夕&am…

【Linux】fork函数的基础知识

文章目录 前言一、fork的返回值二、常见问题 1.为什么fork要给子进程返回0&#xff0c;给父进程返回子进程pid&#xff1f;2.一个函数返回两次值怎么理解&#xff1f; 3.一个变量怎么会有不同的内容&#xff1f; 4.fork函数干了什么&#xff1f; 前言 fork初识&#xff1a; …

RabbitMQ-常用命令

RabbitMQ常用命令 3.1 启动停止rabbitMQ命令 # 前台启动Erlang VM 和 RabbitMQ 当窗口关闭或者ctrlc时&#xff0c;使退出了。 rabbitmq-server# 使用系统命令启动 systemctl start rabbitmq-server# 后台启动 rabbitmq-server -detached# 停止rabbitMQ和Erlang VM rabbitmq-…

40、Thymeleaf的自动配置和基本语法、springboot 整合 Thymeleaf

★ Spring Boot支持如下模板技术&#xff1a; FreeMarkerGroovyThymeleafMustache官方推荐使用 ThymeleafJSP不再被推荐。★ Thymeleaf的优势 Thymeleaf标准方言中的大多数处理器都是属性处理器。这种页面模版即使在未被处理之前&#xff0c;浏览器也可正确地显示HTML模板文件…

Ubuntu入门05——磁盘管理与备份压缩

1.检查磁盘空间占用情况 2.统计目录或文件所占磁盘空间大小 3.压缩 3.1 zip、unzip和zipinfo 运行时发现上面命令不成功&#xff0c;换成&#xff1a; &#xff08;将文件lkw放入压缩文件lkw01.zip中&#xff09; sudo zip -m lkw01.zip lkw 解压文件&#xff1a; 实操&…

Docker 常用服务 安装使用 教程

Docker安装常用服务 1、 安装mysql # 1.拉取mysql镜像到本地 docker pull mysql:tag (tag不加默认最新版本) # 2.运行mysql服务 docker run --name mysql -e MYSQL_ROOT_PASSWORDroot -d mysql:tag --没有暴露外部端口外部不能连接 docker run --name mysql -e MYSQL_ROOT_PAS…

【数据分析】统计量

1. 均值、众数描述数据的集中趋势度量&#xff0c;四分位差、极差描述数据的离散程度。 2. 标准差、四分位差、异众比率度量离散程度&#xff0c;协方差是度量相关性。 期望值分别为E[X]与E[Y]的两个实随机变量X与Y之间的协方差Cov(X,Y)定义为&#xff1a; 从直观上来看&…

hive lateral view 实践记录(Array和Map数据类型)

目录 一、Array 1.建表并插入数据 2.lateral view explode 二、Map 1、建表并插入数据 2、lateral view explode() 3、查询数据 一、Array 1.建表并插入数据 正确插入数据&#xff1a; create table tmp.test_lateral_view_movie_230829(movie string,category array&…

Doris架构中包含哪些技术?

Doris主要整合了Google Mesa(数据模型)&#xff0c;Apache Impala(MPP Query Engine)和Apache ORCFile (存储格式&#xff0c;编码和压缩)的技术。 为什么要将这三种技术整合? Mesa可以满足我们许多存储需求的需求&#xff0c;但是Mesa本身不提供SQL查询引擎。 Impala是一个…