前端小项目（1）——算数计算器

最新推荐文章于 2024-03-09 10:20:52 发布

大海潮dsf

最新推荐文章于 2024-03-09 10:20:52 发布

阅读量452

点赞数

文章标签：前端 html5 javascript css3

本文链接：https://blog.csdn.net/dsfdaifeng/article/details/134226355

版权

文章目录

前言

大家好，我是学化工的海潮，分享一个前端练手小项目。这段小项目实现了一个简单的计算器功能，当按钮被点击时，根据按钮的值执行不同的操作，包括清空结果、进行计算和追加值到输入框。核心函数是事件监听器和eval()函数。

1、代码实现效果

计算功能，c有clear功能

2、HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Basic calculator</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
     <div class="calculator">
      <input type="text" id="result" readonly>
      <div class="buttons">
        <button class="clear">C</button>
        <button class="operator">/</button>
        <button class="operator">*</button>
        
        <button class="operator">-</button> 
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operator">+</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="equals"  class="operator">=</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="number">0</button>
        <button class="decimal">.</button>
        

      </div>
     </div>


     <script src="index.js"></script>
  </body>

多个按钮，注意按钮的类名

3、css代码

*{
  box-sizing: border-box;
  margin: 0;
}
.calculator{
  background-color: #f2f2f2;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
  border: solid 1px #ccc;
  box-shadow: 0 2px 5px rgba(0, 0,0, 0.3);
  border-radius: 5px;
  margin-bottom: 40px;
}

#result{
  width: 100%;
  padding: 10px;
  
 
  margin-top: 15px;
  font-size: 24px;
  border-radius: 5px;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0,0, 0.3);
}
.buttons{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-gap: 10px;
  margin-top: 10px;
}

button{
  padding: 10px;
  font-size: 24px;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0,0, 0.3);
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover{
  background-color: #ddd;
}
.clear{
  background-color: #ff4136;
}
.number,.decimal{
  background-color: #fff;

}
.operator{
  background-color: #0074d9;
  color:#fff;
}

.equals{
  background-color: #01ff70;
  color: #fff;
  grid-row: span 3;
}

4、JavaScript代码

const buttonsE1= document.querySelectorAll("button");
const inputFieldE1 =document.getElementById("result");



/* for(let i=0;i<buttonsE1.length;i++){
buttonsE1[i].addEventListener("click",()=>{
  const buttonValue =buttonsE1[i].textContent;
  console.log(buttonValue)
  if(buttonValue ==="C"){
    clearResult();
  }else if(buttonValue==="="){
    calculateResult();
  }else{
    appendValue(buttonValue);
  }

})
} */
buttonsE1.forEach((button)=>{
  button.addEventListener("click",()=>{
    const buttonValue =button.textContent;
    console.log(buttonValue)
    if(buttonValue ==="C"){
      clearResult();
    }else if(buttonValue==="="){
      calculateResult();
    }else{
      appendValue(buttonValue);
    }
  
  })
})


function clearResult(){
inputFieldE1.value="";
};

function calculateResult(){
  inputFieldE1.value=eval(inputFieldE1.value);
/*  const code ='console.log(inputFieldE1.value);';
 function a(code){
  code=Number(code);
 }
 a(); */



}

function appendValue(buttonValue){
  inputFieldE1.value+=buttonValue
};

5、代码分析

这段代码是一个简单的计算器应用程序的前端代码。下面解释一下代码的功能：

第一行代码通过 document.querySelectorAll("button") 选择所有的 <button> 元素，并将它们存储在 buttonsE1 变量中。
第二行代码通过 document.getElementById("result") 获取具有 id 为 "result" 的元素，并将其存储在 inputFieldE1 变量中。
注释部分是一个使用 for 循环的代码块，目前被注释掉了。它的作用是为每个按钮添加点击事件监听器。当按钮被点击时，根据按钮的值执行不同的操作。
接下来的代码块使用 buttonsE1.forEach 循环遍历所有的按钮，并为每个按钮添加点击事件监听器。当按钮被点击时，根据按钮的值执行不同的操作。
clearResult 函数用于清空结果，将输入框的值设置为空字符串。
calculateResult 函数用于计算结果，它使用 eval 函数来评估输入框中的表达式，并将结果赋值给输入框的值。
appendValue 函数用于将按钮的值追加到输入框的值后面。

这段代码实现了一个简单的计算器功能，当按钮被点击时，根据按钮的值执行不同的操作，包括清空结果、进行计算和追加值到输入框。

总结

提示：这里对文章进行总结：
这段小项目实现了一个简单的计算器功能，当按钮被点击时，根据按钮的值执行不同的操作，包括清空结果、进行计算和追加值到输入框。核心函数是事件监听器和eval()函数。eval函数把传过来的字符串进行解析后进行数学计算，得出结果。

有帮助点个关注哦😯😙😙

大海潮dsf

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端小项目（1）——算数计算器

大家好，我是学化工的海潮，分享一个前端练手小项目。这段小项目实现了一个简单的计算器功能，当按钮被点击时，根据按钮的值执行不同的操作，包括清空结果、进行计算和追加值到输入框。核心函数是事件监听器和eval()函数。
复制链接

扫一扫