HTML、CSS与JS实现简易iPhone计算器
效果如图
源码，通俗易懂
<!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计算器的更多相关文章
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- JS实现简易的计算器
JS可以做的事多了,那就用来实现一个计算器吧 看看手机中的计算器,分为普通计算器和科学计算器 自认脑袋不够大,就实现一个普通版本的吧(支持正负数加减乘除等基本连续的运算,未提供括号功能) 看看 ...
- 使用html+css+js实现简易计算器
使用html+css+js实现简易计算器, 效果图如下: html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
- 项目：JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- ruby -- 进阶学习（十一）配置解决production环境下无法加载css或js
最近配置production环境,找了好几份文档,从傻逼到苦逼~~终于配置成功~~@_@!!! 首先,先加载以下几个插件: # Use Uglifier as compressor for JavaS ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- Tornado引入静态css、js文件
一.静态路径 template_path=os.path.join(os.path.dirname(__file__), "templates") 这里是设置了模板的路径,放置模板 ...
- JQuery 加载 CSS、JS 文件
JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...
随机推荐
- 王颖奇 20171010129《面向对象程序设计（java）》第十五周学习总结
实验十五 GUI编程练习与应用程序部署 实验时间 2018-12-6 学习总结: 理论部分: ◼ JAR文件◼ 应用程序首选项存储◼ Java Web Start JAR文件: 1.Java程序的打 ...
- 基于情感词典的python情感分析
近期老师给我们安排了一个大作业,要求根据情感词典对微博语料进行情感分析.于是在网上狂找资料,看相关书籍,终于搞出了这个任务.现在做做笔记,总结一下本次的任务,同时也给遇到有同样需求的人,提供一点帮助. ...
- 【漫画】JAVA并发编程 如何解决原子性问题
原创声明:本文转载自公众号[胖滚猪学编程],转载务必注明出处! 在并发编程BUG源头文章中,我们初识了并发编程的三个bug源头:可见性.原子性.有序性.在如何解决可见性和原子性文章中我们大致了解了可见 ...
- Excel+Python：分组求和
Excel选中区域,排除序号.姓名等列,复制Ctrl+C. Python,import pandas as pd,读取剪切板并赋值给变量df,df.groupby('部门').sum().若要避免部门 ...
- C语言进阶_goto与void解析
世间真正温煦的春色,都熨帖者大地,潜伏在深谷. 一.简介 goto与void是两个不常用的关键字,C语言中的Goto关键字传承字汇编语言,使用方法也与汇编语言相同.void是类型关键字,可修饰函数和变 ...
- Java UDP小结
UDP: * 发送端 ...
- C# 数据操作系列 - 10 NHibernate初试
0. 前言 在上一篇基本讲完了EF Core的入门级教程.从这一篇开始,我们试着去探索一下 .net core平台上更多的ORM框架.那么,这一篇开始我们就来试试NHibernate. 1. NHib ...
- flask之session
''' session使用: session创建: (1)导入session from flask import session (2)设置secret_key密钥 app.secret_key='s ...
- Mysql之Linux中mariadb主从复制
master主机mysql安装配置 1.下载mariadb(Centos7开始mysql的名字) (1)其它方式(不推荐):rpm安装/软件源安装 (2)yum安装(推荐): ①centos官方的yu ...
- 聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo
最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...