见附件
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Calculator</title>
<style id="jsbin-css">
div, span {
margin: 0;
padding: 0;
font-weight: bold;
font: bold 16px Arial, sans-serif;
/*禁止选中文本*/
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
body {
background: radial-gradient(circle, #fff, #aaa);
background: -webkit-radial-gradient(circle, #fff, #aaa);
background: -o-radial-gradient(circle, #fff, #aaa);
background: -moz-radial-gradient(circle, #fff, #aaa);
background-size: cover;
}
#calculator {
width: 325px;
height: auto;
margin: 100px auto;
padding: 20px;
background: linear-gradient(#9dd2ea, #8bceec);
background: -o-linear-gradient(#9dd2ea, #8bceec);
background: -webkit-linear-gradient(#9dd2ea, #8bceec);
background: -moz-linear-gradient(#9dd2ea, #8bceec);
border-radius: 5px;
box-shadow: 0 7px 8px #0000ff
}
.keys, .head {
overflow: hidden;
}
.keys span, .clear {
float: left;
width: 66px;
height: 40px;
margin: 0 5px 10px 8px;
text-align: center;
line-height: 40px;
border-radius: 3px;
background: #eee;
box-shadow: 0 5px 1px #999;
cursor: pointer;
transition: all 0.3s ease;
}
.keys span:hover {
background: #87cefa;
box-shadow: 0 5px 1px #1e90ff;
color: #fff;
}
.keys .sign {
background: #fffacd;
}
.clear {
float: left;
background: #ffb6c1;
box-shadow: 0 5px 1px #ff86c1;
}
.clear:hover {
background: #ff96a1;
box-shadow: 0 5px 1px #ff4691;
color: #fff;
}
.show {
width: 213px;
height: 40px;
float: right;
margin: 0 16px 5px 0;
border-radius: 3px;
background: #999;
font-size: 20px;
line-height: 40px;
text-align: right;
padding-right: 10px;
box-shadow: inset 0 4px 5px #333;
}
</style>
</head>
<body>
<div id="calculator">
<div class="head">
<span class="clear">c</span>
<div class="show"></div>
</div>
<div class="keys">
<span>7</span>
<span>8</span>
<span>9</span>
<span class="sign">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="sign">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="sign">*</span>
<span>0</span>
<span>.</span>
<span>=</span>
<span class="sign">/</span>
</div>
</div>
<script>
window.onload = function () {
var oShow = getByClass("calculator", "show")[0];
var aNum = document.getElementById("calculator").getElementsByTagName("span");
for (var i = 0, iLen = aNum.length; i < iLen; i++) {
aNum[i].onclick = function () {
var oShowVal = oShow.innerHTML;
var oNumVal = this.innerHTML;
var num1, num2 = null;
num1 = oShowVal;
//判断按键
if (oNumVal == "c") {
oShow.innerHTML = "";
}
else if (oNumVal == "=") {
var oResult = eval(oShowVal);
console.log(oResult);
oShow.innerHTML = oResult==undefined?'0':oResult;
}
else {
oShow.innerHTML += oNumVal;
}
}
}
};
function getByClass(root, sClass) {
var obj = document.getElementById(root);
var arr = [];
var aItems = obj.getElementsByTagName("*");
for (var i = 0; i < aItems.length; i++) {
if (aItems[i].className == sClass) {
arr.push(aItems[i]);
}
}
return arr;
}
</script>
</body>
</html>
相关推荐
HTML5 模拟iphone IOS系统中的 Calculator 计算器特效，很漂亮的科学计算器，看看截图，相信你会喜欢的。这个计算器是早些年IOS系统中的风格，现在的风格可能更简洁一些了，不过我还是更喜欢本特效中的风格，很有...
"微信小程序计算器calculator.zip"是一个包含微信小程序源代码的压缩包，其中可能包含了实现一个计算器功能的所有必要文件。 在微信小程序中，开发者通常会用到以下技术知识点： 1. **WXML**：WXML（Weixin Markup...
标题 "Erlang_calculator.zip_计算器" 指示我们关注的是一个使用Erlang编程语言实现的计算器项目。然而，描述中的信息表明实际实现是通过HTML和JavaScript完成的，这可能是一个误解或者标题有误。描述提到了“爱尔兰...
在本项目中，“html+css+js实现简易计算器.zip”是一个包含HTML、CSS和JavaScript代码的压缩包，用于创建一个简单的在线计算器应用。这个计算器能够执行基本的数学运算，如加、减、乘、除，为初学者展示了前端开发中...
HTML计算器是一种基于网页的简单计算工具，它利用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript（一种脚本语言）技术来构建。这个项目中的压缩包可能包含了以下文件：`calculator.html`（HTML文件）、`...
HTML计算器是一种基于网页的简单计算工具，它利用HTML、CSS和JavaScript这三种核心技术来构建。HTML（HyperText Markup Language）负责页面的结构，CSS（Cascading Style Sheets）用于美化和布局，而JavaScript则...
4. **html5**：超文本标记语言第五版，提供基础结构，用于创建计算器的用户界面，包括按钮、输入框等元素。 5. **jQuery**：一个快速、简洁的JavaScript库，简化了JavaScript的DOM操作、事件处理、动画设计和Ajax...
5. `index.wxml`：计算器的主体结构，使用WXML来编写用户界面。 6. `index.js`：计算器的业务逻辑，包括按钮点击事件处理、计算逻辑等，用JavaScript编写。 7. `index.wxss`：计算器页面的样式表，负责布局和样式...
接着，我们需要创建计算器的主页面，比如命名为`calculator.wxml`和`calculator.wxss`。在`calculator.wxml`中，我们将构建计算器的UI布局，包括数字按钮、运算符按钮、显示屏等元素。使用WXML的`view`、`button`等...
1. `Calculator.html`：这是计算器的主页面，使用HTML标记语言构建了计算器的布局和结构。它可能包含了输入框、按钮以及结果显示区域等元素，并通过JavaScript事件监听来捕捉用户的点击行为，将这些行为转化为计算...
5. **错误处理**：为了提供良好的用户体验，计算器需要处理各种可能的错误，如除以零、非法输入等，并给出适当的提示。 6. **样式和布局**：尽管这里没有提到CSS，但实现一个用户友好的计算器界面通常需要CSS来控制...
本示例中的"LAB-applet-calculator.rar"是一个包含高级功能的计算器Applet项目。这个项目旨在展示如何使用Java来创建一个不仅具有基本计算功能，而且还包括一些高级计算特性的应用。 首先，我们需要理解Applet的...
在压缩包“calculator”中，可能包含了这三个计算器的HTML和JavaScript文件。用户可以直接在支持HTML和JavaScript的环境中运行这些文件，无需服务器，就能体验到计算器的功能。 总的来说，"计算器代码 js + html...
其次，"网页版简单计算器"这个文件可能是实际的计算器代码文件，它极有可能是一个JavaScript文件，比如命名为`calculator.js`。JavaScript是网页动态交互的核心，用于处理用户输入、更新DOM（文档对象模型）、执行...
"微信小程序实现iOS计算器weapp-calculator-master.zip" 是一个包含源代码的压缩包，用于教授如何使用微信小程序开发一个类似于iOS系统自带的计算器应用。 这个项目的核心知识点包括： 1. **微信小程序基础结构**...
在这个名为"HTML-calculator--project.zip_project calculator_肖颖哲_计算器_运算"的项目中，我们看到一个由肖颖哲开发的简易HTML计算器。这个计算器不仅提供了基本的四则混合运算，还增加了平方和开方的功能，以及...
Calculator.js 是一个基于HTML、CSS和JavaScript开发的SVG动画计算器项目。这个计算器使用现代Web技术来创建一个具有视觉吸引力和互动性的用户界面。SVG（Scalable Vector Graphics）是一种用于在网页上绘制图形的...
5. **用户界面**：HTML和CSS定义了计算器的外观和布局。ASP.NET Web Forms允许开发者使用控件直接创建用户界面，这些控件在客户端呈现为HTML元素。 6. **错误处理**：为了提供良好的用户体验，计算器还需要适当的...
【标题】"Calculator【纯JavaScript实现的网页计算器】"是一个基于Web的项目，它使用JavaScript这一客户端脚本语言，为用户提供了类似传统桌面计算器的功能。这个项目的核心目标是利用JavaScript的强大功能，在网页...
标题“Simple Calculator.zip”暗示了这是一个关于简单计算器的项目，使用JavaScript编程语言实现。JavaScript，通常简称为JS，是Web开发中的主要脚本语言，广泛用于网页和应用程序交互，为用户提供动态、实时的用户...