todolist_todolist6 - CSDN
todolist 订阅
ToDoList是一款非常优秀的任务管理软件,用户可以用它方便地组织和安排计划。该软件短小精悍,仅有一个 数百 KB 的可执行文件就能完成所有功能,并且界面设计优秀,初级用户也能够快速上手 [1]  。 展开全文
ToDoList是一款非常优秀的任务管理软件,用户可以用它方便地组织和安排计划。该软件短小精悍,仅有一个 数百 KB 的可执行文件就能完成所有功能,并且界面设计优秀,初级用户也能够快速上手 [1]  。
信息
类    型
任务管理软件
特    点
短小精悍
中文名
todolist
最新版本
:v6.7.8
todolist概况
最新版本:v6.7.8 。
收起全文
  • 简单的todoList源码

    2019-02-12 16:50:23
    简单的todoList源码建立自适应的HTML页面引入css样式引入js 建立自适应的HTML页面 // An highlighted block <!DOCTYPE html> <html> <head> <meta ...


    在这里插入图片描述

    建立自适应的HTML页面

    // An highlighted block
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    		<title>ToDoList—最简单的待办事项列表</title>
    		<meta name="description" content="ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!" />
    		<link rel="stylesheet" href="index.css">
    	</head>
    	<body>
    		<header>
    			<section>
    				<form action="javascript:postaction()" id="form">
    					<label for="title">ToDoList</label>
    					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
    				</form>
    			</section>
    		</header>
    		<section>
    			<h2 onclick="save()">正在进行 <span id="todocount"></span></h2>
    			<ol id="todolist" class="demo-box">
    			</ol>
    			<h2>已经完成 <span id="donecount"></span></h2>
    			<ul id="donelist">
    			</ul>
    		</section>
    		<footer>
    			<a href="javascript:clear();">clear</a>
    		</footer>
    		<script type="text/javascript" src="index.js"></script>
    	</body>
    </html>
    

    引入css样式

    // An highlighted block
    body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
    header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
    section{margin:0 auto;}
    label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
    header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
    input:focus{outline-width:0}
    h2{position:relative;}
    span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
    ol,ul{padding:0;list-style:none;}
    li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
    p{margin: 0;}
    li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
    li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
    	padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
    ol li{cursor:move;}
    ul li{border-left: 5px solid #999;opacity: 0.5;}
    li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
    footer{color:#666;font-size:14px;text-align:center;}
    footer a{color:#666;text-decoration:none;color:#999;}
    @media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
    @media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}
    

    引入js

    // An highlighted block
    function clear(){
    	localStorage.clear();
    	load();
    }
    
    function postaction(){
    	var title = document.getElementById("title");
    	if(title.value == "") {
    		alert("内容不能为空");
    	}else{
    		var data=loadData();
    		var todo={"title":title.value,"done":false};
    		data.push(todo);
    		saveData(data);
    		var form=document.getElementById("form");
    		form.reset();
    		load();
    	}
    }
    
    function loadData(){
    	var collection=localStorage.getItem("todo");
    	if(collection!=null){
    		return JSON.parse(collection);
    	}
    	else return [];
    }
    
    function saveSort(){
    	var todolist=document.getElementById("todolist");
    	var donelist=document.getElementById("donelist");
    	var ts=todolist.getElementsByTagName("p");
    	var ds=donelist.getElementsByTagName("p");
    	var data=[];
    	for(i=0;i<ts.length; i++){
    		var todo={"title":ts[i].innerHTML,"done":false};
    		data.unshift(todo);
    	}
    	for(i=0;i<ds.length; i++){
    		var todo={"title":ds[i].innerHTML,"done":true};
    		data.unshift(todo);
    	}
    	saveData(data);
    }
    
    function saveData(data){
    	localStorage.setItem("todo",JSON.stringify(data));
    }
    
    function remove(i){
    	var data=loadData();
    	var todo=data.splice(i,1)[0];
    	saveData(data);
    	load();
    }
    
    function update(i,field,value){
    	var data = loadData();
    	var todo = data.splice(i,1)[0];
    	todo[field] = value;
    	data.splice(i,0,todo);
    	saveData(data);
    	load();
    }
    
    function edit(i)
    {
    	load();
    	var p = document.getElementById("p-"+i);
    	title = p.innerHTML;
    	p.innerHTML="<input id='input-"+i+"' value='"+title+"' />";
    	var input = document.getElementById("input-"+i);
    	input.setSelectionRange(0,input.value.length);
    	input.focus();
    	input.onblur =function(){
    		if(input.value.length == 0){
    			p.innerHTML = title;
    			alert("内容不能为空");
    		}
    		else{
    			update(i,"title",input.value);
    		}
    	};
    }
    
    function load(){
    	var todolist=document.getElementById("todolist");
    	var donelist=document.getElementById("donelist");
    	var collection=localStorage.getItem("todo");
    	if(collection!=null){
    		var data=JSON.parse(collection);
    		var todoCount=0;
    		var doneCount=0;
    		var todoString="";
    		var doneString="";
    		for (var i = data.length - 1; i >= 0; i--) {
    			if(data[i].done){
    				doneString+="<li draggable='true'><input type='checkbox' onchange='update("+i+",\"done\",false)' checked='checked' />"
    				+"<p id='p-"+i+"' onclick='edit("+i+")'>"+data[i].title+"</p>"
    				+"<a href='javascript:remove("+i+")'>-</a></li>";
    				doneCount++;
    			}
    			else{
    				todoString+="<li draggable='true'><input type='checkbox' onchange='update("+i+",\"done\",true)' />"
    				+"<p id='p-"+i+"' onclick='edit("+i+")'>"+data[i].title+"</p>"
    				+"<a href='javascript:remove("+i+")'>-</a></li>";
    				todoCount++;
    			}
    		};
    		todocount.innerHTML=todoCount;
    		todolist.innerHTML=todoString;
    		donecount.innerHTML=doneCount;
    		donelist.innerHTML=doneString;
    	}
    	else{
    		todocount.innerHTML=0;
    		todolist.innerHTML="";
    		donecount.innerHTML=0;
    		donelist.innerHTML="";
    	}
    
    	var lis=todolist.querySelectorAll('ol li');
    	[].forEach.call(lis, function(li) {
    		li.addEventListener('dragstart', handleDragStart, false);
    		li.addEventListener('dragover', handleDragOver, false);
    		li.addEventListener('drop', handleDrop, false);
    
    		onmouseout =function(){
    			saveSort();
    		};
    	});		
    }
    
    window.onload=load;
    
    window.addEventListener("storage",load,false);
    
    var dragSrcEl = null;
    function handleDragStart(e) {
      dragSrcEl = this;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.innerHTML);
    }
    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      e.dataTransfer.dropEffect = 'move';
      return false;
    }
    function handleDrop(e) {
      if (e.stopPropagation) {
        e.stopPropagation(); 
      }
      if (dragSrcEl != this) {
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
      }
      return false;
    }
    
    
    展开全文
  • &lt;%--实现功能:1添加功能:将任务输入到编辑框回车会判断有没有内容 如果有内容就会添加到任务列表中 没有内容不添加 (+号实现相同功能) 2.删除功能:将要删除的勾选上然后单击‘-’会删除选择内容 如果...

    实现功能

        1添加功能:将任务输入到编辑框回车会判断有没有内容 如果有内容就会添加到任务列表中 没有内容不添加 (+号实现相同               功能

         2.删除功能将要删除的勾选上然后单击‘-’会删除选择内容 如果没有多选,默认会从删除最后一个--%>

    代码

    <%--
      Created by IntelliJ IDEA.
      User: zmillionaire
      Date: 18-6-5
      Time: 下午9:12
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    </head>
    <body>
    输入任务:<input id="hi" type="text"> <button  id="bt1" type="button">+</button> <button id="bt2" type="button">-</button>
    <br>
    <script>
        var idOfElement=0;
        var a=[];
        function displayTask() {
            fa=document.body;
            for(var i=0;i<a.length;i++)
            {
                fa.appendChild(a[i]);
            }
        }
        function createTask() {
    
            if($("#hi").val())
            {
    
                var li=document.createElement("class");
                var text=document.createTextNode($("#hi").val())
                var butt=document.createElement("input");
                butt.setAttribute("type","checkbox");
                // butt.setAttribute("checked","");
                butt.setAttribute("id",'a'+idOfElement.toString());
                li.appendChild(butt);
                li.appendChild(text);
                butt=document.createElement("br");
                li.appendChild(butt);
                li.setAttribute("id",idOfElement.toString());
                idOfElement++;
                a.push(li);
    
                $("#hi").val("");
    
            }
    
        }
        function rmChecked()
        {
            for(var i=0;i<a.length;i++)
            {
                if(a[i].childNodes[0].getAttribute("checked"))
                {
                    $(a[i]).remove();
                    a.splice(i,1);
                    i--;
                }
            }
    
        }
        function rmInput()
        {
            var num=parseInt($("#hi").val());
            if(a.length>0)
            {
                if(!isNaN(num))
                {
                    if(num>=0 && num < a.length)
                    {
                        $(a[num]).remove();
                        a.splice(num,1);
                        $("#hi").val("");
                        displayTask();
                    }
                }
    
    
            }
        }
        document.body.οnclick=function (ev) {
            var obj=document.elementFromPoint(ev.clientX,ev.clientY);
            if(obj.id==="bt1")
            {
                createTask();
                displayTask();
            }
            else if(obj.id==="bt2")
            {
                rmInput();
                rmChecked();
            }
            else if(isNaN(parseInt(obj.id)))
            {
                obj.setAttribute("checked",true);
            }
        }
        $("#hi").keydown(
            function (e) {
                if(e.which==13)
                {
                    createTask();
                    displayTask();
                }
            }
        );
    </script>
    </body>
    </html>
    

    展开全文
  • 啦啦啦效果如下地址:点击打开链接body { line-height: 1; font-family: "Lato", sans-serif; background-color: #EFF1F2; } .todo{ width: 70%; margin: 1em auto 3em; ... bac...

    啦啦啦

    效果如下地址:

    点击打开链接

    body {
        line-height: 1;
        font-family: "Lato", sans-serif;
        background-color: #EFF1F2;
    }
    .todo{
        width: 70%;
        margin: 1em auto 3em;
        border: 1px solid #efefef;
        background-color:aquamarine;
    
    }
    .thing-input {
        border: 1px solid #dedede;
        padding-left: 10px;
        width: 70%;
        height: 35px;
        color: #555;
    }
    .clearList{
        color: #555;
        background-color:darkkhaki;
        width: 100px;
        height: 38px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .listul ul li input,ul, li {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    .list li{
        border: 1px solid #dedede;
        width: 70%;
        height: 35px;
        color: #555;
        font-size: 30px;
        background-color:salmon; 
        list-style:none
    }
    .list li button{
            background-color: transparent;
    	border: 1px solid #3465A4;
    	color: #ddd;
    	visibility: hidden;
    	font-size: 20px;
    	font-weight: bold;
    }
    
    .list li:hover > button {
    	visibility: visible;
    }
    .list li label {
    	display: inline-block;
    	width: 70%;
    	font-size: 20px;
    	line-height: 24px;
    	color: #fcfcfc;
    	z-index: 2;
    	overflow: hidden;
    }
    
    

    <html>
    <body οnlοad="initList();">
    <div class="todo">
                <input type="text" placeholder="在此输入你将要做的事情按回车键结束" id="thing" class="thing-input" οnkeypress="getKey();">
                <input type="button" value="清除列表" class="clearList" οnclick="delectAll();">
                <br>
                <br>
                <br>
                
                
                <section class="list">
                    <input type="checkbox" id="selectall" οnclick="select_cancelAll();">选择全部
         <ul class="list-item" id="listul">
         
                    </ul>
                </section>
                
            </div>
      </body>
    </html>
    function Todo(thing,time){
        this.thing=thing;
        this.time=time;
    }
    var todo1=new Todo("给老婆打电话","9:00");
    var todo2=new Todo("下班去市场买菜","12:00");
    var todo3=new Todo("上班","14:00");
    var mylist=[todo1,todo2,todo3];
    console.log(todo1);
    //添加事件,参数用于添加在label标签
    function add(labelText){
         //添加li标签
         var para=document.createElement("li");
           var element=document.getElementById("listul");
           element.appendChild(para);
           
           //往新的li标签添加复选框
           var inp=document.createElement("input");
           inp.type="checkbox";
           inp.onclick = isAll;
           
           element.lastChild.appendChild(inp);
           
           //往新的li标签添加label
           var lb=document.createElement("label");
           lb.appendChild(document.createTextNode(labelText));
           element.lastChild.appendChild(lb);
           
           //往新的li标签添加删除按钮
           var butt=document.createElement("button");
           butt.appendChild(document.createTextNode("删除"));
            element.lastChild.appendChild(butt);
           butt.οnclick=function(){
              butt.parentNode.parentNode.removeChild(butt.parentNode);
           };
    }
    //初始化todolist
    function initList(){
        console.log(mylist.length);
        for(var i=0;i<mylist.length;i++){
           add(mylist[i].time+mylist[i].thing);
       }
        
    }
    
    //添加
    function addListDo(){
        var labelText=document.getElementById("thing").value;
     
        if(labelText==""||labelText==null)return;
        else{
            //调用添加函数
         add(labelText);
           //将输入框重置
        document.getElementById("thing").value="";
        }
        
        }
        
        function getKey()  
    { 
        if(event.keyCode===13){  
        addListDo();
        }     
    }  
    
    //删除全部
    function delectAll(){
        var listul=document.getElementById("listul");
        listul.innerHTML="";
    }
    
    //选择全部的复选框onclick响应事件
    function select_cancelAll(){
         var sel=document.getElementById("selectall");
         
         if(sel.checked){
              var item=document.getElementById("listul");
              var items=item.getElementsByTagName("input");
             for(var i=0;i<items.length;i++){
                 items[i].checked=true;
             }
         }
         else{
              var item=document.getElementById("listul");
              var items=item.getElementsByTagName("input");
             for(var i=0;i<items.length;i++){
                 items[i].checked=false;
         }
     }
    }
    
    //是否全部被选中
    function isAll(){
      var sel=document.getElementById("selectall");
        if(this.checked==false){
          sel.checked = false;
          return;
        }
      else{
    var item=document.getElementById("listul");         
    var items=item.getElementsByTagName("input");
              
        for(var i=0;i<items.length;i++){
               if(items[i].checked==false){
                 return;
               }
          }
        sel.checked = true;
      }
    }


    展开全文
  • ToDoList 发现自己有点拖延症,就写了个APP,记录每天要做的事情。 一、Gif试一试 二、界面一览 三、炫技了 整个程序没有使用任何第三方开源库,虽说不要重复造轮子,可也得是我自己研究透彻的啊。 程序中写了...

    ToDoList

    发现自己有点拖延症,就写了个APP,记录每天要做的事情。

    一、代码地址

    https://github.com/happyfsyy/ToDoList
    代码很简单,欢迎提问题。

    二、炫技了

    整个程序没有使用任何第三方开源库,虽说不要重复造轮子,可也得是我自己研究透彻的啊。
    程序中写了4个自定义View,CalendarView是日历,GraphView是图表,ClockView是时钟,还有WheelView是滚轮,时间选择控件。
    之后会把几个自定义View总结下,全部发到博客上。

    三、界面一览

    gif

    四、功能介绍

    1. 首页
      1. 输入完成之后,点击“下一项”自动新建下一个List。
      2. 在每个List的前端,按两次删除键,可以删除这个List。
      3. 可以标记List完成与否。
    2. 日历
      1. 点击日历上的某一天,可以查看当天所记录的List。
      2. 日历可以左右滑动查看之前以及之后的记录。
    3. 图表
      1. 统计当月的List完成情况。
      2. 可以左右滑动查询每个月的统计。
    4. 闹钟
      1. 可以开关闹钟,提醒自己去记录List的完成状况。
      2. 可以修改闹钟时间。
      3. 可以添加闹钟。
    5. 闹钟编辑
      1. 可以修改闹钟名,闹钟时间
      2. 可以删除闹钟。
    展开全文
  • 效果图: ...--demo练习1,实现todolist效果1--> <template> <div id="app"> <input type="text" v-model='todo' /><button @click="add()">增加</button> &l...
  • TODOLIST

    2019-03-19 15:27:54
    react语法写的 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../l...
  • ToDo List

    2019-07-17 08:33:21
    TODO List 维护一个TODO List 好了,反正只有一周了,无论如何也不能再颓下去了.结束了就划掉好了. 可持久化数据结构 1. SPOJ MKTHNUM BZOJ 1901 BZOJ 3110 SPOJ COT middle ST 数据结构的提炼与压缩 ......
  • todoList

    2018-05-04 21:28:47
    开始写一些Vue.js的demo,刚开始,只能做到模仿别人,希望以后可以自己写代码:Github
  • toDoList

    2020-07-23 23:29:51
    todoList 使用Vue粗糙山寨微软的To Do 中的清单 实现了的功能 增加清单: enter按键事件, 把单个清单任务对象, 添加清单数组, 完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除 本地存储: ...
  • Todo list

    2019-07-22 17:05:11
    Elegant Microsoft To-Do desktop app https://klaussinani.github.io/ao 转载于:https://www.cnblogs.com/chucklu/p/10431155.html
  • TodoList

    2019-09-13 14:01:34
    <!doctype html> <html> <head> ...meta charset="utf-8">...TodoList</title> <script src="vue.js"></script> </head> <body> <div id="roo...
  • ToDoList 简易使用教程

    2019-01-25 11:54:55
    下载最新版的todolist软件 该软件目前最新版本为7.0.13,同时提供了windows、安卓、苹果系统的安装文件,可按需下载。建议在以下国外网站下载,国内的也有,但并不是最新版的。 安装todolist软件 完成下载后一...
  • 简单todolist功能的实现  用户点击提交按钮时,将input框的内容显示在下方的list中,同时清空list中内容。  &lt;body&gt; &lt;div id="root"&gt; &lt;div&gt; &lt;...
  • ToDoList 是一个功能强大的任务管理软件,很多细节都考虑到了,值得坚持使用。 ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图。 最明显的好处是强迫自己整理出任务的每个部分,理顺后按部就班的完成,...
  • ToDoList是一款任务管理软件,它能把要做的事情安排计划好,陈列起来,你只要按部就班地完成就好了,这样一来可以提高我们的工作效率。ToDoList的界面也是清晰明了,操作也十分简单。是一款非常不错的任务管理软件,...
  • 小程序差不多告一段落了,今天给大家展示如何用微信小程序实现todolist。 一:wxml 页面 <view class="todolist_container"> <view class="top"> <view class="top_left"> <text&
  • 去模仿大型的网站又怕耗费的时间太多,所以我选择模仿比较简单的todoList,优点在于页面简单,不用耗费太多时间,而缺点恰是页面过于简单,很多知识点都用不上,不过对于新手来说,先从简单开始,从简单的开发去巩固...
  • ToDoList是一款非常优秀的任务管理软件,用户可以方便地组织和安排计划。这是一个开源的项目,很多细节都考虑到了,推荐大家使用~ ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图。 最明显的好处是...
  • 甘特图插件 For Todolist

    2020-07-28 23:33:23
    甘特图插件 For Todolist 版本:gantt-viewer-1.0.1.1
  • 就是类似于这种,很多前端萌新都做过TodoList,这是必须经历的过程。由于我也是刚刚学习vue不久,所以在这里记录一下使用vue框架制作TodoList效果 一、增加列表项 拿到一个项目, 1. 首先,要先分析组件,拆分...
1 2 3 4 5 ... 20
收藏数 9,132
精华内容 3,652
关键字:

todolist