JS实现简易计算器

2024-05-06 15:44:28

字体：大中小

来源：转载

供稿：网友

用JS实现简易计算器，供大家参考，具体内容如下

首先创建结构和样式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    body{      margin:0;      padding:0;      background-color: #abcdef;    }    .cal{      width:560px;      height:100px;      margin:0 auto;      padding-top:300px;    }  </style></head><body>  <div class="cal">    <p>      <input type="text" class="num1" value="1">      <span class="sign">+</span>      <input type="text" class="num2" value="1">      <span>=</span>      <span class="res">2</span>    </p>    <p>      <input type="button" value="+">      <input type="button" value="-">      <input type="button" value="*">      <input type="button" value="/">    </p>        </div><script></script></body></html>

然后添加Java script

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    body{      margin:0;      padding:0;      background-color: #abcdef;    }    .cal{      width:560px;      height:100px;      margin:0 auto;      padding-top:300px;    }  </style></head><body>  <div class="cal">    <p>      <input type="text" class="num1" value="1">      <span class="sign">+</span>      <input type="text" class="num2" value="1">      <span>=</span>      <span class="res">2</span>    </p>    <p>      <input type="button" value="+" class="btn">      <input type="button" value="-" class="btn">      <input type="button" value="*" class="btn">      <input type="button" value="/" class="btn">    </p>        </div><script>  var cal=document.querySelector(".cal");  var num1=cal.querySelector(".num1");  var num2=cal.querySelector(".num2");  var sign=cal.querySelector(".sign");  var res=cal.querySelector(".res");  var btns=cal.querySelectorAll(".btn");  btns[0].onclick=add;  btns[1].onclick=subtract;  btns[2].onclick=multiply;  btns[3].onclick=divide;  function add(){    sign.innerHTML="+";    //由于DOM获取到的值都是字符串形式，因此进行操作时需要先转为number类型    res.innerHTML=Number(num1.value)+Number(num2.value);  }  function subtract(){    sign.innerHTML="-";    res.innerHTML=Number(num1.value)-Number(num2.value);  }  function multiply(){    sign.innerHTML="*";    res.innerHTML=Number(num1.value)*Number(num2.value);    }  function divide(){    sign.innerHTML="/";    res.innerHTML=Number(num1.value)/Number(num2.value);    }</script></body></html>

上一篇：node.js中module模块的功能理解与用法实例分析

下一篇：Javascript操作select控件代码实例

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注