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代码：

效果图：

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

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

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

基于JavaScript实现网页计算器
基于JavaScript的网页计算器基于HTML.CSS.JavaScript制作的网页计算器,其中可以实现加.减.乘.除.取整.求余.阶乘.科学计数等功能界面如下: 代码如下: 有兴趣的朋友欢迎 ...
HTML5实现网页计算器清空操作,基于JavaScript实现网页计算器
本文实例为大家分享了JavaScript实现网页计算器的扫雷游戏的具体代码,供大家参考,具体内容如下先看效果: 此外,计算器还附有数字.运算符检查功能: 下贴源码: 计算器 var oper1=pr ...
JavaScript制作网页计算器
JavaScript制作网页计算器 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
如何使用html实现在线秒表,使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）...
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: Document 00:00:00:00 开始暂停继续重置 //定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的 ...
html计时器重置,使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）...
效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: Document 00:00:00:00 开始暂停继续重置 //定义一个变量,根据定时器每秒执行一次,每次执行++自增操作,变量存储的 ...
JavaScript实现网页计算器
Hbuilder X中实现网页计算器(+-*/) 文章目录一.计算器代码二.代码分析一.计算器代码 <!DOCTYPE html> <html><head>& ...
用JavaScript编写网页计算器
编写网页计算器,首先用两个text文本框接收输入的两个值,然后通过触发按钮的单击事件,即触发calc()函数,传递实参(add.sub.mul或者div),实现相应的加减乘除运算,最后将结果显示在结果 ...
怎样用计算机表示分数,计算器怎么用分数（科学计算器功能键介绍大全）
计算器到底能运算多大的数字?有的朋友会说按满了多少位就是多少位了,其实并不是的.计算器要远比我们想象的要强大的多也方便的多. 首先说下能计算多大的数字?当数字过大时大到超出计算器位数是计算器会采用科学 ...
python实现简单计算器功能键介绍_Python实现的简单计算器功能详解
本文实例讲述了Python实现的简单计算器功能.分享给大家供大家参考,具体如下: 使用python编写一款简易的计算器计算器效果图首先搭建计算器的面板: 计算器面板结构建造一个继承于wx.Fra ...

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

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

最新文章

热门文章