javascript实现编写网页版计算器
作者:小白变怪兽 发布时间:2024-04-23 09:26:25
标签:js,计算器
本篇主要记录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下
话不多说,代码如下:
首先是html的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用js实现网页版计算器</title>
<link rel="stylesheet" href="cal.css" >
</head>
<body>
<div id="container" class="container">
<input id="result" class="result">
<div id="cal" class="clearfix">
<div id="num" class="fl">
<div id="top" class="clearfix">
<input id="clear" type="button" value="C">
<input id="antonyms" type="button" value="+/-">
<input id="remainder" type="button" value="%">
</div>
<div id="bonttom" class="clearfix">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input class="zero" type="button" value="0">
<input type="button" value=".">
</div>
</div>
<div id="math" class="fr math">
<input type="button" value="/" onclick="onclicknum('/')">
<input type="button" value="*" onclick="onclicknum('*')">
<input type="button" value="+" onclick="onclicknum('+')">
<input type="button" value="-" onclick="onclicknum('-')">
</div>
<input id="res" type="button" value="=">
</div>
</div>
</body>
</html>
接下来是css样式代码:
* {
margin: 0px;
padding: 0px;
}
.clearfix:before, .clearfix:after {
content: '';
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
_zoom: 1;
}
input {
display: block;
}
.container {
width: 240px;
height: 400px;
border: 2px solid #eb4509;
margin: 100px auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
input {
width: 60px;
height: 60px;
border: 1px solid #000;
float: left;
background: #ddd;
font-size: 24px;
color: #eb4509;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.math input {
float: none;
}
input.zero {
width: 120px;
}
#num {
width: 180px;
}
#cal #math {
width: 60px;
}
.result {
width: 100%;
height: 100px;
line-height: 100px;
border: none;
background-color: #dfdfdf;
font-size: 30px;
float: none;
outline: none;
text-align: right;
padding-right: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
最后上js代码:
<script type="text/javascript">
var numresult;
var str;
var flag;
var bot = document.getElementById("bonttom");
var botInputs = bot.getElementsByTagName("input");
var clear = document.getElementById("clear");
var res = document.getElementById("res");
var math = document.getElementById("math");
var mathInputs = math.getElementsByTagName("input");
var antonymsBtn = document.getElementById("antonyms");
var remainderBtn = document.getElementById("remainder");
//点击数字以及加减乘除
imporIn(botInputs);
// imporIn(mathInputs);
function imporIn(eles) {
for (var i = 0; i < eles.length; i++) {
eles[i].onclick = function () {
onclicknum(this.value);
}
}
}
//点击清空c按钮
clear.onclick = function () {
onclickclear();
}
//点击=号得到结果
res.onclick = function () {
onclickresult();
}
//点击+/-
antonymsBtn.onclick = function () {
antonyms();
}
//点击%
remainderBtn.onclick = function () {
remainder();
}
function onclicknum(nums) {
if (flag) {
console.log("num=" + nums);
if (nums !== "/" && nums !== "+" && nums !== "-" && nums !== "*") {
str.value = "";
console.log("aa" + nums);
}
}
flag = false;
str = document.getElementById("result");
str.value = str.value + nums;
}
//清空
function onclickclear() {
str = document.getElementById("result");
str.value = "";
}
//得到结果
function onclickresult() {
str = document.getElementById("result");
numresult = eval(str.value);
str.value = numresult;
flag = true;
}
//正负数
function antonyms() {
str = document.getElementById("result");
str.value = -str.value;
}
//%
function remainder() {
str = document.getElementById("result");
str.value = str.value / 100;
}
</script>
来源:https://blog.csdn.net/u013558749/article/details/53003127
0
投稿
猜你喜欢
- 前言词云的使用相信大家已经不陌生了,使用很简单,直接调用wordcloud包就可以了。它的主要功能是根据文本词汇和词汇频率生成图片,从中可以
- 最近需要做集团的SRC系统。暂无安全研发,所以只能找我这个小菜兼职开发。系统使用Django框架,在整个过程中,有许多奇特的需求。在某项需求
- 四种基本的函数类型局部变量 就是在函数内部定义的变量【作用域仅局限于函数内部】不同的函数 可以定义相同的局部变量,但是各自用各自的 不会产生
- 先废话几句,这第23篇教程一直没有翻译出来,直到今天我看到待审评论里面有这么一条超长的评论,结果一看,居然是这篇教程的翻译稿。
- 人生苦短,快学Python!最近有位读者朋友遇到了一个小问题,私聊找小五答疑。感觉也会有其他同学会遇到,所以干脆分享出来。如下图所示,在本地
- oracle mysql 中的“不等于“ <> != ^= is notoracleoracle中的
- 一、可以使用以下步骤获取两个以逗号分割的字符串的并集:使用explode函数将两个字符串转换为数组,以便可以对其执行操作。使用array_m
- 先吐槽一下opencv 3.1.0的版本cv2.sift和surf就不能用了 看解释是说 什么 "non-free",,
- 在实际工作中,有些场景下,因为产品既有功能限制,不支持特大文件的直接处理,需要把大文件进行切割处理。当然可以通过UltraEdit编辑工具,
- 来自Six Revisions的一篇文章,作者对一些主流的浏览器进行了测试比较,测试主要针对以下几个方面进行:1.JavaScript执行速
- 前言2017年12月2日,Django官方发布了2.0版本,成为多年来的第一次大版本提升,那么2.0对广大Django使用者有哪些变化和需要
- 公司里很多部门,每个部门可以发多条信息,但每条信息只对应一个部门部门类:class Dep(models.Model): nam
- VScode 配置为 LaTeX IDE在Windows中,配置VScode作为LaTeX的编辑器(IDE),并使用SumatraPDF预览
- 当要处理批量图片,且每张图片都要进行显示时,用plt.imshow() plt.show()会出现内存泄漏, 管理器中看到其中一个pytho
- 前言:Python中for循环和while循环本质上是没有区别的,但是在实际应用上,针对性不太一样。for循环,主要应用在遍历中,体现的是遍
- Python3异步asyncio问题官方文档:https://docs.python.org/zh-cn/3/library/asyncio
- 我就废话不多说了,直接上代码吧!import subprocessdef excuteCommand(com): ex = subproce
- pyecharts介绍pyecharts 是一个用于生成 Echarts 图表的类库。Echarts 是百度开源的一个数据可视化 JS 库。
- 本文实例讲述了Python机器学习之决策树算法。分享给大家供大家参考,具体如下:决策树学习是应用最广泛的归纳推理算法之一,是一种逼近离散值目
- 前言:数据库非常重要,程序的数据增删改查需要数据库支持。python处理数据库非常简单。而且不同类型的数据库处理逻辑方式大同小异。本文以sq