todolist程序

深藏阁楼爱情的钟 2023-06-24 08:15 4阅读 0赞

## todolist ##

###### 以jq+JavaScript编程的todolist小程序 ######

主要html代码如下：

<header>
    			<section>
    					<label for="title">ToDoList</label>
    					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
    			</section>
    		</header>
    		<section>
    			<h2>正在进行 <span id="todocount"></span></h2>
    			<ol id="todolist" class="demo-box"></ol>
    			<h2>已经完成 <span id="donecount"></span></h2>
    			<ul id="donelist"></ul>
    		</section>
    		<footer>
    			Copyright © 2014 todolist.cn 
    			<a href="javascript:;" id="clear">clear</a>
    		</footer>

css代码根据自己的想法自行编写就好  
js代码分为五个部分，如下所示：  
1.text文本框中输入数据，需要将输入的数据添加到页面中去

$("#title").on("keydown",function(ev){ 
    		if (ev.keyCode === 13) { 
    		    if($(this).val() === ""){ 
    			    alter("请输入内容！");
    		    }else{ 
    			    todoData = getData();
    			    todoData.push({ title:$(this).val(),done:false});
    			    saveData(todoData);
    			    load();
    			$(this).val("");
    		}
    	}
    });

2.点击a，删除对应的数据

$("#todolist,#donelist").on("click","a",function(){ 
    	var data = getData();
    	var index = $(this).attr("id");
    	data.splice(index,1);
    	saveData(data);
    	load();
        });

3.点击checkbox，完成正在进行和已经完成的事项的切换

$("#todolist,#donelist").on("click","input[type=checkbox]",function(){ 
    	// 先读取本地存储数组
    	var data = getData();
    	var index = $(this).siblings("a").attr("id");
    	data[index].done = $(this).prop("checked")
    	//保存数据
    	saveData(data);
    	// 渲染页面
    	load();
        });

4.点击clear，删除页面所有元素

$("#clear").click(function(){ 
        	var data = getData();
        	data.splice(0);
        	saveData(data);
        	load();
        });

当然还有程序执行的支持逻辑：

最终效果图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221203455895.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NzY4NTY0,size_16,color_FFFFFF,t_70