HTML+CSS+JS实现计算机功能

本文运用前端代码实现一个简单的计算器界面，并通过JS实现了基本的运算功能。（加、减、乘、除、清屏/退格、取余、取倒）需要源代码的可以加下面的QQ群，里面有各种学习资料，期待大家的加入！

点我进群一起学习交流！(群里有许多的学习资料，我做过的一些网页我都上传在群里了，需要的直接下载就可以了)

QQ群:722384575

1.编写前端界面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的计算器</title>
<style>
.containor{
border:1px solid black;
background-color: #fafafa;
height: 380px;
width: 296px;
margin: auto;
margin-top: 40px;
}
.top{
background-color: lightgray;
height: 30px;
}
a{
display: block;
float: left;
font-size: 8px;
height: 26px;
padding: 0 6px;
margin-left: 6px;
line-height: 26px;
}
a:hover{
background-color: dimgray;
color: white;
cursor: default;
}
.input{
width: 86%;
height:60px;
padding: 4px;
margin: 0 auto;
margin-top: 12px;
}
.input:focus{
outline: none;
}
button{
width: 50px;
height: 30px;
margin: 2px;
text-align: center;
font-size: 10px;
border: 0.5px solid gray;
}
button:hover{
border: 1px solid gray;
background-color: #ffaa55;
outline: none;
}
.bottom{
width: 100%;
height: 30px;
background-color:lightgray;
color: white;
position: relative;
margin-top: 56px;
}
</style>
</head>
<body>
<div class="containor">
<div class="top">
<a>查看（V）</a>
<a style="margin-left: 40px;">编辑（E）</a>
<a style="margin-left: 40px;">帮助（H）</a>
</div>
<div style="text-align: center">
<input id="cin" class="input">
</div>
<div style="margin-left: 2px;">
<div style="margin:20px 10px;height:160px;">
<div style="float: left;">
<div>
<button>MC</button><button>MR</button><button>MS</button><button>M+</button><button>M-</button><br>
<button>BK</button><button>CE</button><button>C</button><button >(</button><button>)</button><br>
<button>7</button><button>8</button><button>9</button><button >*</button><button>/</button><br>
<button>4</button><button>5</button><button>6</button><button >%</button><button>1/x</button><br>
</div>
<div style="float: left;">
<button>1</button><button>2</button><button>3</button><button>-</button><br>
<button style="width: 104px">0</button><button>.</button><button>+</button>
</div>
<div style="float: left;">
<button style="height: 64px;margin-top: 2px">=</button>
</div>
</div>
</div>
</div>
<div class="bottom">
</div>
</div>
</body>
</html>

界面如下：

2.通过JS实现计算器功能

在需要实现功能的地方添加相应的函数点击事件

<button onclick="back1()">BK</button><button onclick="clearerr()">CE</button><button onclick="clear1()">C</button><button onclick="inputStr('(')">(</button><button onclick="inputStr(')')">)</button><br>
<button onclick="inputStr(7)">7</button><button onclick="inputStr(8)" >8</button><button onclick="inputStr(9)">9</button><button onclick="inputStr('*')">*</button><button onclick="inputStr('/')">/</button><br>
<button onclick="inputStr(4)">4</button><button onclick="inputStr(5)">5</button><button onclick="inputStr(6)">6</button><button onclick=inputStr('%')>%</button><button onclick="reciprocal()">1/x</button><br>
<button onclick="inputStr(1)">1</button><button onclick="inputStr(2)">2</button><button onclick="inputStr(3)">3</button><button onclick="inputStr('-')">-</button>
<button onclick="inputStr(0)">0</button><button onclick="inputStr('.')">.</button><button onclick="inputStr('+')">+</button>
<button onclick="equal()">=</button>

对函数进行初始化

<script>
window.οnlοad=function(){
// 初始化内容
var res = eval("(1+4)*2");
console.log(res);
//打印进行测试
}
</script>

实现输入框的输入（数字、小数点、运算符、括号）

<input id="cin" class="input">
<script>
function inputStr(c) {
var cin = document.getElementById("cin");
var val = cin.value + c;
cin.value = val;
}
</script>

等于号的实现

function equal() {
var cin = document.getElementById("cin");
var val = cin.value;
var res = eval(val);
cin.value = res;
}

清屏C 、退格BK、错误回退CE的实现

function clear1() {
var cin = document.getElementById("cin");
cin.value = "";
// if(cin.value.length>0){
// document.getElementById("cin").value = "";
// }
}
function back1() {
var cin = document.getElementById("cin");
cin.value = cin.value.substr(0,cin.value.length -1);
}
function clearerr() {
var cin = document.getElementById("cin");
var val = cin.value;
var index = val.lastIndexOf("-");
if(index===-1){
index = val.lastIndexOf("+");
}
if(index===-1){
index = val.lastIndexOf("*");
}
if(index===-1){
index = val.lastIndexOf("/");
}
if(index!==-1){
val = val.substring(0,index+1);
}
cin.value = val;
}

倒数的实现

function reciprocal() {
var cin = document.getElementById("cin");
var rst = 1/cin.value;
cin.value = rst;
}

目前查看、编辑、帮助以及按钮的首行功能还未实现，可自行添加。

HTML+CSS+JS实现计算机功能相关推荐

html+css+js实现抽奖功能
html+css+js实现抽奖功能一.代码 <!DOCTYPE html> <html lang="en"> <head><meta c ...
前端基础知识面经大全（含html/css/js/es6/计算机基础）
目录参考: https://blog.csdn.net/henucm/article/details/105755073 一.HTML 1.对HTML语义化的理解 2.src和href的区别 3.D ...
HTML,CSS,JS完成购物车功能
这是我们要完成的购物车界面初始状态,当我选中某件商品时,总数量栏,总价栏显示默认数量和总价. 当我点击全选按钮时,所有的复选框都要被我选到.当我取消全选按钮时,所有商品都要取消选中状态. 当购物车处 ...
Html+css+js实现放大镜功能（详细完整代码）
通过将鼠标指向指定的图片,将鼠标移动到图片时,显示一个透明的小区域,然后将小区域的部分放大,查看细节. 运行效果: 详细代码: <!DOCTYPE html> <html>& ...
html用js计算显示,html+css+js实现计算器功能
/* 主体 */ .counter{ width: 396px; height: 486px; background-color: #F2F2F2; border: 1px solid #C2C3C6 ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
计算机毕设网页设计源码——HTML+CSS+JS+Bootstrap在线音乐试听播放网站模板
HTML5期末大作业:HTML+CSS+JS+Bootstrap在线音乐试听播放网站模板(24页) 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材 ...

HTML+CSS+JS实现计算机功能

1.编写前端界面

2.通过JS实现计算器功能

HTML+CSS+JS实现计算机功能相关推荐

最新文章

热门文章