JavaScript
搜索
分类

javascript模拟实现计算器

作者：“HelloWorld” 时间：2024-10-13 04:03:34　

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

功能:

1、实现单击按钮录入数字
2、实现基础四则运算功能，并添加必要的异常处理。
3、实现小数点功能并添加异常处理：小数点只能出现一次
4、实现正负号功能
5、实现退位功能，已经是最后一位时，显示框显示为0
6、AC清屏功能

使用的知识点:

1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程

综合练习的目的:

1、将css,html和js有效的进行技术组合，实现业务功能
2、锻炼和培养编程思想，解决问题的能力和方法
3、锻炼和培养利用多种编程思路，完成预先设定的目标

而且最近刚上手js，感觉特别有趣，学习java基础的时候没有那么大的兴趣。感觉刚一上手js感觉特别好玩有趣，在这里把一个简单的计算器源码展示出来：

html页面：


<!DOCTYPE html>
<html>
<head>
<title>js计算器</title>
<link rel="stylesheet" type="text/css"href="index.css" >
<script type="text/javascript" src="index.js">
</script>
</head>
<body onload="init()">
<!-- 1个文本框10个数字....20个按钮 -->
<div id="div1">
<form action="">
<div id="div2">
<input type="text" name="num" disabled="disabled" id="num" value="0">
</div>
</form>
<div id="div3">
<input type="button" name="" value="C" id="baidu">
<input type="button" name="" value="←" id="">
<input type="button" name="" value="+/-" id="">
<input type="button" name="" value="/" id="">
<input type="button" name="" value="7" id="">
<input type="button" name="" value="8" id="">
<input type="button" name="" value="9" id="">
<input type="button" name="" value="*" id="">
<input type="button" name="" value="4" id="">
<input type="button" name="" value="5" id="">
<input type="button" name="" value="6" id="">
<input type="button" name="" value="-" id="">
<input type="button" name="" value="1" id="" >
<input type="button" name="" value="2" id="" >
<input type="button" name="" value="3" id="" >
<input type="button" name="" value="+" id="">
<input type="button" name="" value="0" id="">
<input type="button" name="" value="=" id="">
<input type="button" name="" value="." id="">
<input type="button" name="" value="AC" id="">
</div>
</div>
</body>
</html>

js页面：


function init(){
var num=document.getElementById("num");
num.value=0;
var btn_num1;
var fh;
num.disabled="disabled";
// var n1=document.getElementById("n1");
// n1.οnclick=function(){
// }
var oButton=document.getElementsByTagName("input");
for(var i=0;i<oButton.length;i++){
oButton[i].onclick=function(){
if(isnumber(this.value)){
//num.value=(num.value+this.value)*1;//把默认0消除
if(isNull(num.value)){
num.value=this.value;
}else{
num.value=num.value+this.value;
}
}else{
//测试功能是否正确
// alert("bushishuzi")
var btn_num=this.value;
//测试功能是否正确（弹窗）
// alert(btn_num);
switch(btn_num){
case "+":
// alert(11);
btn_num1=num.value*1;//=parseInt(num.value)这个也可以,后面的话需要改为number
num.value=0;
fh="+";
break;
case "-":
btn_num1=num.value*1;
num.value=0;
fh="-";
break;
case "*":
btn_num1=num.value*1;
num.value=0;
fh="*";
break;
case "/":
btn_num1=num.value*1;
num.value=0;
fh="/";
break;
case ".":
num.value=dec_number(num.value);
break;
case "←":
num.value=back(num.value);
break;
case "+/-":
num.value=sign(num.value);
break;
case "AC":
num.value="0";
break;
case "C":
init_baidu();
break;
case "=":
switch(fh){
case"+":
num.value=btn_num1+num.value*1;
break;
case"-":
num.value=btn_num1-num.value*1;
break;
case"*":
num.value=btn_num1*num.value*1;
break;
case"/":
if(num.value==0){
num.value=0;
alert("除数不能为0");
}else{
num.value=btn_num1/num.value*1;
}
break;
}
break;
}
}
}
}
}
//小数点的功能
function dec_number(n){
if(n.indexOf(".")==-1){
n=n+".";
}
return n;
}
//验证文本框是否为空或者为0
function isNull(n){
if(n*1==0||n.length==0){
return true;
}else{
return false;
}
}
//退位键
function back(n){
n=n.substr(0,n.length-1);
if(isNull(n)){
n="0";
}
return n;
}
//正负号+/-
function sign(n){
if(n.indexOf("-")==-1){
n="-"+n;
}else{
n=n.substr(1,n.length);
}
return n;
}
//isNaN:不能转换成数字：true,可以转换成数字是false
function isnumber(n){
return !isNaN(n);
}
//C按钮使用一个超级链接，链接到百度，这个可以随便发挥
function init_baidu(){
window.location.href="http://www.baidu.com";
}

css页面：


*{
margin:0px;
padding:0px;
}
div{
width:170px;
}
#div1{
top:60px;
left: 100px;
position:absolute;
}
input[type="button"]{
width:30px;
margin-right: 5px;
}
input[type="text"]{
width:147px;
text-align: right;
background-color:white;
border:1px solid;
padding-right:1px;
box-sizing:content-box;
}
input[type="button"]:hover{/*//伪类和按钮的使用*/
background-color:white;
border:1px solid;
}

来源：https://blog.csdn.net/qq_37215985/article/details/115425902

标签：js,计算器
0
投稿

猜你喜欢

  • python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例

    2021-12-11 14:20:36

  • python实现购物车功能

    2021-06-02 08:08:12

  • Django使用Mysql数据库已经存在的数据表方法

    2023-07-21 15:24:59

  • 白 刃之战：PHP vs. ASP.NET（节选）－架构比较

    2023-11-15 12:31:22

  • JavaScipt中栈的实现方法

    2024-04-18 09:33:49

  • 用SQL统计SQLServe表存储空间大小的代码

    2012-06-06 19:52:22

  • apache集成php7.3.5的详细步骤

    2023-08-20 16:31:05

  • python常见数制转换实例分析

    2021-04-04 08:09:32

  • 解决layui的form里的元素进行动态生成,验证失效的问题

    2024-07-28 22:39:27

  • photoshop快捷键大全及使用技巧

    2007-10-26 07:40:00

  • WebSocket部署到服务器出现连接失败问题的分析与解决

    2023-08-15 22:43:21

  • JavaScript基于Ajax实现不刷新在网页上动态显示文件内容

    2024-05-06 10:08:38

  • Python循环语句介绍

    2021-04-19 20:04:42

  • python使用socket高效传输视频数据帧(连续发送图片)

    2021-04-14 23:17:40

  • MySQL性能优化神器Explain的基本使用分析

    2024-01-19 21:56:15

  • 分享Pycharm中一些不为人知的技巧

    2023-10-04 04:52:54

  • 在VS2019环境下使用Opencv调用GPU版本YOLOv4算法的详细过程

    2023-05-12 10:50:46

  • 苹果的“创新”

    2010-01-12 13:45:00

  • Python基于traceback模块获取异常信息

    2022-04-27 11:30:10

  • python类的继承实例详解

    2021-04-10 07:22:33
    • asp之家 网络编程 m.aspxhome.com