待办事项下拉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当日待办事项列表相关推荐
- 待办事项下拉html代码,SRM移动应用之待办事项模块
前言 对于使用angular开发的攻程师们来说,升级是一件非常痛苦的事情.AngularJS最大版本号只有1.x,2.x/4.x的版本号都是针对于全新的框架Angular,不向后兼容导致要花费大量的时 ...
- 待办事项下拉html代码,HTML5 + jQuery 实现日历待办事项demo
< head > < meta http-equiv = "Content-Type" content = "text/html; charset=ut ...
- 灰色简约三级CSS下拉菜单代码
代码简介: 又一款CSS Menu,银灰色下拉菜单,老外网站扒下来的,兼容性还不错.它最多可以支持三级,如果你的菜单项目很多,你可以自己扩展,一般都是成对出现的标签,分清楚就可以了. 代码内容: &l ...
- html5折叠卡片,基于HTML5折叠卡片式下拉菜单代码
基于HTML5折叠卡片式下拉菜单代码.这是一款基于jQuery+CSS3+HTML5实现的下拉列表框特效代码.效果图如下: 实现的代码. hmtl代码: 爱编程 爱编程 jQuery特效 CSS3特效 ...
- 无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
- git常用命令,项目删除原有github连接并重新连接,回滚,下拉分支代码,切换分支
下拉分支代码 $ git clone https://gitea.https.xiaozhuschool.com/APKDevelopment/YouYuanSellingWineMachine.gi ...
- 可控制导航下拉方向的jQuery下拉菜单代码
可控制导航下拉方向的jQuery下拉菜单代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- 纯CSS实现简约大方灰紫色下拉菜单代码
代码简介:又一个漂亮的纯CSS实现的下拉导航菜单,横向布局,适合作网站导航条,银色渐变色,鼠标放上更换菜单背景,用户体验极好,而且兼容性好,特别是对IE比较友好,火狐下也几乎不错位,推荐给站长使用. ...
- 动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
最新文章
- OpenCV 使用方向梯度直方图估计图像旋转角度
- boost::rethrow_exception相关的测试程序
- CentOS 6 安装Hadoop 2.6 (四)运行简单例子
- java中volatile的使用方式
- Linux的open函数的调用过程,Linux 中open系统调用实现原理
- Guava学习笔记:EventBus(转)
- kaggle房价预测特征意思_Kaggle初探--房价预测案例之数据分析
- 为什么实验是领英 DNA 的核心部分?
- 脉歌蓝牙耳机线评测_漂亮的高音质蓝牙耳机 脉歌MACAW TX-90评测
- highcharts
- 13. Window blur() 方法
- linux命令行下如何播放视频,linux播放视频命令
- web前端开发面试题
- win7自带照片查看器
- 单反拍摄技巧:利用直方图曝光
- getResource和getResourceAsStream
- 彻底搞懂MySQL的索引
- OBS Studio 录制视频画面很糊,不清晰,如何解决?
- 【algorithm】源码详解中国大陆新身份证号码算法
- 未来的计算机漫画,搞笑漫画:能预知未来有多可怕?大雄如此试了,结果很失落...
热门文章
- 《自动控制原理》个人笔记
- openwrt系统mt7621固件编译
- 用cmscan挖掘ncRNA信息
- 如果你构造了一个统计量其分布不容易确定,如何通过实验的方法给出其相应分布的分位数?
- 用Laravel-admin搭建问卷系统(持续更新)
- 杨中科 多线程 生成索引_遇见植物,发现精彩首届中科院核心植物园青年科学节暨版纳植物园第五届青年科学节举行...
- 断点回归(regression discontinuity design)学习笔记
- topik怎么读_自学韩语 如何拿下TOPIK高级证明?资料无偿
- 移动号网络运营商无服务器,【分享】亲身经历:解决移动4G无信号无服务的问题...
- cad2020卸载工具_2020年领先的网络工具和服务