JavaScript实现网页计算器功能
作者:龍雅 发布时间:2024-04-17 10:03:41
标签:js,计算器
本文实例为大家分享了JavaScript实现网页计算器的具体代码,供大家参考,具体内容如下
要求:在网页上实现简单的计算器功能和界面
CSS样式代码:
<style>
* {
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;
}
</style>
JavaScript代码:
<script>
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;
}
}
}
</script>
HTML代码:
<body>
<div id="panel">
<div>
<p id="screen"></p>
<input type="button" value="C" />
</div>
<div>
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
<input type="button" value="/" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="*" />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="+" />
<input type="button" value="." />
<input type="button" value="0" />
<input type="button" value="-" />
<input type="button" value="=" />
</div>
</div>
</body>
效果图:
更多计算器功能实现,请点击专题: 计算器功能汇总 进行学习
来源:https://blog.csdn.net/Dragon_201314/article/details/81908594
0
投稿
猜你喜欢
- 代码如下from bs4 import BeautifulSoup #网页解析,获取数据import sys #正则表达式,进行文字匹配im
- 打开php.ini,首先找到;;;;;;;;;;;;;;;;; file uploads ;;;;;;;;;;;;;;;;;区域,有影响文件
- MySQL的自增id都定义了初始值,然后不断加步长。虽然自然数没有上限,但定义了表示这个数的字节长度,计算机存储就有上限。比如,无符号整型(
- Mysql InnoDB引擎数据页结构InnoDB 是 mysql 的默认引擎,也是我们最常用的,所以基于 InnoDB,学习页结构。而学习
- 执行python脚本的时候,有时需要获取命令行参数的相关信息。C语言通过argc和argv来获取参数的个数和参数的内容,python中通过s
- mysql复制表的几种方式 所描述的方法还请实际测试一下再使用.1、复制表结构及数据到新表CREATE TABLE 新表SELEC
- 常用的 random 模块方法import random# random.random()用于生成一个 0 到 1 的随机浮点数: 0 &l
- 前言 在tensorflow的官方文档中得卷积神经网络一章,有一个使用cifar-10图片数据集的实验,搭建卷积神经网络倒不难,但是那个ci
- Python使用Try Exception来处理异常机制 若Exception中有Try对应的异常处理,则Try - exception之后
- 前言图是一种抽象数据结构,本质和树结构是一样的。图与树相比较,图具有封闭性,可以把树结构看成是图结构的前生。在树结构中,如果把兄弟节点之间或
- 一、提要python的@property是python的一种装饰器,是用来修饰方法的。python @property 装饰器使一个方法可以
- mysql基础数据类型mysql常用数据类型概览![1036857-20170801181433755-146301178](D:\笔记\m
- 在python中enumerate的用法多用于在for循环中得到计数,本文即以实例形式向大家展现python中enumerate的用法。具体
- 那么四年一度的世界杯即将要在卡塔尔开幕了,对于不少热爱足球运动的球迷来说,这可是十分难得的盛宴,而对于最后大力神杯的归属,相信很多人都满怀着
- 我看见朋友可以把数据库的记录输出到页面表格上去,觉得很有用。这是怎么做的啊?见下:dbtable.asp<html><he
- 别人复制你网站的文章时自动加上注释,这个功能你在很多网站应该都有体会过,当我们复制一段内容时,就自动在文章后面加上了网站的一些
- 这个问题让我查了许多天才解决,为了避免后面的人重复走弯路,记录下来。问题描述:我在ubuntu 下编译安装了caffe ,在命令行模式下可以
- 如何为XHTML做好准备,XHTML与HTML 4.01标准没有太多的不同。所以将你的代码升级至4.01是个不错的开始。HTML 4.01参
- 奥地利符号计算研究所(Research Institute for Symbolic Computation,简称RISC)的Christo
- Bottle是一个轻量级的Web框架,此框架只由一个 bottle.py 文件构成,不依赖任何第三方模块。#!/usr/bin/env py