使用html+css+js实现简易计算器

发布时间:2021-01-22 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了使用html+css+js实现简易计算器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用html+css+js实现简易计算器,效果图如下:

使用html+css+js实现简易计算器

html代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>calculator</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/JavaScript" src="contain.js"></script>

<title>Document</title>

</head>

<body>

<div class="calculator">

<form name="calculator">

<input type="text" id="display" value="">

<br>

<input type="button" class="btn number txt" value="TYNAM">

<input type="button" id="clear" class="btn number" value="AC" onclick="cleardisplay();">

<input type="button" class="btn number" value="<-" onclick="del();">

<input type="button" class="btn operator" value="/" onclick="get(this.value);">

<br>

<input type="button" class="btn number" value="7" onclick="get(this.value);">

<input type="button" class="btn number" value="8" onclick="get(this.value);">

<input type="button" class="btn number" value="9" onclick="get(this.value);">

<input type="button" class="btn operator" value="*" onclick="get(this.value);">

<br>

<input type="button" class="btn number" value="4" onclick="get(this.value);">

<input type="button" class="btn number" value="5" onclick="get(this.value);">

<input type="button" class="btn number" value="6" onclick="get(this.value);">

<input type="button" class="btn operator" value="+" onclick="get(this.value);">

<br>

<input type="button" class="btn number" value="1" onclick="get(this.value);">

<input type="button" class="btn number" value="2" onclick="get(this.value);">

<input type="button" class="btn number" value="3" onclick="get(this.value);">

<input type="button" class="btn operator" value="-" onclick="get(this.value);">

<br>

<input type="button" class="btn number" value="0" onclick="get(this.value);">

<input type="button" class="btn number" value="." onclick="get(this.value);">

<input type="button" class="btn operator equal" value="=" onclick="calculates();">

</form>

</div>

</body>

</html>

CSS代码如下:

* {

border: none;

font-family: 'Open Sans',sans-serif;

margin: 0;

padding: 0;

}

.calculator {

background-color: #fff;

height: 600px;

margin: 50px auto;

width: 600px;

}

form {

background-color: rgb(75,70,71);

padding: 5px 1px auto;

width: 245px;

}

.btn {

outline: none;

cursor: pointer;

font-size: 20px;

height: 45px;

margin: 5px 0 5px 10px;

width: 45px;

}

.btn:first-child {

margin: 5px 0 5px 10px;

}

#display {

outline: none;

background-color: #dededc;

color: rgb(75,71);

font-size: 40px;

height: 47px;

text-align: right;

width: 224px;

margin: 10px 10px auto;

}

.number {

background-color: rgb(143,140,140);

color: #dededc;

}

.operator {

background-color: rgb(239,141,49);

color: #ffffff;

}

.equal{

width: 105px;

}

.txt{

font-size:12px;

background: none;

}

JS代码如下:

/* display clear */

function cleardisplay() {

document.getElementById("display").value = "";

}

/* del */

function del() {

var numb = "";

numb = document.getElementById("display").value;

for(i=0;i<numb.length;i++)

{

document.getElementById("display").value = numb.substring(0,numb.length-1);

if(numb == '')

{

document.getElementById("display").value = '';

}

}

}

/* recebe os valores */

function get(value) {

document.getElementById("display").value += value;

}

/* calcula */

function calculates() {

var result = 0;

result = document.getElementById("display").value;

document.getElementById("display").value = "";

document.getElementById("display").value = eval(result);

};

总结


以上是前端之家为你收集整理的使用html+css+js实现简易计算器全部内容,希望文章能够帮你解决使用html+css+js实现简易计算器所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。