×

用原生JS模拟做一个简单计算器的功能

作者:andy0012019.03.29来源:Web前端之家浏览:431评论:0
关键词:计算器模拟

用原生JS模拟做一个简单计算器的功能,一起来玩玩吧。直接上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
</head>
<body>
<div id="calculator"></div>
<script>
window.onload = function(){
//创建渲染DOM结构
function creatDom(){
var str = `<input type="text" value="" id="showResult"><br />
            <input type="button" value="0">
            <input type="button" value="1">
            <input type="button" value="2">
            <input type="button" value="3"><br />
            <input type="button" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <input type="button" value="7"><br />
            <input type="button" value="8">
            <input type="button" value="9">
            <input type="button" value="+">
            <input type="button" value="-"><br />
            <input type="button" value="*">
            <input type="button" value="/">
            <input type="button" value="CE">
            <input type="button" value="=">
            <input type="button" value="重置">`;

document.getElementById('calculator').innerHTML = str;

}
creatDom();

let setEqual = false;//若按了'='就设置为true   
getAllButtons();
function getAllButtons(){
let buttons = document.querySelectorAll('#calculator input[type="button"]');
for (var i = 0;i<buttons.length;i++) {
buttons[i].onclick = function(){
let value = document.getElementById('showResult').value;
let item = this.value;

//重置按钮清空数据
if(item==='重置'){
setEqual = false;
document.getElementById('showResult').value = '';
return;
}

//计算了结果(按了‘=’)再点击数字则重新赋值
if(setEqual){
document.getElementById('showResult').value = item;
setEqual = false;
return;
}

// 最后一位为计算符号,且输入计算符号,删除上一个符号;
//首位是 * / 删除再重新输入(可输入正负)
if (/[\-\+\*\/]$/.test(item) && /[\-\+\*\/]$/.test(value) || /^[\*\/]$/.test(value)) {
value = value.substring(0, value.length - 1);
}

// 首位为 0 且输入数字,删除 0,再输入
if (value === '0' && /\d/.test(item)) {
value = value.substring(0, value.length - 1);
}

if(item==='='){
if (setEqual) {
document.getElementById('data').value = '';
return false;
}

setEqual = true;
let value = document.getElementById('showResult').value;

try {
if(value!=""){
//eval 计算某个字符串,并执行其中的的 JavaScript 代码
document.getElementById('showResult').value = value + item + eval(value);
}else{
alert('请输入数字!');
}

} catch (e) {
alert('输入有误!'+e);
document.getElementById('showResult').value = '';
}

}else{//没有按‘=’时                 
document.getElementById('showResult').value = value + item;
}

//按CE按钮清空数据  
if(item==='CE'){
if(!setEqual){//若未计算过结果,就点击一次从末尾减少一个字符的清除 
document.getElementById('showResult').value = value.substring(0,value.length-1);
}else{//若已计算过结果(按'='了),则重置(一次性全部清除字符)
document.getElementById('showResult').value = '';
setEqual = false;
}
return;
}
}
}
}

}
</script>
</body>
</html>

这个比较粗糙,只是大家学学吧,如果做很完善还得加功能呢。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js230492039402394-09.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • www.micai18.com

    写的很详细...

  • 子午物联网

    这个博客,由衷的喜欢...

  • 访客

    文章不错,非常喜欢...

  • cnwebe

    新媒体运营交换友情链接https://www.cnwebe.com换吗...

  • admin

    请加上链接...

  • admin

    已加上...

  • 物联网应用

    交换个链接如何?物联网应用www.ziwuiot.com...

  • zzzmh

    你好自己写的个人技术博客https://zzzmh.cn麻烦友链申请...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero