基于HTML+JS实现网页版苹果计算器
目录
- 一、效果截图
- 二、注意事项
- 三、源码实现
- 1、html
- 2、css
- 3、js
一、效果截图
二、注意事项
1、html结构上，分为三个部分：显示区、按钮区、底部白条
2、css样式上
- 需要解决外边距重叠的问题，可用overflow: hidden;
- 点击高亮效果，可用 filter: brightness(160%)
3、js
- 绑定点击事件的时候，用事件委托，提高整体性能，如果点击的不是按钮，则return（具体看代码）
- 用switch···case···处理功能按钮处理方法
- flag表示输入是否输入首次输入
- 转化位百分比的按钮因为需要涉及到小数,所以要用parseFloat方法来将innerHTML转化为浮点数再来进行计算
- eval函数的使用
三、源码实现
1、html
<!DOCTYPE html>
<html lang="en">
<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>计算器案例</title>
<link rel="stylesheet" href="./index.css" rel="external nofollow" />
</head>
<body>
<div id="calculator">
<!-- 显示区 -->
<div class="screen">
<h1>0</h1>
</div>
<!-- 按钮区 -->
<div class="buttons">
<button class="btn btn1" data-type="handel">AC</button>
<button class="btn btn1" data-type="handel">+/-</button>
<button class="btn btn1" data-type="handel">%</button>
<button class="btn btn2" data-type="handel">÷</button>
<button class="btn btn3">7</button>
<button class="btn btn3">8</button>
<button class="btn btn3">9</button>
<button class="btn btn2" data-type="handel">×</button>
<button class="btn btn3">4</button>
<button class="btn btn3">5</button>
<button class="btn btn3">6</button>
<button class="btn btn2" data-type="handel">-</button>
<button class="btn btn3">1</button>
<button class="btn btn3">2</button>
<button class="btn btn3">3</button>
<button class="btn btn2" data-type="handel">+</button>
<button class="btn btn3 btn0">0</button>
<button class="btn btn3" data-type="handel">.</button>
<button class="btn btn3" data-type="handel">=</button>
</div>
<!-- 底部白条 -->
<div class="bar"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
2、css
* {
padding: 0;
margin: 0;
}
/* 设置计算器的整体样式 */
#calculator {
width: 330px;
/* height: 590px; */
background-color: black;
margin: 30px auto;
border-radius: 40px;
/*解决外边距重叠问题 */
overflow: hidden;
}
/* 设置显示区 */
.screen {
height: 200px;
width: 100%;
color: white;
position: relative;
}
.screen>h1 {
position: absolute;
bottom: 10px;
right: 35px;
font-size: 42px;
}
/* 设置按钮 */
.buttons {
width: 100%;
padding: 0 10px;
}
.buttons>.btn {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #333333;
border: none;
margin: 10px 6px;
color: #fff;
font-size: 25px;
font-weight: bold;
}
/* 设置点击高亮效果 */
.buttons>.btn:active {
filter: brightness(160%);
}
.buttons>.btn1 {
background-color: #ccc;
color: black;
}
.buttons>.btn2 {
background-color: #d6b040;
}
.buttons>.btn0 {
width: 130px;
border-radius: 26px;
}
/* 设置白条 */
.bar {
width: 110px;
height: 3px;
background-color: white;
border-radius: 1px;
margin: 20px auto 15px;
}
3、js
const buttons = document.querySelector(".buttons");
const screen = document.querySelector(".screen h1");
var flag = 1; //设置标志性，表示第一次输入
buttons.addEventListener("click", (e) => {
const text = e.target.innerHTML;
// 如果点击的不是按钮，则return
if (e.target.className == "buttons") return;
handel(text);
});
// 操作符
function handel(text) {
switch (text) {
case "AC": //清除
screen.innerHTML = "0";
flag = 1;
break;
case "+/-": //取正反值
if (screen.innerHTML[0] == "-") {
screen.innerHTML = screen.innerHTML.slice(1);
} else {
screen.innerHTML = "-" + screen.innerHTML;
}
break;
case "%": //取百分比
screen.innerHTML = parseFloat(screen.innerHTML) / 100;
break;
case "÷": //除法
if (flag) {
screen.innerHTML = "/";
flag = 0;
break;
} else {
screen.innerHTML += "/";
flag = 0;
break;
}
case "×": //乘法
if (flag) {
screen.innerHTML = "*";
flag = 0;
break;
} else {
screen.innerHTML += "*";
flag = 0;
break;
}
case "-": //减法
if (flag) {
screen.innerHTML = "-";
flag = 0;
break;
} else {
screen.innerHTML += "-";
flag = 0;
break;
}
case "+": //加法
if (flag) {
screen.innerHTML = "+";
flag = 0;
break;
} else {
screen.innerHTML += "+";
flag = 0;
break;
}
case "=": //等于
if (flag) {
screen.innerHTML = screen.innerHTML;
flag = 1;
break;
} else {
screen.innerHTML = eval(screen.innerHTML);
flag = 1;
break;
}
default:
if (flag) {
screen.innerHTML = text;
flag = 0;
break;
} else {
if (screen.innerHTML.length < 8) {
screen.innerHTML += text;
} else {
return;
}
flag = 0;
}
}
}
到此这篇关于基于HTML+JS实现网页版苹果计算器的文章就介绍到这了,更多相关JS苹果计算器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
js版实现计算器功能
本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下 在老师的带领下完成了这个简单的计算器,这是一个神奇的过程,计算器的基本功能都是有的.虽然是个简单的计算器,但对初学者来说,还是需要强大的逻辑判断能力,里面有很多的条件,作为开发者要不断的寻找设计里的bug,不断地完善用户的需求,而这些都需要清晰的逻辑推理和判断,我有点头大了. <!DOCTYPE html> <html> <head lang="en"> <meta c
-
JSP实现简单网页计算器
本文实例为大家分享了JSP实现简单网页计算器的具体代码,供大家参考,具体内容如下 一.构造一个简单的计算器,能够进行“+.—.*./”运算 (1)编写jsp页面,用户通过表单输入两个操作数和运算符,调用该页面自身处理该表单,通过调用SimpleCalculator类的实例实现运算逻辑,并显示运算结果.(2)实现下边的jsp网页计算器: 二.代码实现 (1)jsp页面 <%@page import="com.beans.SimpleCalculator"%> <%@ p
-
用javascript实现简单计算器
本文实例为大家分享了javascript实现简单计算器的具体代码,供大家参考,具体内容如下 设计一个简单的计算器 代码 <body> <a>第一个数</a> <input type="test" id="inputId1" value="" /><br/> <a>第二个数</a> <input type="test" id="i
-
JS实现苹果计算器
本文实例为大家分享了JS实现苹果计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机</title> <style type="text/css"> #phone{ position: relative; width: 380px; height: 700px; box
-
js制作简易计算器
本文实例为大家分享了js制作简易计算器的具体代码,供大家参考,具体内容如下 要制作一个如图所示的简易计算器,首先要建立一个表单,制作出如图所示的样子. <table border="1" cellspacing="0" > <tr><th colspan="2">购物简易计算器</th></tr> <tr> <td>第一个数</td> <td&g
-
利用JavaScript写一个简单计算器
效果如下: 参考程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
-
基于HTML+JS实现网页版苹果计算器
目录 一.效果截图 二.注意事项 三.源码实现 1.html 2.css 3.js 一.效果截图 二.注意事项 1.html结构上,分为三个部分:显示区.按钮区.底部白条 2.css样式上 需要解决外边距重叠的问题,可用overflow: hidden; 点击高亮效果,可用 filter: brightness(160%) 3.js 绑定点击事件的时候,用事件委托,提高整体性能,如果点击的不是按钮,则return(具体看代码) 用switch···case···处理功能按钮处理方法 flag表示
-
基于HTML+JS实现简单的年龄计算器
目录 前言 演示效果 HTML代码 CSS代码 Javascript代码 演示地址 前言 在线演示地址:http://haiyong.site/age-calculator JavaScript提供了一些内置的日期和时间函数,有助于从日期(出生日期)开始计算年龄.使用这些JavaScript方法,您可以轻松找到任何人的年龄.为此,我们需要用户输入日期和当前系统日期. 演示效果 HTML代码 <div class="container"> <div class=&quo
-
JavaScript实现网页版简易计算器功能
本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 运行效果 运行:直接将下面的代码放到任意文本文件中,文件后缀名改为.html,然后用任意浏览器打开即可. 实现思路以及代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页版的简易计算器</title>
-
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表.变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile.jeasyui.mobile都没有提供这种控件,不知道为什么?
-
Base64编码加密JS代码网页版
你可将本页保存后上传到你的网站中,这样你就拥有了一个Base64编码加密.解密的功能页面,让需要的用户去访问你的网页. Base64编码加密 BODY { MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体" } A { FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none } A
-
js实现网页版贪吃蛇游戏
使用原生 js 实现贪吃蛇小游戏,首先这个 小游戏的目录结构如下: 有 贪吃蛇 , 食物 ,地图 ,还有 游戏 当我们在浏览器打开 index.html 的时候,会出现 移动的小蛇 ,随机生成的食物(这里只有一个,当前食物被吃掉,才会初始化下一个),用户通过键盘上的方向键控制小蛇移动的方向 当小蛇触碰到了墙,即画布边缘的时候,游戏结束! 接下来就是代码实现啦 ~ 食物模块 //食物的自调用函数 (function(){ //创建一个数组 来存放元素 var elements=[]; //食物就是
-
javascript实现编写网页版计算器
本篇主要纪录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下 话不多说,代码如下: 首先是html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用js实现网页版计算器</title> <link rel="stylesheet" href
-
php编程实现简单的网页版计算器功能示例
本文实例讲述了php编程实现简单的网页版计算器功能.分享给大家供大家参考,具体如下: 如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础知识来做的网页版计算器,功能只有"加减剩除求余",其他的一些计算功能可扩展. 实现简单计算器的具体php代码如下(这是php文件jsq.php的全部代码): <html> <head> <title>这是一个网页版的简单计算器</title> <meta http-equi
-
详解如何用js实现一个网页版节拍器
目录 引言 1. 需求分析 2. 素材准备 3. 开发实现 3.1 框架选型 3.2 模块设计 3.3 数据结构设计 3.4 播放逻辑 3.5 音频控制 3.6 动效 3.7 大屏展示 3.8 新增人声发音 4. 部署 5. 后续工作 5.1 目前存在的问题 ios声音 5.2 TODO 切换不同音效 引言 平时练尤克里里经常用到节拍器,突发奇想自己用js开发一个. 最后实现的效果如下:ahao430.github.io/metronome/. 代码见github仓库:github.com/ah
-
JS基于递归实现网页版计算器的方法分析
本文实例讲述了JS基于递归实现网页版计算器的方法.分享给大家供大家参考,具体如下: 递归实现网页版计算器可以简化代码,设计思路: 1.css+html实现计算器的外观,给每个button绑定number(z)事件,传入z的不同来区分触发事件的按钮. <style>放入head中 这个div放在body中,是计算器的html,number()通过传入不同的数字,区分触发按钮. <div class="bg"> <div id="txt"&