<!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 实现简单的计算器的更多相关文章

  1. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  2. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  3. JS+CSS+HTML简单计算器

    <!doctype html> <html> <head> <title>计算器</title> <meta charset=&quo ...

  4. JS CSS 网页 简单 右侧 悬浮

    <!--右侧效果--> <script> $().ready(function() { $(".orm").hover(function() { $(thi ...

  5. 用JS,做一个简单的计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8">   <title&g ...

  6. js+css制作简单的轮播图带有定时功能

    用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  7. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  8. js制作简单的计算器

    学着做了一个简单的计算器!记录记录!哈哈 <!DOCTYPE html> <html> <head> <title>简单的计算器</title&g ...

  9. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

随机推荐

  1. Android应用开发-小巫CSDN博客client之获取评论列表

    Android应用开发-小巫CSDN博客客户端之获取评论列表 上一篇博客介绍了博文具体内容的业务逻辑实现,本篇博客介绍小巫CSDN博客客户端的最后一项功能.获取评论列表,这个功能的实现跟前面获取文章列 ...

  2. redis 模糊删除实现

    redis 没有直接提供模糊删除的实现,我们可以根据现有的指令进行组合实现: import java.util.Arrays; import java.util.Set; import javax.a ...

  3. 芯片TPS76030、TPS76032、TPS76033、TPS76038、TPS76050 电源芯片

    下图是从网上摘出来的图片:TPS76033 它的作用就是改变电压: 输入电压:3.5V到16V       通过芯片的处理后     输出电压:3.3V 要学会看图,从中提取有用的信息 再看一个数据手 ...

  4. 【AtCoder Beginner Contest 074 A】Bichrome Cells

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> using n ...

  5. orabbix自定义监控oracle

    前提:安装orabbix 好后能正常运行, 检验条件(1). 最新数据有数据  (2).图形有显示 (3).日志不报错 /opt/orabbix/logs/orabbix.log   添加方法: 1. ...

  6. pcb过孔盖油

    pcb的过孔应该盖油,,这样,两个距离比较紧的过孔就不会在焊接的时候短路了,尤其是手工焊接小件的时候.

  7. 在云服务器上(CentOS)上安装Node

    今天手抖,买了台云服务器,本人对服务器啥的基本不懂,linux命令基本靠度娘,所以连装个node环境都历经坎坷,搞了一下午终于搞好了,记录一下: 第一步:当然是先登录服务器了,打开命令行窗口,输入: ...

  8. u-boot-2011.06在基于s3c2440开发板的移植之引导内核与加载根文件系统

    http://www.linuxidc.com/Linux/2012-09/70510.htm  来源:Linux社区  作者:赵春江 uboot最主要的功能就是能够引导内核启动.本文就介绍如何实现该 ...

  9. Linux 系统 杀Oracle 进程

    Linux 系统 杀Oracle 进程 杀掉进程用此方法比较好,能保证杀得干净,而不是用SQL  alter system kill kill -9 `ps -ef|grep "oracle ...

  10. jsp页面无法解析EL表达式问题

    Servlet版本的问题.原来Servlet中可以设定是否解析EL表达式,只有2.4版本的Servlet默认是解析EL表达式的,而其他版本是默认不解析EL表达式.于是把web.xml中使用的2.5版本 ...