效果如图



源码，通俗易懂

<!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. Day_11【集合】扩展案例1_遍历打印学生信息，获取学生成绩的最高分，获取成绩最高的学员，获取学生成绩的平均值，获取不及格的学员数量

    分析以下需求,并用代码实现: 1.按照以下描述完成类的定义 学生类 属性: 姓名name 年龄age 成绩score 行为: 吃饭eat() study(String content)(content ...

  2. 简单服务发现协议(SSDP)编程指导

    本文主要讲解如何使用ssdp进行编程,不涉及过多关于ssdp的理论知识 1. 前言   网上对ssdp理论介绍的一大把,缺乏从编程角度的一个指导,这里不会长篇大论ssdp理论,只是根据实际编码经验对用 ...

  3. R语言：日薪和应发工资

    生产部门普通员工为日薪,有时要知道日薪和应发工资的转换关系.做表一为日薪取整数,白天工资+晚上工资=应发工资,延长工作时间取时薪的1.5倍,应发工资保留到十位.做表二为应发工资取十的倍数,推算相应日薪 ...

  4. windows上docker部署springboot多实例

    前提条件: 1.可以运行jar包的环境2.机器上已经安装了docker3.准备部署的springboot的jar包4.Dockerfile文件 准备Dockerfile FROM java:8 VOL ...

  5. 【雕爷学编程】Arduino动手做（42）---PM2.5粉尘传感器

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...

  6. Java—CountDownLatch使用详解

    CountDownLatch介绍 CountDownLatch概述 CountDownLatch一般用作多线程倒计时计数器,强制它们等待其他一组(CountDownLatch的初始化决定)任务执行完成 ...

  7. DRF版本组件

    1.DRF版本组件配置类局部使用 局部配置: 方式一:直接配置versioning_class=QueryParameterVersioning 方式二:直接配置versioning_class=UR ...

  8. 3.9 Go Slice切片

    3.9 Go Slice切片 Go语言切片(Slice) 切片是可动态变化的序列,是对数组的引用,引用类型,遵循引用传递的机制 slice类型写作[ ]T,T是slice元素类型,var s1 []i ...

  9. Django分页之应用案例

    项目文件: models.py(建表) from django.db import models # Create your models here. class Book(models.Model) ...

  10. 你想了解的python基础数据类型这里都有

    目录 python基础数据总结 数字型数据类型 数字型数据基本知识 算术运算符 进制 二进制运算符 字符串数据类型 字符串基础知识 字符串数据操作方法(增 查 改) 集合数据类型 集合基础知识 集合元 ...