使用html-css-js实现to-do-list待办事项小项目（详细注释）

最新推荐文章于 2024-05-21 21:13:29 发布
VIP文章 最新推荐文章于 2024-05-21 21:13:29 发布
阅读量1.7k 收藏 18
点赞数 3
分类专栏： js-css-html 文章标签： js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36248539/article/details/117445279
版权

需求：

  • 1.添加事项
  • 2.点击多选框将事件移到已完成事件或未完成事件中
  • 3.删除事项
  • 4.计算待完成事项数目
  • 5.计算已完成事项数目
  • 6.展示/隐藏待办事项
  • 7.点击 清空事项 清空全部事项

新建to-do-list文件夹，用webstorm打开

在文件夹中新建html、css以及js文档
进入文件夹，使用终端安装normalize.css 相当于样式的resets

npm install --save normalize.css

html布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>to do list</title>
    <link rel="icon" href="images/favicon.png">
    <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/fonts.css">
</head>

<body>
    <div id='app'>
        <h1>Daily To-Do list </h1>
        <div class="todo-warpper">
        <!--时间板块-->
            <h2>
                <span id="getDay"></span><br>
                <span id="getDate"></span>
            </h2>
        <!-- +待办事项板块 -->
            <div class="info-box">
                <input id="input-todo" type="text" placeholder="创建待办事项">
                <button id="btn-add">+</button>
            </div>
        <!--初始 没有待办事项显示界面-->
            <div>
                <p class="status-free">
                    <img src="./images/beer celebration.svg" alt="">
                    没有待办事项！
                </p>
            </div>
        <!--显示待办事项-->
            <div>
                <p class="status-busy"></p>
                <ul class="todo-list" id="todolist"></ul>
            </div>
        <!--显示已完成待办事项-->
            <div>
                <p class="status"></p>
                <ul class="todo-list archived" id="archived"></ul>
            </div>
        <!--对待办事项以及已完成待办事项 进行控制-->
            <div class="control-buttons">
                <span id="showComplete-btn">展示已完成事项</span>
                <span id="clear-btn">清空事项</span
