见附件
源码:
<!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开发中的主要脚本语言,广泛用于网页和应用程序交互,为用户提供动态、实时的用户...