JS---用js写个简单记账本 快来试试吧【前端】
【代码】JS---用js写个简单记账本 快来试试吧【前端】
·
项目代码:
项目功能:
记账本功能,余额显示,支出和收入显示,每次添加新的一项支出和收入,都记录到总的记录栏中,同时每次添加都在历史记录中显示交易名称和交易金额,金额前面显示支出或者收入符号,并且根据总记录栏颜色在历史记录中出现对应的颜色。在添加先交易里需输入交易名称,在金额前面必须添加+或者-,没有添加的话,就会弹出对话框请输入正确的信息。同时,在最上方的您的余额里面会对历史记录的所有数据进行计算,显示正负值。
html代码:
<!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>记账本</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-color: #f1f1f1;
}
.container {
width: 480px;
padding: 50px;
margin: 0 auto;
/* background-color: gold; */
/* overflow: hidden; */
position:relative;
}
h1 {
text-align: center;
}
.container>p:nth-of-type(2) {
line-height: 4rem;
font-size: 3.2rem;
}
section {
height: 6rem;
padding: 1rem;
background-color: #fff;
margin-top: 2rem;
box-shadow: 1px 1px 3px lightgray;
/* overflow: hidden; */
}
section .item {
width: 50%;
height: 100%;
float: left;
border-right: 1px solid lightgray;
}
section .zhichu {
border: 0;
}
section .item p {
width: 100%;
text-align: center;
font-size: 1.6rem;
font-weight: 900;
display: flex;
flex-wrap: wrap;
align-content: center;
}
h2 {
margin-top: 1.5rem;
line-height: 4rem;
font-size: 1.8rem;
border-bottom: 1px solid lightgray;
}
li {
height: 3rem;
background-color: #fff;
margin: 1rem auto;
font-size: 1.2rem;
position: relative;
}
li span {
float: left;
width: 46%;
height: 3rem;
line-height: 3rem;
}
li .name {
margin-left: 2%;
}
li .money {
text-align: right;
}
li .del {
width: 2rem;
height: 2rem;
line-height: 2rem;
text-align: center;
color: #fff;
background-color: tomato;
font-size: 1.2rem;
position: absolute;
left: -2rem;
top: .5rem;
display: none;
}
li:hover .del {
display: block;
}
.show {
line-height: 3.6rem;
font-size: 1.6rem;
}
input {
display: block;
width: 100%;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
text-indent: 2.4rem;
}
#add {
height: 3rem;
line-height: 3rem;
font-size: 1.4rem;
color: white;
background-color: plum;
text-align: center;
margin-top: 2rem;
}
#add:hover {
cursor: pointer;
}
.alert{
width: 100%;
height: 4rem;
font-size: 1.8rem;
color: white;
text-align: center;
position: absolute;
top: 0;
left: 0;
display: none;
}
#error{
background-color: tomato;
box-shadow: 0 0 5px tomato;
}
#success{
background-color:skyblue;
box-shadow: 0 0 5px skyblue;
}
</style>
</head>
<body>
<div class="container">
<h1>记账本</h1>
<p style="margin-top:2rem;">您的余额</p>
<p>¥<span id="yue">0</span></p>
<section>
<div class="item shouru">
<p>收入</p>
<p style="color:skyblue;">¥<span id="shouru">0.00</span></p>
</div>
<div class="item zhichu">
<p>支出</p>
<p style="color:tomato;">¥<span id="shouru">0.00</span></p>
</div>
</section>
<h2>历史记录</h2>
<ul>
<!-- <li>
<span class="name">投资</span>
<span class="money">-1000</span>
<span class="del">x</span>
</li> -->
</ul>
<h2>添加新交易</h2>
<p class="show">交易名称</p>
<input id="name" type="text" placeholder="请输入名称">
<p class="show">金额(支出-负数,收入+整数)</p>
<input id="money" type="text" placeholder="请输入金额">
<div id="add">添加新交易</div>
<p id="error" class="alert">请输入正确的信息!</p>
<p id="success" class="alert">信息添加成功!</p>
</div>
</body>
引入record.js:
//关于本地存储的构造函数
// localStorage.record = [
// {
// type: "+",
// name: "项目A",
// money: "5000000"
// },
// {
// type: "-",
// name: "项目B",
// money: "5000000"
// }
// ]
function Record() {
if (!localStorage.Record) {
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.shouru = function () {
var total = 0;
var arr = this.getRecords();
arr.forEach(function (data) {
if (data.type === "+") {
total += data.money / 1;
}
})
return total;
}
// 计算总支出
Record.prototype.zhichu = function () {
var total = 0;
var arr = this.getRecords();
arr.forEach(function (data) {
if (data.type === "-") {
total += data.money / 1;
}
})
return total;
}
JS代码:
<script>
// 1.根据缓存显示历史记录
// 创建record对象
var record = new Record();
// 获取历史记录,并添加对应的li
record.getRecords().forEach(function (data) {
addLi(data);
})
// 计算 收入 支出 余额
setMoney();
// 2.点击添加按钮
$("#add").click(function () {
// 1.判断输入框的内容
if (isAlert()) {
errorAlert();
return ;
}
// 2.创建li 填充li 添加li
var data = {
name: $("#name").val(),
type: $("#money").val().slice(0, 1),
money: $("#money").val().slice(1)
}
addLi(data);
// 3.对缓存数据进行添加
record.addData(data);
// 4.计算 收入 支出 余额
setMoney();
// 5.输入框内容清空
$("input").val("");
// 6.显示添加成功的信息
successAlert();
})
// 如果输入框内容不合理,就弹窗提醒用户
function isAlert() {
var reg = /^[\+\-](\d+|\d+.\d{1,2})$/;
return ($("#name").val() === "" || !reg.test($("#money").val()))
}
// 添加li到ul当中
function addLi(data) {
$(`
<li style="border-right:4px solid ${data.type === "+" ? "skyblue" : "tomato"}">
<span class="name">${data.name}</span>
<span class="money" style="color:${data.type === "+" ? "skyblue" : "tomato"}"">${data.type + data.money}</span>
<span class="del">x</span>
</li>
`).appendTo($("ul")).find(".del").click(function () {
// 删掉数组里的数据
var index = $("li").index($(this).parent())
record.delData(index);
setMoney();
// 删掉li
$(this).parent().remove();
})
}
// 计算 收入 支出 余额
function setMoney() {
$("#shouru").html(record.shouru());
$("#zhichu").html(record.zhichu());
$("#yue").html(record.shouru() - record.zhichu());
}
// 提示
function errorAlert(){
$(".alert").hide();
$("#error").fadeIn(300).delay(1500).fadeOut(300);
}
function successAlert(){
$(".alert").hide();
$("#success").fadeIn(300).delay(1500).fadeOut(300);
}
</script>
记账本样式:
更多推荐
已为社区贡献1条内容
所有评论(0)