网页设计

简单的计算器代码

时间:2024-09-25 22:13:35 网页设计 我要投稿
  • 相关推荐

简单的计算器代码

  作为初学者能写出一个简单的程序再开心不过了。下面小编给大家介绍一个简单的计算器代码程序。

  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

  <title></title>

  <style type="text/css">

  #box{width: 295px; margin: 0 auto; text-align: justify; border: 1px solid #ddd; padding: 15px;}

  .d_num{display: inline-block; margin:  10px; width: 33px; height: 30px; border: 1px solid #ddd; text-align: center; line-height: 30px; cursor: pointer;}

  .sum{margin: 0 10px 10px; line-height: 30px; font-size: 20px;}

  #sum{width: 205px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}

  #process{width: 255px; height: 30px; padding: 0 5px; margin-left: 5px; font-size: 20px;}</style>

  <p id="box">

  <p class="sum">

  <input id="process" name="process" type="text" value="0" /></p>

  <p class="sum">

  SUM:<input id="sum" name="sum" type="text" value="0" /></p>

  <p>

  <span class="d_num" data-num="1">1</span> <span class="d_num" data-num="2">2</span> <span class="d_num" data-num="3">3</span> <span class="d_num" data-num="&lt;-">&lt;-</span> <span class="d_num" data-num="C">C</span></p>

  <p>

  <span class="d_num" data-num="4">4</span> <span class="d_num" data-num="5">5</span> <span class="d_num" data-num="6">6</span> <span class="d_num" data-num="*">*</span> <span class="d_num" data-num="/">/</span></p>

  <p>

  <span class="d_num" data-num="7">7</span> <span class="d_num" data-num="8">8</span> <span class="d_num" data-num="9">9</span> <span class="d_num" data-num="+">+</span> <span class="d_num" data-num="-">-</span></p>

  <p>

  <span class="d_num" data-num="0">0</span> <span class="d_num" data-num="00">00</span> <span class="d_num" data-num=".">.</span> <span class="d_num" data-num="%">%</span> <span class="d_num" data-num="=">=</span></p>

  </p>

  <script type="text/javascript">

  var $box = document.getElementById('box');

  var $sum = document.getElementById('sum');

  var $process = document.getElementById('process');

  var sum = 0, process = '', num1 = '', num2 = '', temp = '', statu = false;

  $box.onclick = function(e){

  var event = window.event || e;

  var ele = event.srcElement || event.target;

  var _className = ele.className;

  if(_className == 'd_num'){

  var num = ele.getAttribute('data-num');//点击的按钮对应的值

  var NotNum = isNaN(num);

  if(!NotNum || num == '.'){ //点击了数字

  if(!statu){ //还没点击过符号

  if(num1 == '0'){

  num1 = '';

  }

  num1 += num;

  process = num1;

  }else{ //已经点击过符号

  if(num2 == '0'){

  num2 = '';

  }

  num2 += num;

  process = num1 + temp + num2;

  }

  $process.value = process;

  }

  else{ //点击了符号

  if(num1 == ''){//非法操作

  return false;

  }

  if(num == 'C'){//归零

  num1 = '';

  num2 = '';

  process = '';

  temp = '';

  sum = '';

  $process.value = '0';

  $sum.value = '0';


更多相关文章推荐:

1.简单的计算器代码

2.纯css实现蓝色圆角效果水平导航菜单代码

3.如何使用Google-Code-Prettify 实现代码高亮功能

4.CSS如何实现中英文双语菜单效果代码

5.C语言中字符串和数字的相互转换实现代码分析

6.宽带连接出现651错误代码怎么办

7.php生成缩略图的'两种方法(代码)

8.Java开发代码性能优化是什么

9.JavaScript简单实现放大镜效果代码

10.PHP生成图片缩略图类示例代码  

  statu = false;

  return false;

  }

  if(num == '<-'){//退档

  if(sum != ''){

  return false;

  }

  if(num2 == ''){

  ;      num1 = num1.substring(0,num1.length-1);

  if(num1 == ''){

  num1 = '0';

  }

  process = num1;

  $process.value = process;

  }else{

  num2 = num2.substring(0,num2.length-1);

  if(num2 == ''){

  num2 = '0';

  }

  process = num1 + temp + num2;

  $process.value = process;

  }

  return false;

  }

  if(num2 != ''){//a&b

  if(num == '='){//元操作到此结束

  $process.value = process;

  }else{

  $process.value = process + num;

  }

  switch(temp){//元操作继续

  case '+' : sum = parseFloat(num1) + parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

  case '-' : sum = parseFloat(num1) - parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

  case '*' : sum = parseFloat(num1) * parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

  case '/' : sum = parseFloat(num1) / parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

  case '%' : sum = parseFloat(num1) % parseFloat(num2); $sum.value = sum; $process.value = process; num1 = sum + ''; num2 = ''; break;

  }

  }else{//a&?

  if(num == '='){

  return false;

  }

  $process.value = process + num;

  process = '';

  }

  if(num == '='){

  sum = '';

  statu = false;

  return false;

  }

  temp = num;//记录操作符

  statu = true;//已经触发操作状态

  }

  }

  };

  </script>


更多相关文章推荐:

1.简单的计算器代码

2.纯css实现蓝色圆角效果水平导航菜单代码

3.如何使用Google-Code-Prettify 实现代码高亮功能

4.CSS如何实现中英文双语菜单效果代码

5.C语言中字符串和数字的相互转换实现代码分析

6.宽带连接出现651错误代码怎么办

7.php生成缩略图的'两种方法(代码)

8.Java开发代码性能优化是什么

9.JavaScript简单实现放大镜效果代码

10.PHP生成图片缩略图类示例代码

【简单的计算器代码】相关文章:

JavaScript简单实现放大镜效果代码12-09

用计算器进行数的简单运算教案04-03

php编程实现简单的网页版计算器功能03-03

php语言字典代码03-18

计算器的认识和简单应用数学教案设计04-03

Java代码的基本知识03-29

php动态生成JavaScript代码03-30

PHP源代码方式详解11-17

关于循环的java代码示例04-03