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一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
JS实现简易网页计算器
js实现简易计算器.计算器的布局不像表格那么公正对称,所以布局这块相对比较繁琐,但是也可以通过这来练习一下CSS. 一.实现功能完成计算器的加减乘除的基本计算功能实现输入框中的字符串拼接二.实现 ...
HTML+CSS+JS实现简易汇率计算器（使用Fetch）
还是github上找的小玩意跟着模仿着敲的. 首先看一下fetch,我也是学过ajax之后头一次见这玩意,然后就看着人家代码顺便上MDN看了一下. Fetch API 提供了一个 JavaScript ...
Js 简易iphone计算器
界面展示: 1.实现普通计算器的基本功能: 加减乘除取百分数取相反数全部清除 2.思路 (1)页面布局 (2)其他操作功能在代码里有注释 (3)不足: 不明白为什么取反时,都要点击两次取反按钮才 ...
使用原生HTML、CSS、JS实现简易聊天框
使用原生HTML实现简易聊天框. 1.第一种方式 <!DOCTYPE html> <html lang="en"> <head><meta ...
用HTML，CSS，JS制作一个网页计算器
今天分享一个自己做的网页计算器,我个人感觉,虽然不精简,但是应该涉及到的东西都有了,所以分享出来,那我直接上代码了. <html> <head><meta charset ...
js计算器代码加减乘除_如何用jQuery做一个简易版计算器
经过几个小时地敲敲打打,终于把这一部分的代码完成了. 这类问题的难点不在于布局,而是如何恰当地使用jQuery达成计算.交互的目的,比如储存.显示数值,数据类型的转换等. 在听老师讲课之前的我,思路是 ...
JavaScript初学入门（JS打印9*9乘法表，JS制作简易计算器）
目录网页的三部分组成: Java和JavaScript的关系: JavaScript的三种使用方式: Js的5种输出方式: Js的语法初始: js中值的类型: JS中的运算符: JS中的流程控制语句 ...
利用JS制作简易计算器
目的:利用JS制作一个简易的计算器,能够实现简单四则运算要求:三个输入框输入值只能是数字,当输入非数字时提示并清空输入框,利用正则表达式:点击按钮实现计算. 话不多说,贴图为上: 看了效果图,下面就 ...

HTML、CSS与JS实现简易iPhone计算器

HTML、CSS与JS实现简易iPhone计算器相关推荐

最新文章

热门文章