基于js实现的简易记账小本

实现效果

实现了本地存储，输入的数据如果关掉页面，再打开，数据依旧存在。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css">
</head><body><div class="content"><h2>记账小簿</h2><div class="container"><h4>你的资金平衡</h4><h1>$<span id="balance">0</span></h1><div class="inc-exp-container"><div><h4>收入</h4><p id="money-plus" class="money plus">$0</p></div><div><h4>支出</h4><p id="money-minus" class="money minus">$0</p></div></div><h3>收入&支出记录</h3><ul id="list" class="list"></ul><h3>收支条目添加</h3><div class="form-control"><label for="text">明细</label><input type="text" id="text" placeholder="输入明细..." /></div><div class="form-control"><label for="amount">金额<br />(负数 - 支出, 正数 - 收入)</label><input type="text" id="amount" placeholder="输入金额..." /></div><button class="addTransition" id="btn" type="button">添加</button><p id="error" class="alert">请输入正确的信息!</p><p id="success" class="alert">信息添加成功!</p></div></div><script src="./index.js"></script><script>// 1. 根据缓存显示收入支出记录// 创建records对象var records = new Record();// 获取历史记录，并添加对应的liif(records.getRecords != []) {for(var i = 0; i < records.getRecords().length;i++) {addList(records.getRecords()[i]);}}setMoney();var text = document.querySelector('#text');var amount = document.querySelector('#amount');var btn = document.querySelector('#btn');// var records = [];btn.addEventListener('click', function () {// 点击添加按钮 但是要先判断输入的金额是否是数字if (!isAlert()) {errorAlert();return;}var data = {detail: text.value,type: amount.value.slice(0, 1),money: amount.value.slice(1)}// console.log(data);// 将数据添加到列表里面 addList()addList(data);records.addData(data);// records.push(data);//数据暂时放到数组里面setMoney(); //设置收入支出 资金平衡显示的金额 // 设置后 清空文本框内输入文字text.value = '';amount.value = '';// 提示信息添加成功successAlert();})//输出框内容不合理就提醒用户//加减开头，要么就是纯整数，小数的话小数点在整数后且最多两位//如果输入框内容不合理，就弹窗提醒用户function isAlert() {var reg = /^[\+\-](\d+|\d+\.\d{1,2})$/;if (text.value === "" || reg.test(amount.value) === false) {return false;}else {return true;}}function addList(data) {var ul = document.querySelector('#list');var li = document.createElement('li');// 如果是+收入 li的右边框为绿色 字体颜色为绿 -有边框为红li.style.borderRight = `solid 5px ${data.type === '+' ? '#40CF7B' : '#C65043'}`;// 插入到ul中var str = `<span class="detail">${data.detail}</span><span class="money" style="color: ${data.type === '+' ? '#40CF7B' : '#C65043'}">${data.type + data.money}</span><span class="del">x</span>`li.innerHTML = str;ul.insertBefore(li, ul.children[0]);// 删除部分var del = document.querySelectorAll('.del');for(var i = 0; i < del.length;i++) {del[i].addEventListener('click', function() {// 处理一下删除li时 收入支出余额都会变化 就是 records[i]里面对应的detail删除for(var i = 0; i < records.getRecords().length; i++) {// 跟删除的li的明细一样时 删除数组找那个这个数据if(records.getRecords()[i].detail === this.parentNode.children[0].innerHTML) {records.delData(i);}}// 再统计一下金额setMoney();// 点击x删除ul里面的liul.removeChild(this.parentNode);})}}// 统计金额// 首先将数据存储在一个数组里面var records = [];// var records = [];function setMoney() {// 收入var income = document.querySelector('.plus');// 支出var cost = document.querySelector('.minus');// 余额var balance = document.querySelector('#balance');income.innerHTML = records.income();cost.innerHTML = records.cost();balance.innerHTML = records.income() - records.cost();// 但是此时如果删除li里面的输入支出记录 显示的收入支出资金平衡不变化// 所以要在删除li的时候处理一下}function errorAlert() {var error = document.querySelector('#error');error.style.height = '30px';setTimeout(function() {error.style.height = '0'}, 800);}function successAlert() {var success = document.querySelector('#success');success.style.height = '30px';setTimeout(function() {success.style.height = '0'}, 800);}</script></body></html>

