JavaScript实现简易加法计算器
更新时间：2021年03月31日 08:40:01 作者：小小小青台
这篇文章主要介绍了JavaScript实现简易加法计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现加法计算器的具体代码，供大家参考，具体内容如下
具体要求：
1.页面布局:
2.还需要在点击计算按钮之后在页面上显示计算结果
具体实现：
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<script>
function myck(type){
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
if(type==1){
// 计算操作
var result = parseInt(num1.value) + parseInt(num2.value);
alert(result);
document.getElementById("resultDiv").innerText ="最终计算结果："+
result;
}else if(type==2){
if(confirm("是否正确清空？")){
// 清空
num1.value = "";
num2.value = "";
document.getElementById("resultDiv").innerText="";
}
}
}
</script>
</head>
<body>
<div style="margin-top: 100px;margin-left: 500px;">
<span style="font-size: 60px;">加法计算器</span>
</div>
<div>
<div class="innerDiv" style="margin-left: 550px;">
数字1：<input id="num1" type="number" placeholder="请输入数字1">
</div>
</div>
<div>
<div class="innerDiv" style="margin-left: 550px;">
数字2：<input id="num2" type="number" placeholder="请输入数字2">
</div>
</div>
<div>
<div style="margin-left: 600px;" class="innerDiv">
<input type="button" onclick="myck(1)" value="计 算">
<input type="button" onclick="myck(2)" value="清 空">
</div>
</div>
<div id="resultDiv">
</div>
</body>
<style>
.innerDiv{
margin-left: 420px;
margin-top: 20px;
}
</style>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序摇一摇功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要为大家详细介绍了js实现电子时钟功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
本文浅析一下为什么Map（和WeakMap）在处理大量DOM节点时特别有用，文中的代码示例介绍的非常详细，感兴趣的小伙伴可以借鉴阅读2023-05-05
很早之前就想分享这篇心得，幸之今天能在这里完成，好了，话不多说，进入正题。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
支持IE和FF的div＋css选项卡...2006-11-11
本文给大家分享的是JavaScript制作的一个兼容IE6+以及主流浏览器的分页插件，非常的不错，有需要的小伙伴可以参考下2016-09-09
这篇文章主要介绍了JavaScript是如何实现继承的，有需要的朋友可以参考一下2013-12-12
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用canvas，我却就只会拿几个div凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，感兴趣的朋友可以了解下2013-01-01
本文主要介绍了JavaScript 显示一个倒计时广告牌的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
momentjs获取上周、上月、前三个月的起始和结束时间(附完整代码)
这篇文章主要给大家介绍了关于momentjs获取上周、上月、前三个月的起始和结束时间的相关资料,在需要你进行日期处理的地方,必然少不了moment.js的使用,需要的朋友可以参考下2023-07-07
最新评论