一个最简单的todolist网页实现

最新推荐文章于 2024-06-10 10:00:41 发布
最新推荐文章于 2024-06-10 10:00:41 发布
阅读量8k 收藏 10
点赞数 4
分类专栏： JavaScript 文章标签： jquery todolist html 网页监听
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011932817/article/details/80729104
版权 
 

实现功能：
 

    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> 

                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Zero_Clear
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    10
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Vue制作Todo List网页

				
			

			

				

					08-30
				

			

		

		

			
				
主要为大家详细介绍了Vue制作Todo List网页的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	



                

              
                



	

		

			

				
					
【前端】js 小项目，todolist 网页

				
			

			

				

					qq_49150070的博客
				

				

					03-15
					
					300
					
				

			

		

		

			
				
一共3个文件，html，index.css，index.js。主要是 jQuery，css 部分没难点。

			
		

	



                


  
              

                


	

		

			

				
					
推荐开源项目：OpenTodoList - 您的全能任务管理助手

					
最新发布

				
			

			

				

					gitblog_00001的博客
				

				

					06-10
					
					457
					
				

			

		

		

			
				
推荐开源项目：OpenTodoList - 您的全能任务管理助手
项目地址:https://gitcode.com/mhoeher/opentodolist
项目介绍
OpenTodoList 是一款功能强大的待办事项和笔记管理应用。它提供了本地存储和跨设备同步的功能，确保您的数据安全无虞。不仅限于传统的待办事项列表，OpenTodoList 还允许您组织笔记和图片，并将它们存放在可自定义的库中，...

			
		

	





	

		

			

				
					
TODOLIST--一个简单的网页，实现事件的添加、修改、删除、标记

				
			

			

				

					weixin_61144851的博客
				

				

					03-26
					
					225
					
				

			

		

		

			
				
一个简单网页

			
		

	



		

			
		



	

		

			

				
					
TodoList:一个模拟张贴板的网页

				
			

			

				

					07-24
				

			

		

		

			
				
待办事项列表：一个便利贴
视频演示：  : 
描述：
 我创建了这个项目来帮助像我一样倾向于将家务事的笔记贴在墙上某处的人。 它既用户友好又实用，所以请随意看一看！
进展如何：
烧瓶：
 这是我解决方案的核心。 如果这个网站使用 Flask（一个 Python 的网络框架），我已经创建了大部分功能。 它还引入了 Werkzeug 库，我用它来进行密码散列，以及 Jinja 模板机制，我用来创建一个主模板，已在所有其他页面中使用。
HTML：
 我已经开始创建一个主模板，其中包含除主要内容和标题之外的所有内容。 从那里，我创建了其他 html 页面并只填充了缺失的部分。
CSS：
 对于 CSS，我选择了 bootstrap 作为框架，并从那里做了很多，但是 style.css 文件包含了很多对徽标、正文和注释的调整。
JavaScript：
 项目一开始使用 JavaScript 来处理大

			
		

	





	

		

			

				
					
todolist:网页版代办事项列表

				
			

			

				

					07-07
				

			

		

		

			
				
TodoList
一个网页的代办事项列表
Quick Start
go get github.com/Bluek404/todolist 或者直接从releases下载
编辑config.yaml
运行
完成度
 多用户支持
 支持待办事项分类
 支持隐藏已完成事项
 支持添加待办事项
 支持编辑待办事项
 支持删除待办事项
 支持多终端登录自动同步各个终端列表
 支持自定义事项背景颜色
 支持代办事项支持时间提醒w
 支持指定日期提醒
 支持间隔一定时间提醒
 支持固定时间提醒（生日、闹钟等）
 支持达到时间使用邮件提醒
 支持达到时间使用短信提醒
 支持达到时间使用QQ提醒

			
		

	





	

		

			

				
					
ToDoList：简单列表

				
			

			

				

					02-19
				

			

		

		

			
				
在信息技术领域，一个"ToDoList"通常指的是一个简单的任务管理应用，用户可以在这个应用中创建、编辑和管理待办事项。在这个特定的案例中，"ToDoList：简单列表"可能是一个用JavaScript编写的轻量级项目，用于帮助...

			
		

	





	

		

			

				
					
todo:这是一个使用cookie的javascript todo网络应用程序

				
			

			

				

					03-09
				

			

		

		

			
				
总结，这个基于Cookie的JavaScript TODO应用程序提供了一个简单而实用的工具，通过JavaScript实现与用户的交互，利用Cookie进行数据持久化，从而提升用户在管理任务时的便捷性和效率。它展示了JavaScript在构建Web...

			
		

	





	

		

			

				
					
todolist（简单的待办事项列表)

				
			

			

				

					12-03
				

			

		

		

			
				
【标题】"todolist"是一个基于HTML和JavaScript的简单待办事项列表应用，它提供了基本的任务管理功能，便于用户记录和组织日常任务。  【描述详解】 这个应用的核心功能包括： 1. **添加任务**：用户可以输入新的待...

			
		

	





	

		

			

				
					
ToDoList1:简单的待办事项清单，采取 1

				
			

			

				

					06-02
				

			

		

		

			
				
在“描述”中提到的“简单的待办事项清单，采取 1”，可能指的是这个应用是作者系列作品中的第一个版本，或者是一个简化版的基础实现，旨在展示核心功能，比如创建任务项、保存任务以及任务的标记完成。  从提供的...

			
		

	





	

		

			

				
					
