效果如图



源码，通俗易懂

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#bg{

				width: 246px;

				height: 400px;

				background: black;

			}

			#screen{

				position: relative;

				top: 10px;

				width: 95%;

				height: 70px;

				color: white;

				font-size: 50px;

				text-align: right;

				margin-left: 5px;

				/*background: wheat;*/

			}

			.btn,.btn_grey,.btn_orange{

				width: 50px;

				height: 50px;

				margin: 3px;

				border-radius: 25px;

				text-align: center;

				line-height: 45px;

				color: white;

				font-size: 16px;

				cursor: pointer;

			}

			.btn_grey{

				background: #7C7C7C;

				color: black;

			}

			.btn_orange{

				background: #FC8E39;

			}

			.btn{

				background: #2C2C2C;

			}

			#zero{

				width: 110px;

			}

		</style>

	</head>

	<body>

		<div id="bg">

			<div id="screen"></div>

			<table id="keyboard">

				<tr>

					<td><div class="btn_grey" onclick="del()">del</div></td>

					<td><div class="btn_grey" onclick="cfun()">C</div></td>

					<td><div class="btn_grey" onclick="func('%')">%</div></td>

					<td><div class="btn_orange" onclick="func('/')">/</div></td>

				</tr>

				<tr>

					<td><div class="btn" onclick="func('7')">7</div></td>

					<td><div class="btn" onclick="func('8')">8</div></td>

					<td><div class="btn" onclick="func('9')">9</div></td>

					<td><div class="btn_orange" onclick="func('*')">*</div></td>

				</tr>

				<tr>

					<td><div class="btn" onclick="func('4')">4</div></td>

					<td><div class="btn" onclick="func('5')">5</div></td>

					<td><div class="btn" onclick="func('6')">6</div></td>

					<<td><div class="btn_orange" onclick="func('-')">-</div></td>

				</tr>

				<tr>

					<td><div class="btn" onclick="func('1')">1</div></td>

					<td><div class="btn" onclick="func('2')">2</div></td>

					<td><div class="btn" onclick="func('3')">3</div></td>

					<td><div class="btn_orange" onclick="func('+')">+</div></td>

				</tr>

				<tr>

					<td colspan="2"><div class="btn" id="zero" onclick="func('0')">0</div></td>

					<td><div class="btn" onclick="func('.')">.</div></td>

					<td><div class="btn_orange" onclick="result()">=</div></td>

				</tr>

			</table>

		</div>

		<script>

			var scr=document.getElementById("screen");

			function del(){

				scr.innerHTML="";

			}

			function cfun(){

				var str=scr.innerHTML;

				scr.innerHTML=str.slice(0,str.length-1);

			}

			function func(num){

				var str=scr.innerHTML;

				scr.innerHTML=str+num;

			}

			function result(){

				var str=scr.innerHTML;

				scr.innerHTML=str==""?"":eval(str);

			}

		</script>

	</body>

</html>

其中οnclick="func(‘7’)"可以改为func(this);

this指的是当前对象（div）,其中的数字就是this.innerHTML;

那么函数改为

function func(o){

	result.innerHTML+=o.innerHTML;

}

HTML、CSS与JS实现简易iPhone计算器的更多相关文章

  1. html、css、js实现简易计算器

    学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...

  2. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  3. JS实现简易的计算器

    JS可以做的事多了,那就用来实现一个计算器吧 看看手机中的计算器,分为普通计算器和科学计算器     自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看 ...

  4. 使用html+css+js实现简易计算器

    使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  5. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  6. ruby -- 进阶学习（十一）配置解决production环境下无法加载css或js

    最近配置production环境,找了好几份文档,从傻逼到苦逼~~终于配置成功~~@_@!!! 首先,先加载以下几个插件: # Use Uglifier as compressor for JavaS ...

  7. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  8. Tornado引入静态css、js文件

    一.静态路径 template_path=os.path.join(os.path.dirname(__file__), "templates") 这里是设置了模板的路径,放置模板 ...

  9. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

随机推荐

  1. 【Hadoop离线基础总结】MapReduce增强（上）

    MapReduce增强 MapReduce的分区与reduceTask的数量 概述 MapReduce当中的分区:物以类聚,人以群分.相同key的数据,去往同一个reduce. ReduceTask的 ...

  2. FOC: Park变换电角度误差带来的影响

    关于坐标变换已经在这篇博客中提到<FOC中的Clarke变换和Park变换详解>,在FOC算法的实际调试过程中会遇到很多与理论有所偏差的问题,往往这些情况下,需要对理论有较深刻的理解,才能 ...

  3. java中"no enclosing instance of type * is accessible"的解决方法

    这种情况一般发生在“在静态方法里面使用内部类” 测试代码: public class Test { public static void main(String[] args) { A a = new ...

  4. [hdu4123]dfs区间化+RMQ

    题意:给一个树编号0~n-1,一个数组a[i]为节点i在树上走的最大距离(不重复点),然后求最大的区间,使得区间最大差异小于某个值.dfs求出每个数组,同时区间化.枚举区间左边界,右边界同样递增,类似 ...

  5. Python 图像处理 OpenCV （1）：入门

    引言 又开一个新的系列分享,对图像处理感兴趣的同学可以关注这个系列. 更新频率尽量保持一周两到三次推送. 新系列第一件事儿当然是资源推荐,下面是一些有关 OpenCV 的资源链接: 资源链接: 官方网 ...

  6. vue项目开发中遇到的问题总结

    (转自)https://www.cnblogs.com/zifayin/p/8312677.html 1.路由变化页面数据不刷新问题 这种情况一般出现在vue-router的history模式下,初次 ...

  7. R的安装以及包安装

        今天看论文,需要用到R语言的库,于是又折腾了半天..     其实并没有什么太大的问题,只是在第三方包的下载方面还有python中使用R方面遇到了问题: 第三方包的导入      其实在网上有 ...

  8. 微信小程序小方块

    第一步:配置animation.wxml文件(相当于html显示的页面) <import src="../common/header.wxml" /> <impo ...

  9. 微信小程序通信录

    第一步:phone.wxml中 <view bindlongtap="clickPhone">{{phoneNum}}</view> 第二步:phone.j ...

  10. 使用pandas库实现csv行和列的获取

    1.读取csv import pandas as pd df = pd.read_csv('路径/py.csv') 2.取行号 index_num = df.index 举个例子: import pa ...