最低0.47元/天 解锁文章
sun-ying
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Javascript之网页版待办事项
weixin_45779841的博客
03-14 1689
本文使用原生JS实现站点 http://www.todolist.cn/ 的基本功能。 其中页面的HTML布局和CSS样式取用原站，JS部分为自己编写。 效果图 完整代码 HTML、JS部分 <!DOCTYPE html> <html> <head> <title>ToDoList—最简单的待办事项列表</title> &...
TO-DO-List:使用Javascript，HTML5和CSS3创建的待办事项列表
03-08
待办事项清单 使用Javascript，HTML5和CSS3创建的待办事项列表。 随着冬季girlscript工业训练的一部分，实习
To-Do-List:简单的待办事项清单
05-27
待办事项清单 简单的待办事项列表对于您的每一天任务可以节省所有tods非Coypright帮助 :glowing_star:
To-Do-List:使用React JS的待办事项列表
04-30
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 使用AJAX请求获取数据 与API后端集成 节点 Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
to-do-list-project:待办事项列表项目，可让您保存需要执行或已完成的任务
08-04
待办事项列表项目 在这个项目中，我设置了我的待办事项列表网页。 我的目标是添加创建、显示、拖放、刷新索引和完成状态等功能，在我的任务列表中删除和添加任务。 :red_circle: 现场演示 :hammer: 内置 HTML、CSS、JS 和 Webpack。 要启动并运行本地副本，请执行以下简单步骤： 转到。 按“代码”按钮并复制链接。 使用 git 命令git clone <link>克隆它。 运行npm install以安装包和依赖项。 要运行测试： 在终端上运行npm test 。 :blue_book: 学习目标 使用 webpack 捆绑 JavaScript。 了解如何使用正确的 ES6 语法。 使用 ES6 模块编写模块化 JavaScript。 作者 :bust_in_silhouette: 亚瑟GC GitHub： :handshake: :raised_hand: :raised_hand: 贡献 欢迎投稿、问题和功能请求！ 请随时查看。 :white_exclamation_mark: 致谢 :memo: 执照 这个项目
css写角标,css实现角标(示例代码)
weixin_39901571的博客
08-03 892
效果图：简单方式可以使用背景图片，但这里我使用的css来实现，最笨的方式是使用矩形div然后旋转遮挡就可以，角标实现换样式.checked-item {position: relative;padding : 7px 10px;border : 1px solid #ebebeb;text-align : center;color ...
JavaScript、Css/Html 实现待办事项列表
LinHt_CSDN的博客
08-19 2323
利用JavaScript、css/html技术设计一个简单的待办事项列表管理系统，主要包含新增待办事项、正在进行列表、完成列表共计三个模块。
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1955
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
html页面实现右下角弹窗提示,JS 实现右下角弹窗
weixin_36429576的博客
06-09 620
JS实现右下角弹窗.win-pop{width:200px;height:0;position:absolute;right:0;bottom:0;border:1px solid #999999;padding:5px;overflow:hidden;font-weight:bold;display:none;background:#FFF;font-size:12px;}.win-pop .t...
todo-list:使用JavaScript，HTML和CSS实现简单的待办事项清单
04-02
使用JavaScript ， HTML和CSS在实现简单的待办事项列表。 可项目的实时预览。 特征 旁注 了解如何使用“真棒字体”图标 工具： Visual Studio程式码 Linux终端 npm 网页包 Git和GitHub 第三方代码：
前端项目—待办事项（HTML+CSS+JavaScript实现）
Zincy星辰
04-13 2928
输入待办内容新建任务 完成事项后点击复选框，项目自动更新到已完成列表 重新点击已勾选的复选框，事项回到未完成列表 可以随时删除项目 可直接运行 项目源码（.html） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met
待办事项-JavaScript实现
m0_52083255的博客
01-22 1965
待办事项-JavaScript 实现 步骤： 创建页面布局 HTML 页面样式 CSS 实现内容 JavaScript HTML部分代码： 在这里插入代码片 CSS部分代码： 在这里插入代码片 JavaScript部分代码： 在这里插入代码片
利用html+css+js制作待办事项
weixin_49596018的博客
09-27 677
待办事项实现 1、实现效果 2、html代码 3、css代码 4、js代码
html文本角标设计,css实现角标
weixin_36276256的博客
06-05 1329
效果图：简单方式可以使用背景图片，但这里我使用的css来实现，最笨的方式是使用矩形div然后旋转遮挡就可以，角标实现换样式.checked-item {position: relative;padding : 7px 10px;border : 1px solid #ebebeb;text-align : center;color ...
html从右侧弹出面板,JavaScript实现网页右下角弹出窗口代码
weixin_29268331的博客
05-31 1193
JavaScript实现网页右下角弹出窗口代码 - www.webdm.cn#winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #666; margin:0; padding:1px; overflow:hidden; display:none;}#winpop .tit...
设计一个TODO List，页面结构如下图所示，要求：
weixin_43697050的博客
04-10 601
设计一个TODO List，页面结构如下图所示，要求： 使用HTML与CSS完成界面开发 实现添加功能：输入框中可输入任意字符，按回车后将输入字符串添加到下方列表的最后，并清空输入框 实现删除功能：点击列表项后面的“X”号，可以删除该项 实现模糊匹配：在输入框中输入字符后，将当前输入字符串与已添加的列表项进行模糊匹配，将匹配到的结果显示在输入框下方。如匹配不到任何列表项，列表显示空 注：以上代码实...
html + jquery 原生开发ToDo网页
编程书生的博客
08-06 561
html + jquery 原生开发ToDo网页 相信做前端的大家都见过这个网页吧 TodoMVC Vue的入门网页 今天我用原生html实现一下 首先看一下html部分的代码： <html> <head> <meta charset="utf-8"> <title>幸运记事</title> <link...
纯 JavaScript/CSS3/HTML5 实现的 TodoList | 简易实用|代码开源
qq_45685275的博客
03-21 1230
项目预览 项目预览地址（戳此）：TodoList 项目介绍 项目兼容多端，可在移动端、PC端使用。使用本地存储存储数据，可供个人计划使用，也可作为前端入门的项目学习。 功能介绍 添加、删除待办 设置待办为完成、撤销完成 本次存储，不删除本地存储数据一直有 简洁、实用 技术栈 JavaScript（ES6+） CSS3 HTML5 数据存储部分使用本地存储 localstorage，不删除缓存可持久存储数据。 项目地址 预览：Link 源码：Github地址 ...
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 353
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
如何使用postcss-px-to-viewport-8-plugin 配合Vant实现移动端适配
03-10
postcss-px-to-viewport-8-plugin是一个PostCSS插件用于将像素单位转换为视口单位，以实现移动端适配。Vant是一个基于Vue.js的移动端UI组件库。下面是使用postcss-px-to-viewport-8-plugin配合Vant实现移动端适配的步骤： 1. 首先，在项目中安装postcss-px-to-viewport-8-plugin和Vant： ``` npm install postcss-px-to-viewport-8-plugin vant ``` 2. 在项目的根目录下创建postcss.config.js文件，并配置postcss-px-to-viewport-8-plugin： ```javascript module.exports = { plugins: { 'postcss-px-to-viewport-8-plugin': { viewportWidth: 375, // 视口的宽度，单位为px viewportHeight: 667, // 视口的高度，单位为px unitPrecision: 3, // 转换后的视口单位保留的小数位数 viewportUnit: 'vw', // 转换的视口单位，可选值vw、vh、vmin、vmax selectorBlackList: ['.ignore'], // 需要忽略的CSS选择器，不进行转换 minPixelValue: 1, // 小于或等于1px不转换 mediaQuery: false // 是否在媒体查询中转换px } } } ``` 3. 在项目的入口文件（如main.js）中引入Vant的样式文件： ```javascript import 'vant/lib/index.css'; ``` 4. 在项目的样式文件中使用px作为单位编写样式，插件会自动将其转换为视口单位： ```css .example { width: 100px; height: 200px; font-size: 16px; } ``` 5. 在Vue组件中使用Vant的组件，并按照Vant的文档进行使用。 以上就是使用postcss-px-to-viewport-8-plugin配合Vant实现移动端适配的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值