html怎么实现计算器功能键介绍,JavaScript实现网页计算器功能

本文实例为大家分享了JavaScript实现网页计算器的具体代码，供大家参考，具体内容如下

要求：在网页上实现简单的计算器功能和界面

CSS样式代码：

* {

margin: 0;

padding: 0;

}

#panel {

width: 202px;

height: 252px;

margin: 30px auto;

border: 3px solid #ccc;

}

#screen {

width: 134px;

height: 40px;

margin: 5px;

display: inline-block;

border: 1px solid #ddd;

line-height: 40px;

padding-left: 3px;

padding-right: 3px;

text-align: right;

}

input[type="button"] {

width: 40px;

height: 40px;

border: 1px solid #ddd;

margin: 5px;

font-family: "微软雅黑";

font-size: 18px;

font-weight: bold;

}

#panel div, p, input {

float: left;

}

JavaScript代码：

window.onload = function(){

//获取计算器面板

var panel = document.getElementById("panel");

//为计算面板动态添加单击事件

panel.onclick = function(e) {

//参数e用来接收event对象

//获取所有input元素

var inputs = e.toElement;

//获取P元素

var screen = document.getElementById("screen");

if(inputs.type == "button") {

//如果获取到的是input元素，则开始执行运算逻辑

if (inputs.value == "C") {

screen.innerHTML = "";

} else if (inputs.value == "=") {

try {

screen.innerHTML = eval(screen.innerHTML);

} catch (ex) {

screen.innerHTML = "Error";

}

} else {

screen.innerHTML += inputs.value;

}

} else {

//如果单击的地方不是input元素，则程序不回应

return;

}

}

}

HTML代码：

效果图：

更多计算器功能实现，请点击专题： 计算器功能汇总 进行学习

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