js css 实现简单的计算器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+CSS3实现计算器特效</title> <link type="text/css" rel="stylesheet" href="css/datouwang.css" /> </head>
<body> <div id="calculator">
<!-- Screen and clear key -->
<div class="top">
<span class="clear">C</span>
<div class="screen"></div>
</div>
<div class="keys">
<!-- operators and other keys -->
<span>7</span>
<span>8</span>
<span>9</span>
<span class="operator">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="operator">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="operator">÷</span>
<span>0</span>
<span>.</span>
<span class="eval">=</span>
<span class="operator">x</span>
</div>
</div>
<script src="js/datouwang.js" type="text/javascript"></script> </body>
</html>
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false; // Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
// Get the input and button values
var input = document.querySelector('.screen');
var inputVal = input.innerHTML;
var btnVal = this.innerHTML; // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
// If clear key is pressed, erase everything
if(btnVal == 'C') {
input.innerHTML = '';
decimalAdded = false;
} // If eval key is pressed, calculate and display the result
else if(btnVal == '=') {
var equation = inputVal;
var lastChar = equation[equation.length - 1]; // Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
equation = equation.replace(/x/g, '*').replace(/÷/g, '/'); // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
if(operators.indexOf(lastChar) > -1 || lastChar == '.')
equation = equation.replace(/.$/, ''); if(equation)
input.innerHTML = eval(equation); decimalAdded = false;
} // Basic functionality of the calculator is complete. But there are some problems like
// 1. No two operators should be added consecutively.
// 2. The equation shouldn't start from an operator except minus
// 3. not more than 1 decimal should be there in a number // We'll fix these issues using some simple checks // indexOf works only in IE9+
else if(operators.indexOf(btnVal) > -1) {
// Operator is clicked
// Get the last character from the equation
var lastChar = inputVal[inputVal.length - 1]; // Only add operator if input is not empty and there is no operator at the last
if(inputVal != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += btnVal; // Allow minus if the string is empty
else if(inputVal == '' && btnVal == '-')
input.innerHTML += btnVal; // Replace the last operator (if exists) with the newly pressed operator
if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
// Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
input.innerHTML = inputVal.replace(/.$/, btnVal);
} decimalAdded =false;
} // Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
else if(btnVal == '.') {
if(!decimalAdded) {
input.innerHTML += btnVal;
decimalAdded = true;
}
} // if any other key is pressed, just append it
else {
input.innerHTML += btnVal;
} // prevent page jumps
e.preventDefault();
}
}
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* Better text styling */
font: bold 14px Arial, sans-serif;
} /* Finally adding some IE9 fallbacks for gradients to finish things up */ /* A nice BG gradient */
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
} /* Using box shadows to create 3D effects */
#calculator {
width: 325px;
height: auto; margin: 100px auto;
padding: 20px 20px 9px; background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
} /* Top portion */
.top span.clear {
float: left;
} /* Inset shadow on the screen to create chinaz */
.top .screen {
height: 40px;
width: 212px; float: right; padding: 0 10px; background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2); /* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
} /* Clear floats */
.keys, .top {overflow: hidden;} /* Applying same to the keys */
.keys span, .top span.clear {
float: left;
position: relative;
top: 0; cursor: pointer; width: 66px;
height: 36px; background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2); margin: 0 7px 11px 0; color: #888;
line-height: 36px;
text-align: center; /* prevent selection of text inside keys */
user-select: none; /* Smoothing out hover and active states using css3 transitions */
transition: all 0.2s ease;
} /* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
background: #FFF0F5;
margin-right: 0;
} .keys span.eval {
background: #f1ff92;
box-shadow: 0px 4px #9da853;
color: #888e5f;
} .top span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
} /* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
} .keys span.eval:hover {
background: #abb850;
box-shadow: 0px 4px #717a33;
color: #ffffff;
} .top span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
} /* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
} .keys span.eval:active {
box-shadow: 0px 0px #717a33;
top: 4px;
} .top span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}
版权声明：本文博主原创文章，博客，未经同意不得转载。
js css 实现简单的计算器的更多相关文章
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- JS+CSS+HTML简单计算器
<!doctype html> <html> <head> <title>计算器</title> <meta charset=&quo ...
- JS CSS 网页 简单 右侧 悬浮
<!--右侧效果--> <script> $().ready(function() { $(".orm").hover(function() { $(thi ...
- 用JS,做一个简单的计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g ...
- js+css制作简单的轮播图带有定时功能
用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- js+css实现简单下拉菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- js制作简单的计算器
学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...
- JS+css滑动菜单简单实现
JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...
随机推荐
- Android车载导航的一些困境
车载导航从最初的用解码芯片,过渡到用WinCE系统,已经形成了一个较大的产业.车载导航使用上的一些大原则,基本上被固定了下来.如今WinCE走到了尽头,Android车载导航開始发力,但由于Andro ...
- 关于JS的面向对象总结
什么是面向对象: 对象由两部分构成:属性 和 方法: 面向对象的特点: 1.封装:对于相同功能的代码,放在一个函数中,以后再用到此功能,只需要调用即可,无需再重写:避免大量冗余代码: 专业话说:低耦合 ...
- 【Codeforces Round #442 (Div. 2) A】Alex and broken contest
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 注意是所有的名字里面,只出现了其中某一个名字一次. [代码] #include <bits/stdc++.h> usin ...
- Scala基础知识（二）
1.条件表达式 object ConditionDemo { def main(args: Array[String]) { val x = //判断x的值,将结果赋给y val y = ) //打印 ...
- Linux_Shell初级编程入门
从程序员的角度来看, Shell本身是一种用C语言编写的程序,从用户的角度来看,Shell是用户与Linux操作系统沟通的桥梁.用户既可以输入命令执行,又可以利用 Shell脚本编程,完成更加复杂的操 ...
- UVA 11367 - Full Tank? dijkstra+DP
传送门:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...
- Oracle空间数据库的备份与恢复
大型GIS系统,存储.管理海量(TB级)空间数据时,数据库备份变的尤其重要.这里随笔说说冷备份的一种方法. 基于ArcSDE.Oracle空间库的冷备份: (1) 在数据入库工作后或者更新变动较大时, ...
- WCF REST 基础教程
概述 Representational State Transfer(REST)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格. 因此REST是设计风格而不是标准,R ...
- [WPF自定义控件库]排序、筛选以及高亮
1. 如何让列表的内容更容易查找 假设有这么一个列表(数据源在本地),由于内容太多,要查找到其中某个想要的数据会比较困难.要优化这个列表,无非就是排序.筛选和高亮. 改造过的结果如上. 2. 排序 在 ...
- axios采坑之路
POST请求设置Content-Type 由于后端采用的是form表单形式上送参数,需要设置Content-Type axios设置如下 const _axios = axios.create(con ...