1、界面显示
2、代码
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>潭州学院-计算器V1版</title>
<style type="text/css">
body{font-size:12px;font-family:Arial,Georgia,"Times New Roman",Times,serif;color:#555;text-align:center;background-color:#e2e2e2;}
h6{margin:0;font-size:12px;}
#calculator{width:94%;height:auto;overflow:hidden;margin:10px auto;border:#fff 1px solid;padding-bottom:10px;background-color:#f2f2f2;}
#calculator div{clear:both;}
#calculator ul{padding:0;margin:5px 14px;border:#fff 1px solid;height:auto;overflow:hidden}
#calculator li{list-style:none;float:left;width:14.43%;margin:0.5%;display:inline;line-height:32px;font-size:32px;background-color:#eaeaea;padding:2.28%;}
#calculator li.tool{background-color:#738FD8;}
#calculator li.D06A15{background-color:#D06A15;}
#calculator li:hover{background-color:#f9f9f9;cursor:pointer;}
#calculator li:active{background-color:#fc0;cursor:pointer;}
#calculator li.tool:active{background-color:#d8e8ff;cursor:pointer;}
#calcu-head{text-align:left;padding:10px 15px 5px;}
span.imyeah{float:right;color:#ccc;}
span.imyeah a{color:#ccc;}
.screen{width:97%;height:42px;line-height:42px;padding:4px;border:#e6e6e6 1px solid;border-bottom:#f2f2f2 1px solid;border-right:#f2f2f2 1px solid;margin:10px auto;direction:ltr;text-align:right;padding-right:20px;font-size:3em;color:#999;}
#calcu-foot{text-align:left;padding:10px 15px 5px;height:auto;overflow:hidden;}
span#note{float:left;width:210px;height:auto;overflow:hidden;color:red;}
span.welcome{clear:both;color:#999;}
span.welcome a{float:right;color:#999;}
</style>
</head>
<body>
<div id="calculator">
<div id="calcu-head"><span class="imyeah">© <a href="http://www.lovekeke.com/" target="_blank">lovekeke</a></span><h6>潭州学院计算器V1版</h6></div>
<form name="calculator" action="" method="get">
<div id="calcu-screen">
<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
<input type="text" name="numScreen" id="result" class="screen" value="0" onfocus="this.blur();" disabled="disabled" />
</div>
<div id="calcu-btn">
<ul> <!--配置按钮-->
<li onclick="command(7)">7</li>
<li onclick="command(8)">8</li>
<li onclick="command(9)">9</li>
<li class="tool" onclick="del()">←</li>
<li class="tool" onclick="clearzero()">C</li>
<li onclick="command(4)">4</li>
<li onclick="command(5)">5</li>
<li onclick="command(6)">6</li>
<li class="tool" onclick="op(3)">×</li>
<li class="tool" onclick="op(4)">÷</li>
<li onclick="command(1)">1</li>
<li onclick="command(2)">2</li>
<li onclick="command(3)">3</li>
<li class="tool" onclick="op(1)">+</li>
<li class="tool" onclick="op(2)">-</li>
<li onclick="command(0)">0</li>
<li onclick="dzero()">00</li>
<li onclick="dot()">.</li>
<li class="tool" onclick="op(5)">%</li>
<li class="tool D06A15" onclick="equal()">=</li>
</ul>
</div>
<div id="audioBox"></div>
<div id="calcu-foot">
<span id="note"></span>
<div id="audioBox">
<embed id="devUnknown" src="0.wav" width="0" height="0" loop="false" autostart="false"></embed>
</div>
<span class="welcome">欢迎使用潭州学院计算器！
<a href="http://www.lovekeke.com/" target="_blank">反馈</a>
</span>
</div>
</form>
</div>
<script type="text/javascript">
/*
实现思路：
1、获取鼠标点击的数字，并将该值赋值到显示区，同时去掉最前面的0
2、获取鼠标点击的运算符，并保存旧值
3、计算结果，并赋值到显示区
4、处理双0
5、处理小数点
6、处理退格
7、处理清空
8、播放音乐
*/
//获取显示区的DOM对象
var resultDom = document.getElementById("result");
//保存旧值
var oldNum = 0;
//保存运算符号
var opFlag = 0;
//小数点锁定标志
var dotFlag = true;
//获取鼠标点击的数字，并赋值到显示区
function command(num) {
var str = resultDom.value;
str = (str=="0") ? "" : str;
resultDom.value = str + num;
play(num);
}
//获取鼠标点击的运算符
function op(op) {
if(opFlag == 0) {
oldNum = resultDom.value;
resultDom.value = "";
opFlag = op;
}
dotFlag = true;
play("j");
}
//计算结果，并赋值到显示区
function equal() {
var result = 0;
var curVal = resultDom.value;
if(opFlag == 1) { //加法
result = oldNum*1 + curVal*1;
}else if(opFlag == 2) { //减法
result = oldNum*1 - curVal*1;
}else if(opFlag == 3) { //乘法
result = oldNum*1 * curVal*1;
}else if(opFlag == 4) { //除法
result = oldNum*1 / curVal*1;
}else if(opFlag == 5) { //取模
result = oldNum*1 % curVal*1;
}
resultDom.value = result;
opFlag = 0;
dotFlag = true;
play("r");
}
//处理双0
function dzero() {
var str = resultDom.value;
if(str == "0") {
return;
}
resultDom.value = str + "00";
play("j");
}
//处理小数点
function dot() {
if(dotFlag) {
var str = resultDom.value;
if(str.indexOf(".") == -1) {
resultDom.value = str + ".";
dotFlag = false;
}
}
play("j");
}
//处理退格
function del() {
var str = resultDom.value;
if(str != "0") {
var cstr = str.substring(0,str.length-1);
resultDom.value = cstr || 0;
dotFlag = true;
}
play("r");
}
//处理清空
function clearzero() {
resultDom.value = "0";
oldNum = 0;
opFlag = 0;
dotFlag = true;
play("r");
}
//播放音乐
function play(m) {
document.getElementById("audioBox").innerHTML = "<embed src='music/"+m+".wav' width='0' height='0'/>";
}
</script>
</body>
</html>
相关推荐
潭州软件学院的Java VIP系统基础学习课程涵盖了Java编程的核心概念和重要技术，旨在帮助学员扎实地掌握Java语言基础和面向对象编程。课程分为十个章节，深入浅出地讲解了从语言基础到高级特性的各个知识点。 首先，...
潭州软件学院的Java VIP系统基础学习课程涵盖了Java编程的基础到进阶知识，旨在帮助学员全面掌握这门广泛使用的计算机语言。以下是对课程内容的详细解释： 首先，课程从计算机语言的发展史开始，讲解Java的历史及其...
潭州软件学院的Java VIP系统基础学习课程涵盖了Java编程的核心概念和技术，旨在为学员提供全面的Java编程知识。课程内容丰富，深入浅出，适合初学者及有一定基础的学习者提升技能。 首先，课程从基础开始，讲解了...
潭州软件学院的Java VIP系统基础学习课程涵盖了从Java语言基础到高级特性的全面讲解，旨在帮助学员掌握Java编程的核心技能。以下是对各章节主要内容的详细说明： 1. **JavaSE概述**： - 学习Java的历史和发展，...
潭州软件学院的Java VIP系统基础学习课程是针对想要深入理解和掌握Java编程技术的学员设计的。本课程全面覆盖了Java的基础知识，旨在帮助学员建立起扎实的编程基础，为后续的高级开发技能学习打下坚实的基础。以下是...
潭州软件学院的Java VIP系统基础学习课程涵盖了Java编程的核心知识点，旨在帮助学员全面掌握Java编程基础和进阶技能。课程分为十章，每章都包含详细的理论讲解和实践项目，确保学员能够深入理解和应用所学知识。 第...
CAD室内设计施工图规范是室内设计师在绘制施工图时必须遵循的一套标准，它涉及到图形的组织、颜色、线型、图层、文字标注、尺寸标注等多个方面，以确保图纸清晰、准确、易于理解。以下是根据提供的内容详细解析的CAD...
JSP初级中级高级学习教程推荐JSP初级中级高级学习教程推荐JSP初级中级高级学习教程推荐JSP初级中级高级学习教程推荐JSP初级中级高级学习教程推荐JSP初级中级高级学习教程推荐JSP初级中级高级学习教程推荐JSP初级中级...
pbb格式加密视频提取，亲测有效，可提取潭州学院pbb格式Qt培训视频，发现csdn中没有相关资源，所以共享出来供大家使用。此文件版本不全，请大家不要下载，如需请下载本人上传的rar压缩格式文件，里面有32位和64位两...
潭州美术基础光影基础知识PPT学习教案.pptx
潭州教育：工业设计必须具备的十项技能.pdf
### 潭州99讲师节的科普 #### 背景介绍 潭州99讲师节是一项由潭州教育发起的重要活动，旨在表彰在在线教育领域作出突出贡献的教师们，并通过各种形式的活动来弘扬尊师重教的社会风尚。潭州教育作为一家专注于在线...
TZ的脚本辅助课程，从汇编零基础到windwos反汇编，在到做项目到实现一个完整的项目，有完整的源码
在3D建模软件3ds Max中，对齐工具是非常基础但至关重要的功能，它们能够帮助用户精确地调整和定位模型元素。以下是关于3ds Max中三种主要对齐工具的详细说明： 一、锁轴缩放 锁轴缩放是一种通过调整对象大小来实现...
关于java的GUI编程的示例，java进阶教程课后习题
《Windows程序设计》是一本深度探讨Windows操作系统下程序开发的经典教程。这门学科涉及的知识面广泛，涵盖了从基本的API调用到复杂的系统交互。在Windows程序设计中，开发者需要理解Windows操作系统的工作原理，...
### 软件测试工程师精英培训班知识点概览 #### 一、软件测试基础概念与重要性 1. **定义：**软件测试是评估一个软件产品，以确定它是否符合规定的质量标准的过程。 2. **目的：** - 检测软件中的缺陷或错误。...
【CSS基础学习】 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和外观。本视频教程是针对初学者设计的，旨在帮助新手快速掌握CSS的基本概念和实际应用。...
Java是一种广泛使用的面向对象的编程语言，由Sun Microsystems（现为Oracle公司的一部分）于1995年发布。它的设计目标是实现“一次编写，到处运行”，这得益于Java虚拟机（JVM）的存在，它允许Java程序在任何支持...