小型计算器html+js代码

最新推荐文章于 2024-08-12 18:48:17 发布

nzstjhk

最新推荐文章于 2024-08-12 18:48:17 发布

阅读量1.9k

点赞数 3

分类专栏：小功能总结文章标签：计算器加减乘除 js

小功能总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

代码

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >计算器功能 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  style 
  > 
 
 
  table{ 
 
 
  border: 
  1px 
  solid 
  #ccc; 
 
 
  border-radius: 
  3%; 
 
 
  padding: 
  5px; 
 

   } 
 
 
  table tr td{ 
 
 
  width: 
  20px; 
 
 
  height: 
  20px; 
 
 
  padding: 
  5px; 
 
 
  text-align: 
  center; 
 
 
  line-height: 
  20px; 
 
 
  border: 
  1px 
  solid 
  #f9f9f9; 
 
 
  box-shadow: 
  0 
  0 
  3px 
  rgba( 
  0, 
  0, 
  0, 
  0.9); 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  table 
  align= 
  "center" 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  class= 
  "td_orange" 
  colspan= 
  "5" 
  id= 
  "content" 
  ></ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  class= 
  "td_orange" 
  colspan= 
  "5" 
  id= 
  "result" 
  ></ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >1 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >2 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >3 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >* 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >/ 
  </ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >4 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >5 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >6 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >+ 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >- 
  </ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >7 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >8 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >9 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >( 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >) 
  </ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  < 
  tr 
  > 
 
 
  < 
  td 
  class= 
  "td_orange" 
  onclick= 
  "appContent(this)" 
  >c 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >0 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >. 
  </ 
  td 
  > 
 
 
  < 
  td 
  onclick= 
  "appContent(this)" 
  >del 
  </ 
  td 
  > 
 
 
  < 
  td 
  class= 
  "td_orange" 
  onclick= 
  "appContent(this)" 
  >= 
  </ 
  td 
  > 
 
 
  </ 
  tr 
  > 
 
 
  </ 
  table 
  > 
 
 
  < 
  script 
  > 
 
 
  function 
  appContent( 
  td){ 
 
 
  //找到显示字符串等式的td标签  
 
 
  var 
  content = 
  document. 
  getElementById( 
  "content"); 
 
 
  //找到显示结果的td标签  
 
 
  var 
  result = 
  document. 
  getElementById( 
  "result"); 
 
 
  //获取字符串的等式  
 
 
  var 
  text = 
  td. 
  innerText; 
 
 
  //如果是删除键  
 
 
  if( 
  "del" == 
  text){ 
 
 
  if( 
  content. 
  innerText. 
  length > 
  0){ 
 
 
  //删除最后一个字符  
 
 
  content. 
  innerText = 
  content. 
  innerText. 
  substring( 
  0, 
  content. 
  innerText. 
  length- 
  1); 
 

   } 
 
 
  //如果是全部删除  
 

   } 
  else 
  if( 
  "c" == 
  text){ 
 
 
  content. 
  innerText = 
  ""; 
 
 
  //如果是按了等于号  
 

   } 
  else 
  if( 
  "=" == 
  text){ 
 
 
  var 
  resultText = 
  parse( 
  content. 
  innerText); 
 
 
  result. 
  innerText = 
  content. 
  innerText + 
  "=" + 
  resultText; 
 
 
  content. 
  innerText = 
  ""; 
 
 
  //除了上面三种情况,其他的都是尾加  
 

   } 
  else{ 
 
 
  content. 
  innerText = 
  content. 
  innerText + 
  text; 
 

   } 
 

   } 
 

 
  /**解析字符串的等式为一个正确的结果*/ 
 
 
  function 
  parse( 
  content){ 
 
 
  //寻找最后一个左括号  
 
 
  var 
  index = 
  content. 
  lastIndexOf( 
  "("); 
 
 
  //如果等式中有左括号  
 
 
  if( 
  index > - 
  1){ 
 
 
  //寻找右括号,从左括号的位置开始寻找  
 
 
  var 
  endIndex = 
  content. 
  indexOf( 
  ")", 
  index); 
 
 
 
 
  //如果等式中有右括号  
 
 
  if( 
  endIndex > - 
  1){ 
 
 
  //调用自己算出括号中的结果  
 
 
  var 
  result = 
  parse( 
  content. 
  substring( 
  index + 
  1, 
  endIndex)); 
 
 
  //然后继续调用自己,  
 
 
  //其实这里完成的工作就是"2+3+(2+3*2)"转化成了"2+3+8",也就是用括号中的结果替换括号所在位置  
 
 
  return 
  parse( 
  content. 
  substring( 
  0, 
  index) + ( 
  "" + 
  result) + 
  content. 
  substring( 
  endIndex + 
  1)) 
 

   } 
 

   } 
 
 
 
 
  index = 
  content. 
  indexOf( 
  "+"); 
 
 
 
 
  if( 
  index > - 
  1){ 
 
 
  return 
  parse( 
  content. 
  substring( 
  0, 
  index)) + 
  parse( 
  content. 
  substring( 
  index + 
  1)); 
 

   } 
 
 
 
 
  index = 
  content. 
  lastIndexOf( 
  "-"); 
 
 
 
 
  if( 
  index > - 
  1){ 
 
 
  return 
  parse( 
  content. 
  substring( 
  0, 
  index)) - 
  parse( 
  content. 
  substring( 
  index + 
  1)); 
 

   } 
 
 
 
 
  index = 
  content. 
  lastIndexOf( 
  "*"); 
 
 
 
 
  if( 
  index > - 
  1){ 
 
 
  return 
  parse( 
  content. 
  substring( 
  0, 
  index)) * 
  parse( 
  content. 
  substring( 
  index + 
  1)); 
 

   } 
 
 
 
 
  index = 
  content. 
  lastIndexOf( 
  "/"); 
 
 
 
 
  if( 
  index > - 
  1){ 
 
 
  return 
  parse( 
  content. 
  substring( 
  0, 
  index)) / 
  parse( 
  content. 
  substring( 
  index + 
  1)); 
 

   } 
 
 
 
 
  if( 
  "" == 
  content){ 
 
 
  return 
  0; 
 

   } 
  else{ 
 
 
  return 
  content - 
  1 + 
  1; 
 

   } 
 

   } 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 