使用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:;
padding:;
} .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, 70, 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实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
- 项目:JS实现简易计算器案例
组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解 的 项目:JS实现简易计算器案例
- 用js制作简易计算器及猜随机数字游戏
<!doctype html><html><head> <meta charset="utf-8"> <title>JS ...
- js之简易计算器
<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生JS实现简易计算器
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS编写简易计算器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang=" ...
- JS实现简易计算器的7种方法
先放图(好吧比较挫) 方法一:最容易版 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
- html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
- JS简易计算器的实现,以及代码的优化
用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- YARN集群的mapreduce测试(一)
hadoop集群搭建中配置了mapreduce的别名是yarn [hadoop@master01 hadoop]$ mv mapred-site.xml.template mapred-site.xm ...
- WPF 实现ScrollViewer的垂直偏移滚动跳转
问题:考虑屏幕大小,一般都是会在表单问卷的页面使用ScrollViewer.问卷中问题漏填漏选时,在提交时校验不过,需要滚动跳转至漏填漏选项. 页面如下: 每个选项使用StackPanel,并对复选框 ...
- C#装箱和拆箱。
装箱:值类型-->引用类型. 拆箱:引用类型-->值类型 装箱:把值类型拷贝一份到堆里.反之拆箱. 具有父子关系 是拆装箱的条件之一. 所以: class Program { static ...
- JavaScript 图片弹框显示
function fnCreate(src) { /* 要创建的div的classname */ var ClassName = "thumb ...
- ABP框架 sql语句(转载)
ABP.Core实现SQL语句仓储,支持EF.Core兼容的数据库 来源:https://blog.csdn.net/qq_28699537/article/details/80522680?tds ...
- 【Java每日一题】20170327
20170324问题解析请点击今日问题下方的“[Java每日一题]20170327”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...
- 【转】hibernate 延迟加载
Hibernae 的延迟加载是一个非常常用的技术,实体的集合属性默认会被延迟加载,实体所关联的实体默认也会被延迟加载.hibernate 通过这种延迟加载来降低系统的内存开销,从而保证 Hiberna ...
- a dive in react lifecycle
背景:我在react文档里找生命周期的图,居然没有,不敢相信我是在推特上找到的... 正文 react v16.3 新生命周期: static getDerivedStateFromProps get ...
- javascript模块化编程-立即执行函数(IIFE)
IIFE 全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 语法 var module1 = (function(){ var _count = ...
- Linq 操作DataTable
class ClientStruct { public string ID = "ID"; public string Name = "Name"; publi ...