失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 待办事项下拉html代码 一款简洁易用的HTML5当日待办事项列表

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

时间:2019-02-07 01:55:38

相关推荐

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

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!");

}

如果觉得《待办事项下拉html代码 一款简洁易用的HTML5当日待办事项列表》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。