javascript实现计算器功能

来源：互联网发布：linux 查看用户数编辑：程序博客网时间：2024/05/21 09:10

javascript计算器：顾名思义，就是在javascript中实现各种计算功能。

主要分为三个部分：

（1）HTML代码，设计页面框架。将目标放入在容器中，设置ID！

<!DOCTYPE html PUBLIC "-//W3C//Dli XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dli/xhtml1-transitional.dli"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>javascript仿windows计算器</title><link rel="stylesheet" type="text/css" href="css/style.css" /><script type="text/javascript" src="js/script.js"></script></head><body><div id="counter"><div id="counter_content"><h3><input id="input1" type="text" value="0" /></h3><ul><li>7</li><li>8</li><li>9</li><li>+</li><li>4</li><li>5</li><li>6</li><li>-</li><li>1</li><li>2</li><li>3</li><li>×</li><li>0</li><li>C</li><li>=</li><li>÷</li></ul></div><div id="bg"></div></div></body></html>

注：如上所示

（2）设计css样式，使页面更加美化。主要知识点为定位，覆盖（hover）

* {padding: 0;margin: 0;}li {list-style: none;}body {background: #00779e;}#counter {width: 500px;height: 420px;margin: 50px auto 0;position: relative;}#counter h2 {line-height: 42px;padding-left: 15px;font-size: 14px;font-family: arial;color: #FFF;}#counter a {font-weight: normal;text-decoration: none;color: #FFF;}#counter a:hover {text-decoration: underline;}#bg {width: 280px;height: 200px;border: 3px solid #004f69;background: #009acd;filter: alpha(opacity=80);opacity: 0.8;position: absolute;left: 50%;top: 115px;margin-left: -141px;}#counter_content {width: 250px;position: absolute;top: 130px;left: 130px;z-index: 1;}#counter_content h3 {margin-bottom: 10px;}#counter_content h3 input {border: none;width: 223px;height: 30px;line-height: 30px;padding: 0 10px;background: url(../images/ico.png) no-repeat;text-align: right;color: #333;font-size: 14px;font-weight: bold;}#counter_content ul {width: 250px;}#counter_content li {width: 60px;height: 30px;line-height: 30px;float: left;background: url(../images/ico.png) no-repeat -303px 0;text-align: center;color: #fff;cursor: pointer;margin: 0 1px 4px 0;}#counter_content .active {background: url(../images/ico.png) no-repeat -244px 0;}#counter p {width: 500px;position: absolute;bottom: 20px;left: 0;color: #FFF;text-align: center;font-size: 12px;}

注：如上所示!

（3）javascript实现基本的加减乘除，取消，置0！

var sNum1 = '';var sOpr = '';var bNeedClear = false; //是否需要清除输入框中已有的内容function calc(iNum1, iNum2, sOpr) {var iResult = 0;switch (sOpr) {case '×':iResult = iNum1 * iNum2;break;case '+':iResult = iNum1 + iNum2;break;case '-':iResult = iNum1 - iNum2;break;case '÷':iResult = iNum1 / iNum2;break;default:iResult = iNum2;}return iResult;}function doInput() {var oInput = document.getElementById('input1'); //获取var sHtml = this.innerHTML.replace(' ', '');switch (sHtml) {case '=':oInput.value = calc(parseInt(sNum1), parseInt(oInput.value), sOpr);sNum1 = '';sOpr = '';bNeedClear = true;break;case '+':case '-':case '×':case '÷':bNeedClear = true;if (sNum1.length != 0) {oInput.value = calc(parseInt(sNum1), parseInt(oInput.value), sOpr);}sOpr = sHtml;sNum1 = oInput.value;break;case 'C':oInput.value = '0';sNum1 = '';sOpr = '';break;default: //数字if (bNeedClear) {oInput.value = parseInt(sHtml, 10);bNeedClear = false;} else {oInput.value = parseInt(oInput.value + sHtml, 10);}break;}}window.onload = function() {var aLi = document.getElementsByTagName('li');var i = 0;for (i = 0; i < aLi.length; i++) {aLi[i].onmousedown = doInput;aLi[i].onmouseover = function() {this.className = 'active';};aLi[i].onmouseout = function() {this.className = '';};}(function() {var oS = document.createElement('script');oS.type = 'text/javascript';oS.src = 'http://blog.csdn.net/oneFT?ref=toolbar‘;document.body.appendChild(oS);})();};

本文主要是使用javascript函数操作，实现基本的计算功能！

阅读全文

0 0