html、css、js实现普通计算器

先看效果：

1.用简单的 table 实现计算器的框架

2.显示部分 <input type="button" readonly> 设置仅可读

话不多说直接上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算器</title><style type="text/css">.frame {width: 400px;height: 500px;background-color: lightblue;margin: 0 auto;margin-top: 80px;border-radius: 10px;box-shadow: -2px -2px 10px lawngreen;}table {width: 400px;height: 500px;}th {width: 470px;height: 70px;border: 2px solid grey;background-color: aquamarine;}td {width: 70px;height: 50px;border: 3px solid greenyellow;border-radius: 40%;text-align: center;font-size: 2rem;}td:hover {background-color: aquamarine;}td>input {width: 100%;height: 100%;background-color: lightblue;border-radius: 40%;border: 0;font-size: 2rem;}td>input:hover {background-color: aquamarine;}td>input:active {background-color: rgb(70, 243, 185);}#show {width: 99%;height: 100%;background-color: aquamarine;font-size: 1.5rem;border: 0;cursor: pointer;outline: 0;}.brand {border: 0;}.brand:hover {background-color: lightblue;}#clear {background-color: rgb(245, 196, 196);}#clear:active {background-color: rgb(249, 143, 143);}</style>
</head><body><div class="frame"><table cellspacing="10"><tr><th colspan="4"><input type="text" id="show" value="0" readonly></th></tr><tr><td><input type="button" value="^2" onclick="calculator(this)"></td><td><input type="button" value="^3" onclick="calculator(this)"></td><td><input type="button" value="√" onclick="calculator(this)"></td><td><input type="button" value="←" onclick="calculator(this)"></td></tr><tr><td><input type="button" value="+" onclick="calculator(this)"></td><td><input type="button" value="-" onclick="calculator(this)"></td><td><input type="button" value="*" onclick="calculator(this)"></td><td><input type="button" value="/" onclick="calculator(this)"></td></tr><tr><td><input type="button" value="1" onclick="calculator(this)"></td><td><input type="button" value="2" onclick="calculator(this)"></td><td><input type="button" value="3" onclick="calculator(this)"></td><td><input id="clear" type="button" value="AC" onclick="calculator(this)"></td></tr><tr><td><input type="button" value="4" onclick="calculator(this)"></td><td><input type="button" value="5" onclick="calculator(this)"></td><td><input type="button" value="6" onclick="calculator(this)"></td><td rowspan="2"><input type="button" value="=" onclick="calculator(this)"></td></tr><tr><td><input type="button" value="7" onclick="calculator(this)"></td><td><input type="button" value="8" onclick="calculator(this)"></td><td><input type="button" value="9" onclick="calculator(this)"></td></tr><tr><td><input type="button" value="0" onclick="calculator(this)"></td><td class="brand" colspan="3"><span>&copy;GUO</span></td></tr></table></div><script>function calculator(btn) {let num = btn.value;let show = document.getElementById("show");let n = parseInt(show.value);switch (num) {case "=":show.value = eval(show.value);break;case "AC":show.value = "0";break;case "←":if (show.value.length === 1) show.value = "0";else show.value = show.value.substring(0, show.value.length - 1);break;case "√":show.value = Math.sqrt(n);break;case "^2":show.value = n * n;break;case "^3":show.value = n ** 3;break;default:if (show.value.length === 1 && show.value === "0") show.value = num;else show.value += num;break;}}</script>
</body></html>

html、css、js实现普通计算器相关推荐

html+css+js实现科学计算器
代码地址如下: http://www.demodashi.com/demo/13751.html 项目描述纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有 ...
一节前端课：html+css+js做个计算器
QQ突然弹出来一个前端公开课的提示,由于一直想学前段的知识,点进去了,收获了一些东西,做个记录. 题目:计算器的实现技术:html+css+js 1 . body里放俩div,一个大的包一个小的,小 ...
html + css + js 实现简易计算器
使用LICEcap工具截取的效果图: 计算器页面实现: 为计算器的input输入框添加disabled="disabled"属性,防止从键盘中直接输入除小数点之外的非数字符号:设置 ...
绝对干货！纯用HTML+CSS+JS 编写的计算器应用
一道笔试题之前偶然看到一个公司的笔试题,题目如下: 用HTML5.CSS3.JavaScript,做一个网页,实现如下图形式计算器具体要求: 有且只有一个文件:index.html.不允许再有其他 ...
基于HTML/CSS/JS的年龄计算器 | 带有免费源码
html css制作计算器,使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧效果图: 代码如下,复制即可使用: /* 主体 */ .counter{ width: 396px; height: 486px; backg ...
使用html css js实现计算器
使用html css js实现计算器,开启你的计算之旅吧效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
html百度首页制作视频,韩顺平轻松搞定网页设计 html+css+js
韩顺平老师的教程影响着一代又一代的学子们,他的视频教程确实做的很经典,不论是java.php还是网页设计,都有出彩的地方.这里,小编给大家分享韩顺平老师的轻松搞定网页设计教程,绝对完整,全部存于百度网 ...
vue.js实现一个计算器
git:https://git.oschina.net/jjtHappy/js_caculator.git 为了学习vue.js,把一个基于js实现的计算器转换为vue.js单页应用模式. 此次实操旨 ...

html、css、js实现普通计算器

先看效果：

话不多说直接上代码

html、css、js实现普通计算器相关推荐

最新文章

热门文章