没钱买计算器？程序员自己写一个

今天和大家分享如何用JavaScript实现计算器功能

上代码

首先是CSS部分：

 input{
 display: block;
 border-radius: 20px;
 margin-bottom: 15px;
 }
 body{
 font-family: 华文行楷; 
 }
 button{
 margin-right: 10px;
 }
 .button{
 padding-left: 18px;
 }

接下来是HTML：

 

 数字一
 数字二
 结果
 

 

 +
 
 -
 *
 /
 

最后是script：

function add(){
 var number1=Number(document.querySelector(".number1").value);
// 获取number1的value值
 var number2=Number(document.querySelector(".number2").value);
// 获取number2的value值 
 var numberA=document.querySelector(".number3");
// 定义number3的value值
 numberA.value=number1+number2;
// 把计算结果赋给number3的value值
 }
 function del(){
 var number1=Number(document.querySelector(".number1").value);
 var number2=Number(document.querySelector(".number2").value);
 var numberB=document.querySelector(".number3");
 numberB.value=number1-number2;
 }
 function cheng(){
 var number1=Number(document.querySelector(".number1").value);
 var number2=Number(document.querySelector(".number2").value);
 var numberC=document.querySelector(".number3");
 numberC.value=number1*number2;
 }
 function chu(){
 var number1=Number(document.querySelector(".number1").value);
 var number2=Number(document.querySelector(".number2").value);
 var numberD=document.querySelector(".number3");
 numberD.value=number1/number2;
 }

效果展示：

更多前端内容请 点击关注 点击关注

文章来源: https://www.toutiao.com/group/6662614641211867662/