JavaScript，ES6语法制作简易计算器

最新推荐文章于 2022-08-21 09:27:13 发布

管乐明

最新推荐文章于 2022-08-21 09:27:13 发布

阅读量754

点赞数 2

分类专栏：前端开发详解文章标签： javascript es6 css3 html5 前端

本文链接：https://blog.csdn.net/qq_18835599/article/details/115952167

版权

本文介绍了如何使用JavaScript，特别是ES6语法，配合HTML和CSS3来制作一个简易计算器。文章通过步骤分解，展示了从设计效果到实现HTML主体结构，再到CSS样式设置，最后是JavaScript功能代码的编写过程。

摘要由CSDN通过智能技术生成

JavaScript，ES6语法制作计算器

1、先看效果：

在这里插入图片描述
里面所需要的背景图片：

2、HTML主体部分

<div id="counter">
	<h2>简易计算器</h2>
	<div id="counter_content">
		<h3><input id="input1" type="text" value="0" disabled="disabled" ></h3>
		<ul>
			<li onclick="addStr(7)">7</li>
			<li onclick="addStr(8)">8</li>
			<li onclick="addStr(9)">9</li>
			<li onclick="addStr('+')">+</li>
			<li onclick="addStr(4)">4</li>
			<li onclick="addStr(5)">5</li>
			<li onclick="addStr(6)">6</li>
			<li onclick="addStr('-')">-</li>
			<li onclick="addStr(1)">1</li>
			<li onclick