课程连结,内容的制作在课程中原本为使用JS vanilla,而自己在专案上的制作则使用jQuery来练习。
完成後的成品
$(document).ready(function () {
$('.btn').click(function (e) {
e.preventDefault();
console.log('click');
addTransactions('cash', '200');
})
});
function addTransactions(name, amount) {
var Transaction_str = `<li class='plus' >${name}<span> ${amount}</span><button class="delete-btn">x</button></li>`
$('#list').append(Transaction_str);
}
//
$('#text').val('');
$('#amount').val('');
val()
取得输入框的值,带入addTransactions()
函式将资料显示画面$(document).ready(function () {
$('.btn').click(function (e) {
e.preventDefault();
console.log('click');
//取得表格中的值
const text_val = $('#text').val();
const amount_val = $('#amount').val();
addTransactions(text_val, amount_val);
})
});
$('.delete-btn').last().click(function () {
console.log('del');
})
}
$('.delete-btn').last().click(function () {
console.log(this);
})
}
$('.delete-btn').last().click(function () {
$(this).parent().remove();
})
从此实作,可以看到它是一个阵列,里面是物件
//预设值的设置,取得存在本地的资料或是空阵列
var transactions = JSON.parse(localStorage.getItem('Transactions')) || [];
//推入阵列
transactions.push({
name: text_val,
amount: amount_val
})
localStorage.setItem('Transactions', JSON.stringify(transactions));
//init
function initHistory(transactions) {
transactions.forEach(transaction => {
addTransactions(transaction.name, transaction.amount);
});
}
//将此函式放於 $(document).ready()之中
//阵列初始
if (transactions.length > 0) {
initHistory(transactions);
}
// Generate random ID
function generateID() {
return Math.floor(Math.random() * 100000000);
}
//floor:无条件舍去
//ceil:无条件进位
const id = generateID();
addTransactions(id, text_val, amount_val);
//推入阵列
transactions.push({
id: id,
name: text_val,
amount: amount_val
})
function addTransactions(id, name, amount) {
console.log(id, name, amount);}
和资料有关的时候:data-原来栏位名称
const Transaction_str = `<li class='plus' >${name}<span> ${amount}</span><button class="delete-btn" data-id="${id}">x</button></li>`
function deleteFromLocalstorage(transactions, id) {
transactions.forEach(function (item, index, arr) {
//console.log('item', item);
//console.log('index', index);
//console.log('arr', arr);
if (item.id === id) {
arr.splice(index, 1);
}
});
//回圈删除後,要储存到localStorage才有确实删去
localStorage.setItem('Transactions', JSON.stringify(transactions));
}
localStorage.setItem('Transactions', JSON.stringify(transactions));
addTransactions()
函式之中,判断 amount 的正负值,再给予相应样式const Transaction_str = $('<li></li>').appendTo('#list');
Transaction_str.addClass(amount < 0 ? 'minus' : 'plus');
Transaction_str.html(`${name}<span> ${amount}</span><button class="delete-btn" data-id="${id}">x</button>`);
$('#list').append(Transaction_str);
function updateValue(transactions) {
const amounts_arr = transactions.map(function (transaction) {
return transaction.amount
})
console.log(amounts_arr);
//计算加总
var total = 0;
$.each(amounts_arr, function () { total += parseFloat((this)) || 0; });
//传回YOUR BALANCE
$('#balance').text(`$${total}`);
console.log(total);
//*************************** */
//从阵列找出>0的值,放置income
//console.log(amounts)
var income = amounts_arr.filter(
function (item) {
return item > 0
}
)
console.log(income);
var totalIncome = 0;
$.each(income, function () { totalIncome += parseFloat((this)) || 0; });
//console.log(totalIncome); //回传220
//传回到income
$('#money-plus').text(`$${totalIncome}`);
//***************************** */
//从阵列找出<0的值,放置income
var expense = amounts_arr.filter(
function (item) {
return item < 0
}
)
console.log(expense);
var totalExpense = 0;
$.each(expense, function () { totalExpense += parseFloat((this)) || 0; });
console.log(totalExpense);
//传回到expense
$('#money-minus').text(`$${totalExpense}`)
}
const amounts_arr = transactions.map(function (transaction) {
return transaction.amount
})
console.log(amounts_arr);
var total = 0;
$.each(amounts_arr, function () { total += parseFloat((this)) || 0; });
//传回YOUR BALANCE
$('#balance').text(`$${total}`);
console.log(total);
//从阵列找出>0的值,放置income
//console.log(amounts)
var income = amounts_arr.filter(
function (item) {
return item > 0
}
)
console.log(income);
var totalIncome = 0;
$.each(income, function () { totalIncome += parseFloat((this)) || 0; });
//console.log(totalIncome); //回传220
//传回到income
$('#money-plus').text(`$${totalIncome}`);
//从阵列找出<0的值,放置expense
var expense = amounts_arr.filter(
function (item) {
return item < 0
}
)
console.log(expense);
var totalExpense = 0;
$.each(expense, function () { totalExpense += parseFloat((this)) || 0; });
console.log(totalExpense);
//传回到expense
$('#money-minus').text(`$${totalExpense}`)
昨天做了一个 player 的物件范例 var player=new Object(); playe...
今日题目 题目连结:53. Maximum Subarray 题目主题:Array, Divide ...
今天我们来实作怎麽『 透过 AWS 服务把 Google Analytics 资料撷取存放至 AWS...
1.VS code 写网页的编辑器有许多种,我使用的编辑器是Visual Studio Code(简...
The most reliable blog for celebrity Net Worth Net...