效果如图



源码，通俗易懂

<!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. Vue列表实现滚动到指定位置样式改变

    这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索 南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. ...

  2. 【Hadoop离线基础总结】Hive的基本操作

    Hive的基本操作 创建数据库与创建数据库表 创建数据库的相关操作 创建数据库:CREATE TABLE IF NOT EXISTS myhive hive创建表成功后的存放位置由hive-site. ...

  3. Linux内核驱动学习（三）字符型设备驱动之初体验

    Linux字符型设备驱动之初体验 文章目录 Linux字符型设备驱动之初体验 前言 框架 字符型设备 程序实现 cdev kobj owner file_operations dev_t 设备注册过程 ...

  4. Jmeter-函数助手之${__RandomString(,,)}使用

    ${__RandomString(,,)}使用方法 1.在日常写脚本中,可以随机生成指定的几个字符串作为入参的value,那么jmeter 的这个工具就特别好用.  应用: 2.填写接口入参, 3.运 ...

  5. 【转载】皇 家 国 际 开 户图像的插值算法18O88O49999

    插值的定义: 设函数y=f(x)在区间[a,b]上有定义,且已知在点a≤x0<x1<…<xn≤b上的值为y0,y1,…,yn,若存在简单函数P(x)使得 P(xi)=yi (i=0, ...

  6. 【雕爷学编程】零基础Python（01）---“投机取巧”的三条途径

    从3月13日报名尝试上网课学习(4天课8.9元),开始接触Python(中文发音“派森”),到今天有一星期了.这两天广泛搜索了一下相关的学习途径,本着“投机取巧”的出发点,居然小有心得,这里一并分享出 ...

  7. Oracle百万数据查询语句

    SELECT * FROM (SELECT e.*, ROWNUM rn FROM (SELECT id, name, age, birthDate, sex, describe, city, cre ...

  8. 8086 8253 proteus仿真实验

    目录 实验内容 电路图 计数初值 关于8523的地址 关于灯的地址 代码内容 实验内容 电路图 计数初值 已知\(f_{clk0}=100khz\),所以\(T_{clk0}=\frac{1}{f_{ ...

  9. Django之内置分页器（paginator）

    django分页: from django.shortcutsimportrender from django.core.paginator import Paginator,EmptyPage, P ...

  10. 使用Flutter开发的抖音国际版

    简介 最近花了两天时间研究使用Flutter开发一个抖音国际版. 先上图,个人感觉使用Flutter开发app快得不要不要的额.  两天就基本可以开发个大概出来.   最主要是热更新,太方便实时调整U ...