js 计算机功能吗,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代码对执行对应业务逻辑操作：

function test(btn){

//获取button按钮对象

var number = btn.value;

//执行对应的业务逻辑

switch (number) {

case "=":

document.getElementById("input").value= eval(document.getElementById("input").value);

break;

case "c":

document.getElementById("input").value="";

break;

default:

//将按钮的值赋值给input输入框

document.getElementById("input").value+=number;

break;

}

}

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

总体代码：

/*设置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: "楷书";

}

function test(btn){

//获取button按钮对象

var number = btn.value;

//执行对应的业务逻辑

switch (number) {

case "=":

document.getElementById("input").value= eval(document.getElementById("input").value);

break;

case "c":

document.getElementById("input").value="";

break;

default:

//将按钮的值赋值给input输入框

document.getElementById("input").value+=number;

break;

}

}

Document

实现效果：

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

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