JS实现苹果计算器
本文实例为大家分享了JS实现苹果计算器的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手机</title>
<style type="text/css">
#phone{
position: relative;
width: 380px;
height: 700px;
box-shadow: 1px 1px 10px #808080;
margin: auto;
border-radius: 30px;
}
.kj{
position: absolute;
width: 8px;
height: 60px;
background-color: black;
right: -8px ;
top:100px;
}
.yl{
position: absolute;
width: 8px;
height: 80px;
background-color: black;
left: -8px;
top: 85px;
}
.top{
width: 120px;
height: 50px;
/* box-shadow: 1px 1px 10px #808080; */
margin: auto;
}
.mkf{
float: left;
width: 100px;
height: 10px;
border-radius: 5px;
background-color: black;
margin-right: 10px;
margin-top: 20px;
}
.sxj{
float: left;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: black;
margin-top: 20px;
}
.screen{
width: 370px ;
height: 600px;
background-color: black;
margin: auto;
}
.result-num{
height: 120px;
/* padding-top: 30px; */
}
.sp{
float: right;
color: white;
font-size: 50px;
margin-top: 50px;
}
.num{
height: 480px;
}
.key{
width: 82.5px;
height: 82.5px;
border-radius: 50px;
background-color: #808080;
float: left;
margin: 5px;
text-align: center;
line-height: 80px;
font-size: 20px;
color: white;
}
.first{
background-color: #B0B0B0;
color: black;
}
.second{
background-color: orange;
}
.third{
width: 175px;
}
.home{
width: 45px;
height: 45px;
border-radius: 25px;
background-color: #B0B0B0;
margin: 3px auto 0px auto;
}
</style>
</head>
<body>
<div id="phone">
<!--开机键-->
<div class="kj"></div>
<!--音量-->
<div class="yl"></div>
<!-- 手机顶部 -->
<div class="top">
<!-- 麦克风 -->
<div class="mkf"></div>
<!-- 摄像头 -->
<div class="sxj"></div>
</div>
<!-- 屏幕 -->
<div class="screen">
<div class="result-num">
<span class="sp">0</span>
</div>
<div class="num">
<div class="key first" onclick="clearCompute()">AC</div>
<div class="key first" onclick="deleteLastNum()">←</div>
<div class="key first">%</div>
<div class="key second" onclick="fun('/')">/</div>
<div class="key keynum" onclick="fun(7)">7</div>
<div class="key keynum" onclick="fun(8)">8</div>
<div class="key keynum" onclick="fun(9)">9</div>
<div class="key second" onclick="fun('*')">*</div>
<div class="key keynum" onclick="fun(4)">4</div>
<div class="key keynum" onclick="fun(5)">5</div>
<div class="key keynum" onclick="fun(6)">6</div>
<div class="key second" onclick="fun('-')">-</div>
<div class="key keynum" onclick="fun(1)">1</div>
<div class="key keynum" onclick="fun(2)">2</div>
<div class="key keynum" onclick="fun(3)">3</div>
<div class="key second" onclick="fun('+')">+</div>
<div class="key third keynum" onclick="fun(0)">0</div>
<div class="key" onclick="fun('.')">.</div>
<div class="key second" onclick="compute()">=</div>
</div>
</div>
<!-- home键 -->
<div class="home">
</div>
</div>
<script type="text/javascript">
var span = document.querySelector(".sp");
/**
* @param {Object} num
* 点击数字键盘 将数字替换到我们的span标签内部
*/
function fun(num){
var value = span.innerText;
if(value == 0){
span.innerText = num;
}else{
span.innerText = span.innerText.concat(num);
}
}
/**
* 计算结果的
*/
function compute(){
var value = span.innerText;
var result= eval(value);
span.innerText = result;
}
/**
* 清空计算区域 重置为0
*/
function clearCompute(){
span.innerText="0";
}
/**
* 删除计算区域的最后一个字符
*/
function deleteLastNum(){
var value = span.innerText;
console.log(typeof(value))
if(value == 0){
}
else{
/**
* value是一个字符串
* zs123
* 字节：文本在计算器底层存储的时候都是字节存储的 编码集 将字符转成特定的字节在计算机上存储的
* 字符：人类能看懂的一个字母 或者一个中文汉字
* a b 中 国 aj
*
* 字符串就是一个一个字符组成的一个集合体 字符串String提供了很多常用的方法 以便我们对这个字符数组进行相关操作
*/
if(value.length!=1){
span.innerText = value.substring(0,value.length-1)
}else{
span.innerText="0";
}
}
}
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript 如何计算文本的行数的实现
需求:根据行数决定是否限制展开和收起. 思路:用2个块统计行高,一个不加高度限制用来统计行数(css隐藏),一个加高度限制用来显示(加高度限制会导致统计行数不准) 要想知道文本的行数,那就需要知道文本的总高度和每一行的高度,总高度除以行高就是行数.当然总高度的计算必须是文字所在的 DOM 没有对高度的限制,随着文本的增加 DOM 要随之变高才行:最后还要考虑 DOM 的样式padding和margin对高度的影响.这样一来我们就可以计算出文本的行数了.总结一下我们需要如下几步: 克隆文本所在的
-
javascript实现简易计算器功能
本文实例为大家分享了javascript实现简易计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击数字按钮输入数字 2.实现基础四则运算功能,并添加必要的异常处理,例如:除数不能为零 3.实现小数点添加功能,并添加异常处理,小数点只能出现一次 4.实现正负号功能 5.实现回退功能,已经是最后一位时,显示框显示为零 6.清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习目
-
js精准的倒计时函数分享
先看看倒计时效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时函数</title> <script> var timer=(function(){ return function (json){ if(json.currentTime){ var now=new Date(
-
js实现一个简易的计算器
利用原生js实现一个简易的计算器(附详细注释),供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title&
-
javascript模拟实现计算器
本文实例为大家分享了javascript模拟实现计算器的具体代码,供大家参考,具体内容如下 功能: 1.实现单击按钮录入数字 2.实现基础四则运算功能,并添加必要的异常处理. 3.实现小数点功能并添加异常处理:小数点只能出现一次 4.实现正负号功能 5.实现退位功能,已经是最后一位时,显示框显示为0 6.AC清屏功能 使用的知识点: 1.利用大量的自定义函数实现业务逻辑 2.灵活运用事件及事件处理 3.培养异常处理的编程方法 4.培养并实践利用不同思路实现编程 综合练习的目的: 1.将css,h
-
JavaScript经典案例之简易计算器
本文实例为大家分享了JavaScript实现简易计算器的具体代码,供大家参考,具体内容如下 效果图: 逻辑: 1.首先通过遍历,为所有元素添加事件: 2.各个按钮功能分别实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
-
js精准计算
var numA = 0.1; var numB = 0.2; alert( numA + numB ); 0.1 + 0.2 = 0.30000000000000004. 计算精度误差问题(和二进制相关). 对于浮点数的四则运算,几乎所有的编程语言都会有类似精度误差的问题,只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题,而JavaScript是一门弱类型的语言,从设计思想上就没有对浮点数有个严格的数据类型,所以精度误差的问题就显得格外突出. 我们先把 0.1 和
-
超精准的javascript验证身份证号的具体实现方法
编写程序前先来了解下身份证号的构成: 身份证号分为两种,旧的为15位,新的为18位. 身份证15位编码规则:dddddd yymmdd xx p 其中 dddddd:地区码 yymmdd: 出生年月日 xx: 顺序类编码,无法确定 p: 性别,奇数为男,偶数为女: 身份证18位编码规则:dddddd yyyymmdd xxx y 其中 dddddd:地区码 yyyymmdd: 出生年月日 xxx:顺序类编码,无法确定,奇数为男,偶数为女 y: 校
-
js拖拉表格实现内容计算
本文实例为大家分享了js拖拉表格实现内容计算的具体代码,供大家参考,具体内容如下 前言 制作网页版Excel H5新增功能:可拖拉-draggable, 可编辑-contenteditable 实现结果 代码实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Table</title&g
-
JS实现苹果计算器
本文实例为大家分享了JS实现苹果计算器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机</title> <style type="text/css"> #phone{ position: relative; width: 380px; height: 700px; box
-
基于HTML+JS实现网页版苹果计算器
目录 一.效果截图 二.注意事项 三.源码实现 1.html 2.css 3.js 一.效果截图 二.注意事项 1.html结构上,分为三个部分:显示区.按钮区.底部白条 2.css样式上 需要解决外边距重叠的问题,可用overflow: hidden; 点击高亮效果,可用 filter: brightness(160%) 3.js 绑定点击事件的时候,用事件委托,提高整体性能,如果点击的不是按钮,则return(具体看代码) 用switch···case···处理功能按钮处理方法 flag表示
-
Vue.js实现价格计算器功能
本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial
-
js实现模拟计算器退格键删除文字效果的方法
本文实例讲述了js实现模拟计算器退格键删除文字效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &
-
js仿苹果iwatch外观的计时器代码分享
本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: JS+CSS3实现的类似于苹果iwatch计时器特效是一段实现了类似于最近最火爆的苹果iwatch计时器效果的代码,带有开始和重置按钮,支持计次显示. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的JS
-
原生JS仿苹果任务栏菜单，放大效果的菜单
相信本菜单会让你学习到一些新鲜的JS技巧. JS仿苹果任务栏菜单 body{margin:0;padding:0} #menu{position:absolute;width:100%;bottom:0;text-align:center;} window.onload = function () { var oMenu = document.getElementById("menu"); var aImg = oMenu.getElementsByTagName("img&
-
Vue.js实现的计算器功能完整示例
本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc
-
JS实现简易计算器
用JS实现简易计算器,供大家参考,具体内容如下 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
-
Vue.js实现立体计算器
本文实例为大家分享了Vue.js 制作立体计算器的具体方法,供大家参考,具体内容如下 项目效果图 这是一个简单的项目实现加减乘除运算 项目结构 代码展示 计算器1.0.html <!DOCTYPE html> <html> <head> <title>计算器</title> <link rel="stylesheet" type="text/css" href="css/style.css&
-
基于html+css+js实现简易计算器代码实例
使用html+css+js实现简易计算器, 效果图如下: html代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http