效果如图



源码，通俗易懂

<!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. kafka简介及集群部署

    消息队列概念:(Message queue): “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象. “消息队列”是在消息的传输过程中保存消 ...

  2. 报错：Maven创建An internal error occurred during: "Retrieving archetypes:". Java heap space

    在Eclipse中创建Maven的Web项目时出现错误:An internal error occurred during: "Retrieving archetypes:". J ...

  3. Facebook 开源微光效果 Shimmer

    我的引言 晚上好,我是吴小龙同学,我的公众号「一分钟 GitHub」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. 今天要推荐的是 Facebook 开源的闪光效果:Shimmer, ...

  4. 【Hadoop离线基础总结】完全分布式环境搭建

    完全分布式环境搭建 服务规划 适用于工作当中正式环境搭建 安装步骤 第一步:安装包解压 停止之前的Hadoop集群的所有服务,并删除所有机器的Hadoop安装包,然后重新解压Hadoop压缩包 三台机 ...

  5. 【基础】excel如何根据数据内容显示不同颜色。

    需求: 店柜完成率排名相比上阶段升降,升显示绿色“↑“,降显示红色“↓”,持平显示黑色“-”. 步骤: 第一步 先计算两次排名的差值(本次排名-上次排名). 第二步 对差值列设置单元格格式,设置格式如 ...

  6. 仿真FFT(quartus安装)

    软件下载:http://dl.altera.com/13.1/?edition=subscription 安装步骤: 接下来,仿真FFT: http://www.openhw.org/article/ ...

  7. Java 将鼠标改为图片的两种方法

    一 图片跟着鼠标移动,鼠标隐藏 int x,y; addMouseMotionListener(this);//设置鼠标监听 public void paint(Graphics g) {  g.dr ...

  8. 设计模式之GOF23享元模式

    享元模式FlyWeight 场景:如果有很多个完全相同或者相似的对象,可以节省内存资源 核心: 享元模式以共享的方式高效地支持大量细粒对象的重用 享元对象做到共享的关键是区分了内部状态和外部状态: 内 ...

  9. Asp.Net Core 3.1学习-读取、监听json配置文件（7）

    1.前言 文件配置提供程序默认的给我们提供了ini.json.Xml等.都是读取不同格式的文件.文件配置提供程序支持文件可寻.必选.文件变更的监视. 2.读取配置文件 主要运用的包:需要Ini.xml ...

  10. python 基础应用4

    1.列表所有元素全部单独输出 #所有元素全部单独输出 li = [1,2,3,'taibai',[4,5,6,'taibaia']] for i in li: if type(i) == list: ...