js实现网页计算器

如何在利用HTML，css和js的知识制作一个简单的网页计算器呢？

一个计算机中具备了：

• 计算机整体框
• 输入框
• 输入按钮

计算机整体框：

/*设置div样式*/
 #showdiv{
   border: solid 1px;
   border-radius: 5px;
   width: 350px;
   height: 400px;
   text-align: center;
   margin: auto;/*设置居中*/
   margin-top: 50x;
   background-color: rgb(214, 219, 190);    
}

输入框：

/*设置输入框样式*/
  input[type=text]{
      margin-top: 20px;
      width: 290px;
      height: 40px;
      font-size: 20px;

}

输入按钮：

/*设置按钮样式*/
   input[type=button]{
      width: 60px;
      height: 60px;
      margin-top: 20px;
      margin-left: 5px;
      margin-right: 5px;
      font-size: 30px;
      font-weight: bolder;
      font-family: "楷书";
}

使用js代码对执行对应业务逻辑操作：

使用HTML对计算机进行排版布局：

总体代码：

实现效果：

你一定已经学会了前端网页计算机的制作了吧！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。