效果如图



源码，通俗易懂

<!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. 玩好百家乐需要掌握些什么技巧和打法？来自ag老玩家的实战经验心得总结

    最近很多网友给我留言,说为什么学了很多技巧和打法这个游戏还是玩不好,坦白说,其实bjl想要玩得好,不是说你懂得多少技巧和掌握了多少种打法就可以的了,而是你要懂得如何把这些正确结合去运用,这些我之前都强 ...

  2. leetcode-4. 寻找两个正序数组的中位数

    leetcode-4. 寻找两个正序数组的中位数. 给定两个大小为 m 和 n 的正序(从小到大)数组 nums1 和 nums2. 请你找出这两个正序数组的中位数,并且要求算法的时间复杂度为 O(l ...

  3. java ->String、StringBuffer、StringBuilder三者之间的区别

    1.首先说运行速度,速度由快到慢排列:StringBuilder > StringBuffer > String String最慢的原因: String为字符串常量,而StringBuil ...

  4. 题解 洛谷P1562 【还是N皇后】

    原题:洛谷P1562 这个题的原理和8皇后的原理是一模一样的,就是必须要用n个皇后把每一个行填满,同时满足每一列,每一行,每一条对角线只有一个棋子.但如果按照原来的方法暴打的话只有60分(优化亲测无效 ...

  5. vue组件中的“:”、“@”、“.”属性

    冒号属性 :是指令 v-bind 的缩写,是为了动态绑定数据,用于响应式地更新 HTML 特性. 加了冒号,后面是变量或表达式:不加冒号的是字符串. 如图:将Home组件中的 probe-type 的 ...

  6. Python-MD5加密算法接口测试

    前言 在之前的Python系列的随笔中,我跟小伙伴们讲述了Python-AES加密算法接口测试和Python-SHA256加密算法接口测试,今天我们来学习一下登录密码是md5加密的情况下,该如何使用p ...

  7. ql的python学习之路-day13

    前言:本节主要学习模块 一.模块的定义 模块:本质是.py结尾的python文件(文件名:test.py,对应的模块是:test),用来从逻辑上组织python代码(变量.函数.类.逻辑,本质是实现一 ...

  8. React实践：自定义html特性不显示

    发现React中自定义的html特性在render后是不现实,而且getAttribute方法也只能获取到undefined. 后来去stackoverflow提问,网友回答说: It depends ...

  9. JS的函数和对象三

    复习 判断是否含有某个属性 对象.属性名 === undefined 对象.hasOwnProperty('属性名') '属性名' in 对象 方法  { say:function(){  this ...

  10. day07：集合的使用0220

    list_1=set([4,5,6,7])list_2=set([4,8,9])list_3=set([4,5])list_4=set([6,7])a = (2,3)b = (2) #list_3是l ...