HTML、CSS与JS实现简易iPhone计算器
2024-09-21 18:27:58
效果如图
源码，通俗易懂
<!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;
}
最新文章
- js判断浏览器类型以及浏览器版本
- 使用curl 下载HTML
- Android——旋转屏幕导致Activity重建解决方法
- python操作excel表格(xlrd/xlwt)
- C#委托使用:多播 ,向委托注册多个方法
- Linux文件系统性能优化 (转)
- html中的table在android端显示
- Coder的利器
- Liunx readlink命令
- asp.net core源码飘香：Logging组件
- Struts2使用自定义拦截器导致Action注入参数丢失、url参数
- php中HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR的使用
- spark streaming中维护kafka偏移量到外部介质
- BZOJ 4480 [JSOI2013] 快乐的jyy
- hdu1269 有向图强连通 【Tarjan】(模板)
- 【排序算法】选择排序(Selection sort)
- PowerBI开发 第六章：数据网管
- HashMap几个需要注意的知识点
- dreamwave基础
- 2879. [NOI2012]美食节【费用流】