待办事项下拉html代码,一款简洁易用的HTML5当日待办事项列表

这段代码展示了如何使用JavaScript监听键盘输入、创建列表项、更新localStorage、双击删除及编辑列表项,并根据当前时间清理localStorage。它涉及到事件处理、日期格式化以及本地存储操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

var current_time = document.querySelector(".current_time");

var input = document.getElementById("input");

var list = document.querySelector(".list");

var list_item = document.querySelector(".list_item");

var list_item_text = document.querySelector(".list_item_text");

var li;

input.addEventListener("keyup", function(e) {

if (e.which == 13) {

let d = new Date;

let h = d.getHours();

let m = d.getMinutes();

let val = e.target.value;

//Make minutes with 2 numbers if less then 9

if (m <= 9) {

m = "0" + m;

}

//Make hours with 2 numbers if less then 9

if (h <= 9) {

h = "0" + h;

}

li = document.createElement("LI");

list.appendChild(li);

li.classList.add("list_item");

li.innerHTML = "" + val + "" + " " + "" + h + ":" + "" + "" + m + "";

input.value = " ";

//Set item for localStorage

var lists = list.innerHTML;

localStorage.setItem('lists', lists);

}

}, false);

//Get item for localStorage

if (localStorage.getItem('lists')) {

list.innerHTML = localStorage.getItem('lists')

}

//Double click to remove item

document.querySelector('body').addEventListener('dblclick', function(event) {

//Double click on list_item to remove

if (event.target.classList[0] === 'list_item') {

event.target.remove();

var lists = list.innerHTML;

localStorage.setItem('lists', lists);

}

//Double click list_item_text to edit

if (event.target.classList[0] === 'list_item_text') {

event.target.contentEditable = true;

//Click enter to complete edit

event.target.addEventListener("keydown", function(e) {

if (e.keyCode == 13) {

var lists = list.innerHTML;

localStorage.setItem('lists', lists);

event.target.contentEditable = false;

}

}, false);

}

});

var current_d = new Date;

var current_h = current_d.getHours();

var current_m = current_d.getMinutes();

//Make with two numbers

if (current_h <= 9) {

current_h = "0" + current_h;

}

//Make with two numbers

if (current_m <= 9) {

current_m = "0" + current_m;

}

current_time.innerHTML = current_h + ":" + current_m;

/*

if (current_time.textContent === "23:59") {

localStorage.clear();

console.log("localStorage cleared!");

}

*/

if (current_h > 22 && current_m > 58) {

localStorage.clear();

console.log("localStorage cleared!");

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值