* {margin: 0;padding: 0;
}
body {background-color: #F7F7F7;
}
input:focus {outline: none;
}
.content {display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.content h2 {margin: 40px 0 10px 0;font-size: 20px;
}
.content .container {position: relative;
}
.content .container h1 {margin-bottom: 20px;
}
.content .container .inc-exp-container {width: 400px;height: 100px;background-color: #fff;display: flex;justify-content: center;align-items: center;margin-bottom: 20px;
}
.content .container .inc-exp-container div {width: 50%;text-align: center;
}
.content .container .inc-exp-container div:first-child {border-right: solid 3px #eee;
}
.content .container .inc-exp-container div h4 {margin-bottom: 10px;
}
.content .container .inc-exp-container div .money {font-size: 20px;
}
.content .container .inc-exp-container div .plus {color: #40CF7B;
}
.content .container .inc-exp-container div .minus {color: #C65043;
}
.content .container h3 {border-bottom: solid 1px #D4D4D4;padding: 10px 0;margin-bottom: 20px;
}
.content .container #list {list-style-type: none;
}
.content .container #list li {display: flex;align-items: center;height: 40px;line-height: 40px;width: 100%;background: #fff;margin: 10px 0;border: 1px solid #eee;position: relative;
}
.content .container #list li .detail {flex: 1;text-indent: 10px;
}
.content .container #list li .money {margin-left: auto;margin-right: 10px;
}
.content .container #list li .del {position: absolute;top: 10px;left: -20px;width: 20px;height: 20px;line-height: 20px;text-align: center ;color: #fff;background-color: #E74C3C ;cursor: pointer;
}
.content .container .form-control {display: flex;flex-direction: column;justify-content: center;
}
.content .container .form-control label {font-weight: 600;
}
.content .container .form-control input {width: 100%;height: 40px;margin: 20px 0;text-indent: 8px;font-size: 16px;border: solid 1px #eee;
}
.content .container .addTransition {width: 100%;padding: 10px;color: #fff;background-color: #9D88FF;border: none;
}
.content .container .alert {position: absolute;top: -75px;left: 0;width: 100%;line-height: 30px;text-align: center;color: #fff;transition: all .5s;overflow: hidden;
}
.content .container #error {background-color: #C65043;box-shadow: 0 0 5px #C65043;height: 0;
}
.content .container #success {background-color: #40CF7B;box-shadow: 0 0 5px #40CF7B;height: 0;
}


// 关于本地存储的构造函数
function Record() {if(!localStorage.record) {// 为什么这里的空数组还有带上引号呢？// 因为本地存储只能存储字符串,可以将对象JSON.stringify()编码后存储，或者通过JSON.parse()解析后获取数据localStorage.record = '[]'}
}// 获得缓存的记录内容
Record.prototype.getRecords = function() {return JSON.parse(localStorage.record);
}// 添加新数据
Record.prototype.addData = function(data) {// 先拿到数据 添加数据 更新缓存var arr = this.getRecords();arr.push(data);localStorage.record = JSON.stringify(arr);
}// 清除所有数据
Record.prototype.removeAllData = function() {localStorage.clear();
}// 删掉指定数据
Record.prototype.delData = function(index) {var arr = this.getRecords();arr.splice(index, 1);// 删除后记得更新缓存localStorage.record = JSON.stringify(arr);
}// 计算总收入
Record.prototype.income = function() {var total = 0;var arr = this.getRecords();arr.forEach(data => {if(data.type === '+') {total += data.money / 1;}})return total;
}// 计算总支出
Record.prototype.cost = function() {var total = 0;var arr = this.getRecords();arr.forEach(data => {if(data.type === '-') {total += data.money / 1;}})return total;
}

基于js实现的简易记账小本相关推荐

基于Vue实现一个简易的小程序框架，浅谈kafka | 每日掘金第 194 期
Hello,又到了每天一次的下午茶时间.酱酱们的下午茶新增优质作者介绍和码上掘金板块,专注于发掘站内优质创作者和优质内容,欢迎大家多提宝贵意见! 酱酱们的下午茶全新改版,欢迎大家多提宝贵意见! 本文字 ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
node mysql商城开发_ＮideShop：基于Node.js+MySQL开发的微信小程序商城开源啦
NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦发布时间:2020-04-14 04:23:37 来源:51CTO 阅读:2894 作者:ch10mmt 高仿网易严选的微信 ...
css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
基于Arduino主板的简易反应时间测试小游戏
基于Arduino主板的反应时间测试小游戏 //Arduino IDE //稍微解释一下volatile, 一个定义为volatile的变量是说这变量可能会被意想不到地改变,这样,编译器就不会去假设这 ...
java编写家庭收支记录,Java家庭收支记账小项目（java基础）
Java家庭收支记账小项目(java基础) Java家庭收支记账小项目(java基础) 需求说明: 模拟实现基于文本界面的<家庭记账软件>. 该软件能够记录家庭的收入.支出,并能够打印收支 ...
java毕业设计——基于java+JSP+Oracle的记账管理系统设计与实现（毕业论文+程序源码）——记账管理系统
基于java+JSP+Oracle的记账管理系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+JSP+Oracle的记账管理系统设计与实现,文章末尾附有本毕业设计的论文和源码下 ...
h5 数字变化_基于JS实现数字动态变化显示效果附源码
先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(num ...
html输入支付密码样式,基于JS实现类似支付宝支付密码输入框
基于JS实现类似支付宝支付密码输入框 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于JS实现类似支付宝支付密码输入框,编程之家小编觉得 ...

基于js实现的简易记账小本

基于js实现的简易记账小本相关推荐

最新文章

热门文章