todolist.zip

				
			

			

				

					08-24
				

			

		

		

			
				
在本项目中，"todolist.zip" 包含了一个使用前端三大核心技术——HTML、CSS和JavaScript实现的简单待办事项列表应用。这个小巧的应用旨在帮助用户管理日常任务，通过交互式的界面来添加、删除和查看待办事项。下面将...

			
		

	





	

		

			

				
					
todolist.html

				
			

			

				

					09-28
				

			

		

		

			
				
实现todolist，可以让相互切换，块来下载吧，免费哟！，够够够，去挨个领，----------------------------------------------------------------------------------------------------------------------------

			
		

	





	

		

			

				
					
一个适合前端初学者的to do list

				
			

			

				

					07-26
				

			

		

		

			
				
一个简单的to do list 项目，前端初学的小伙伴可自取哦，基于javascript，html，css，不难也不简单，适合初学者

			
		

	





	

		

			

				
					
python todo-list网页实现

				
			

			

				

					weixin_42954615的博客
				

				

					10-05
					
					844
					
				

			

		

		

			
				
python todo-list网页实现开始先献上代码代码剖析main.py初始化添加根路由添加接口开始运行templates/todolist.html初始化标题操作部分todo项存放用的divscript部分初始化100ms一次接收数据新建项整理todo-list部分最后闭环github作者
开始
先献上代码
todolist.py
from flask import Flask,render_template
todolist = []
app = Flask(__name__)
@app.route

			
		

	





	

		

			

				
					
todolist（网页版记事本）

				
			

			

				

					fusheng_cn的博客
				

				

					07-24
					
					1498
					
				

			

		

		

			
				
todolist（网页版记事本）

			
		

	





	

		

			

				
					
期末大作业 | ToDoList网页设计 备忘录界面设计记录

				
			

			

				

					weixin_61726211的博客
				

				

					06-01
					
					669
					
				

			

		

		

			
				
期末大作业实录 || 本模块旨在为用户提供事项打卡和四象限事项记录的功能，用户可以在填写的事项完成之后在复选框内打钩表示事情的完成，也可以将事情按照“重要”和“着急”两个角度分别填入相应的位置，并填写截止日期，来提醒自己每日任务所在。


三、CSS样式代码




四、页面效果截图

这辈子没想过选了文科还要上理科的课，但是比Python爬虫有意思多了，希望再也不需要见到这个大数据学院的老师，信女愿戒掉猪肉以祈求与jing老师在课表安排上此生不复相见。

			
		

	





	

		

			

				
					
期末大作业 | ToDoList网页设计 番茄钟界面设计记录

				
			

			

				

					weixin_61726211的博客
				

				

					05-27
					
					1292
					
				

			

		

		

			
				
web前端期末大作业，ToDoList网页设计记录。番茄钟页面记录。

			
		

	





	

		

			

				
					
期末大作业 | ToDoList网页设计 一个晚上一个奇迹 用户登录界面

				
			

			

				

					weixin_61726211的博客
				

				

					05-18
					
					898
					
				

			

		

		

			
				
web前端期末大作业，ToDoList网页设计。登录页面设计记录：网页导航栏、banner通栏、登录界面、登录验证、跳转按钮、网页尾栏。

			
		

	





	

		

			

				
					
一款使用React、腾讯云开发的TodoList待办事项Web应用

				
			

			

				

					火星基地
				

				

					05-22
					
					797
					
				

			

		

		

			
				
1. 前言
最近写了一款基于React脚手架开发的 TodoList 网页应用，主要记录自己的代办事务，方便查看、管理、安排时间，提升效率。
PC Web端 + 移动端 + 黑暗模式，可日常使用。
没有复杂的界面，没有繁琐的设置，开箱即用，专注于任务管理。
应用网址：TodoList
2. 应用简介
1. 主要功能

邮箱注册、登录
注册邮箱地址、密码的验证
邮箱登录后，可绑定用户名，选择使用用户名登录同一账号
退出功能
页脚显示一句诗词（今日诗词）
实时时间显示
黑暗模式、白天模式切换，下次登录自动切换上

			
		

	





	

		

			

				
					
使用Vue开发一个简单的todoList

				
			

			

				

					04-11
				

			

		

		

			
				
Sure, I can help you with that! To develop a simple to-do list using Vue, we will need to first create a new Vue instance and then set up the data and methods for the app. Here's an example:

```
<!DOCTYPE html>
<html>
<head>
    <title>Vue Todo List</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Todo List</h1>
        <input v-model="newTodo" type="text" placeholder="Add new task">
        <button v-on:click="addTodo">Add</button>
        <ul>
            <li v-for="(todo, index) in todos" :key="index">
                {{ todo }} 
                <button v-on:click="deleteTodo(index)">Delete</button>
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: []
            },
            methods: {
                addTodo: function() {
                    if (this.newTodo !== '') {
                        this.todos.push(this.newTodo);
                        this.newTodo = '';
                    }
                },
                deleteTodo: function(index) {
                    this.todos.splice(index, 1);
                }
            }
        })
    </script>
</body>
</html>
```

In this code, we use the `v-model` directive to bind the input field to the `newTodo` data property, and the `v-for` directive to loop through the `todos` array and display each item in the list. We also create methods to add and delete items from the list. Let me know if you have any questions!

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值