这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近用 javascript 写了一个简单的计算器,自己测试感觉还好, 代码都给了注释,非常不错,推荐大家学习。
最近用 javascript 写了一个简单的计算器,自己测试感觉还好,先给大家观赏下界面:
界面就是这样了,但是功能如何呢?
现在只是个简单的标准计算器,能进行加减乘除连续运算,以及求余运算。如果发生被除数为零的错误,下面会给出提示,就像这样:
自己不知道写的怎么样,但是对于新手来说,这肯定是一份大餐,里面可以接触到的东西不少,可以拿来学习。如果有高手看出里面的疏漏、错误等望不吝赐教,给予指点。
下面贴上代码,希望里面的注释足够多了。
js 部分:
- var num = 0,
- result = 0,
- numshow = "0";
- var operate = 0; //判断输入状态的标志
- var calcul = 0; //判断计算状态的标志
- var quit = 0; //防止重复按键的标志
- function command(num) {
- var str = String(document.calculator.numScreen.value); //获得当前显示数据
- str = (str != "0") ? ((operate == 0) ? str: "") : ""; //如果当前值不是"0",且状态为0,则返回当前值,否则返回空值;
- str = str + String(num); //给当前值追加字符
- document.calculator.numScreen.value = str; //刷新显示
- operate = 0; //重置输入状态
- quit = 0; //重置防止重复按键的标志
- }
- function dzero() {
- var str = String(document.calculator.numScreen.value);
- str = (str != "0") ? ((operate == 0) ? str + "00": "0") : "0"; //如果当前值不是"0",且状态为0,则返回当str+"00",否则返回"0";
- document.calculator.numScreen.value = str;
- operate = 0;
- }
- function dot() {
- var str = String(document.calculator.numScreen.value);
- str = (str != "0") ? ((operate == 0) ? str: "0") : "0"; //如果当前值不是"0",且状态为0,则返回当前值,否则返回"0";
- for (i = 0; i <= str.length; i++) { //判断是否已经有一个点号
- if (str.substr(i, 1) == ".") return false; //如果有则不再插入
- }
- str = str + ".";
- document.calculator.numScreen.value = str;
- operate = 0;
- }
- function del() { //退格
- var str = String(document.calculator.numScreen.value);
- str = (str != "0") ? str: "";
- str = str.substr(0, str.length - 1);
- str = (str != "") ? str: "0";
- document.calculator.numScreen.value = str;
- }
- function clearscreen() { //清除数据
- num = 0;
- result = 0;
- numshow = "0";
- document.calculator.numScreen.value = "0";
- }
- function plus() { //加法
- calculate(); //调用计算函数
- operate = 1; //更改输入状态
- calcul = 1; //更改计算状态为加
- }
- function minus() { //减法
- calculate();
- operate = 1;
- calcul = 2;
- }
- function times() { //乘法
- calculate();
- operate = 1;
- calcul = 3;
- }
- function divide() { //除法
- calculate();
- operate = 1;
- calcul = 4;
- }
- function persent() { //求余
- calculate();
- operate = 1;
- calcul = 5;
- }
- function equal() {
- calculate(); //等于
- operate = 1;
- num = 0;
- result = 0;
- numshow = "0";
- }
- //
- function calculate() {
- numshow = Number(document.calculator.numScreen.value);
- if (num != 0 && quit != 1) { //判断前一个运算数是否为零以及防重复按键的状态
- switch (calcul) { //判断要输入状态
- case 1:
- result = num + numshow;
- break; //计算"+"
- case 2:
- result = num - numshow;
- break; //计算"-"
- case 3:
- result = num * numshow;
- break;
- case 4:
- if (numshow != 0) {
- result = num / numshow;
- } else {
- document.getElementById("note").innerhtml = "被除数不能为零!";
- setTimeout(clearnote, 4000)
- }
- break;
- case 5:
- result = num % numshow;
- break;
- }
- quit = 1; //避免重复按键
- }
- else {
- result = numshow;
- }
- numshow = String(result);
- document.calculator.numScreen.value = numshow;
- num = result; //存储当前值
- }
- function clearnote() { //清空提示
- document.getElementById("note").innerHTML = "";
- }
html 部分:
- <!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表单操作(四) 简单计算器(二)
- </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:240px; 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:32px; height:32px;
- margin:5px; display:inline; line-height:32px; font-size:14px; background-color:#eaeaea;
- } #calculator li.tool{ background-color:#e2e2e2; } #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:200px; height:24px; line-height:24px; padding:4px; border:#e6e6e6
- 1px solid; border-bottom:#f2f2f2 1px solid; border-right:#f2f2f2 1px solid;
- margin:10px auto; direction:ltr; text-align:right; font-size:16px; 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>
- <script language="javascript">
- //此处插入上面的js代码
- </script>
- </head>
- <body>
- <div id="calculator">
- <div id="calcu-head">
- <span class="imyeah">
- ©
- <a href="http://www.cnblogs.com/imyeah/" target="_blank">
- I'm Yeah!
- </a>
- </span>
- <h6>
- 简单的计算器
- </h6>
- </div>
- <form name="calculator" action="" method="get">
- <div id="calcu-screen">
- <!--配置显示窗口,使用onfocus="this.blur();"避免键盘输入-->
- <input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur();"
- />
- </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="clearscreen()">
- C
- </li>
- <li onclick="command(4)">
- 4
- </li>
- <li onclick="command(5)">
- 5
- </li>
- <li onclick="command(6)">
- 6
- </li>
- <li class="tool" onclick="times()">
- ×
- </li>
- <li class="tool" onclick="divide()">
- ÷
- </li>
- <li onclick="command(1)">
- 1
- </li>
- <li onclick="command(2)">
- 2
- </li>
- <li onclick="command(3)">
- 3
- </li>
- <li class="tool" onclick="plus()">
- +
- </li>
- <li class="tool" onclick="minus()">
- -
- </li>
- <li onclick="command(0)">
- 0
- </li>
- <li onclick="dzero()">
- 00
- </li>
- <li onclick="dot()">
- .
- </li>
- <li class="tool" onclick="persent()">
- %
- </li>
- <li class="tool" onclick="equal()">
- =
- </li>
- </ul>
- </div>
- <div id="calcu-foot">
- <span id="note">
- </span>
- <span class="welcome">
- 欢迎使用javascript计算器!
- <a href="http://www.cnblogs.com/imyeah" target="_blank">
- 反馈
- </a>
- </span>
- </div>
- </form>
- </div>
- </body>
- </html>
PS:这里再为大家推荐两款本站的在线计算器,都是采用 js 实现,且功能强大,相信对于大家深入了解 JavaScript 数学运算及 web 设计会有所帮助:
来源: http://www.phperz.com/article/17/0716/282299.html