%description%

'; newHtml = html.replace('%description%', document.querySelector(DOMstrings.inputDescription).value); newHtml = newHtml.replace('%style%', 'background:' + random_gradient) ; document.querySelector(element).insertAdjacentHTML('beforeend', newHtml); }, clearField: function() { document.querySelector(DOMstrings.inputDescription).value = ''; document.querySelector(DOMstrings.inputDescription).focus(); }, displayTotalItems: function() { var items = listController.returnTotalItems(); if (items == 0) { document.querySelector(DOMstrings.totalItems).textContent = '0'; } else if (items == 1) { document.querySelector(DOMstrings.totalItems).textContent = '1'; } else { document.querySelector(DOMstrings.totalItems).textContent = items; } }, displayDate: function () { var mydate = new Date(); var year = mydate.getYear(); if (year < 1000) { year+=1900; } var day = mydate.getDay(); var month = mydate.getMonth(); var daym = mydate.getDate(); if (daym < 10) { daym = "0" + daym; } var dayarray = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; var montharray = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]; var today = year +"年" + " "+ montharray[month] + " " + daym + "日 " + dayarray[day]; document.getElementById('date').innerHTML = today; }, getDOMstrings: function() { return DOMstrings; }, }; })(); var controller = (function(listCtrl, UICtrl) { var DOM = UICtrl.getDOMstrings(); var setupEventListeners = function() { document.querySelector(DOM.inputBtn).addEventListener('click', showAddField); document.addEventListener('keypress', function(e) { if (e.keyCode === 13 || e.which === 13) { ctrlAddItem(); }; }); document.querySelector(DOM.container).addEventListener('click', ctrlDeleteItem); }; var updateTotalItems = function() { listController.returnTotalItems(); UICtrl.displayBudget(budget); }; var ctrlAddItem = function() { if (document.querySelector(DOM.inputDescription).value !== '') { listCtrl.addItem(); UICtrl.addListItem(); UICtrl.clearField(); UICtrl.displayTotalItems(); }; }; var showAddField = function() { document.querySelector(DOM.addField).style.display = 'block'; document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem) document.querySelector(DOM.inputDescription).focus(); } var ctrlDeleteItem = function(e) { var todo = e.target.parentNode.parentNode.parentNode; if (e.target && e.target.className === "ion-ios-trash-outline") { todo.parentNode.removeChild(todo); listCtrl.deleteItem(); } UICtrl.displayTotalItems(); }; return { init: function() { UICtrl.displayTotalItems(); UICtrl.displayDate(); setupEventListeners(); }, }; })(listController, UIController); controller.init();

作品「纯JS实现待办事项APP」预览