当前位置: 首页 > 开发杂谈 >

番外篇(2)一起来做 To Do List!- 知识篇

这次花了约三周的时间制作了简易的 To Do List,在此想纪录并分享一下我的作法以及制作过程中学习到、或重新厘清的知识点。作品主要是先跟着这部影片学习,再加入新功能及我自己的想法:

因内容较多,会分几个部分逐步学习。先让我们补足知识点,下一篇再实际将所有部分组合起来。若程序有写得太过繁琐的部分,也希望大家多包涵并不吝指教!先上个成品与程序码:
github // github page

createElement()、appendChild()、removeChild()

有时候会需要用 JS 来控制 HTML ,例如 To Do List 按下加号要让他生出一条代办事项。 createElement() 可以帮你达成心愿,只要把要生成的元素放在括弧里即可。例如我要生成一个 <ul>,要打:document.createElement('ul')

但是生成後,还必须告诉电脑你要把这个标签放在哪才行。例如: todoLi.appendChild(newTodo) 我要把 newTodo 这变数放到 todoLi 的下方。

可以放,当然也能拿走:todoLi.removeChild(newTodo)

classList.add()

刚刚用 JS 新增元素,那要帮它加 class 呢?使用 classList 并把要加的 class 名称放在括弧就行罗: .classList.add("todo-item")

localStorage

使用者好不容易输完代办事项,结果重整一下东西通通消失了!加上一些协助使用者能将资料存在本地端的程序码吧!打开 f12 ,选择 Application > Storage > Local Storage ,可以发现电脑会用 key 与 value 去储存资料。 key 代表储存资料的种类名称, value 代表该种类储存的值。这些资料除非使用者清除,不然就会一直待着。
https://ithelp.ithome.com.tw/upload/images/20210210/20129635Fl9thwuR1N.png

那要怎麽使用呢?

  • 储存: localStorage.setItem("key name",JSON.stringify(资料))
    之所以要加上 JSON.stringify() ,是因为本地端只能储存字串,所以必须先将资料转成字串的形式。
  • 取出: JSON.parse(localStorage.getItem("key name"))
    同理,因为本地端储存的是字串,要取出资料时要用 JSON.parse() 包起来,这样资料才会转回原本的形式(如阵列)。
  • 清除 key:localStorage.removeItem("key name")
    用这个指令能让特定 key 的资料清空。
  • 清除本地端:localStorage.clear()
    清空整个本地端。

若想知道更详细的介绍,请参考这篇文章

sortable 外挂

要让你的代办事项能被拖曳?使用这个外挂吧!设定方式很简单,下载:

//npm install
$ npm install sortablejs --save
//or bower install
$ bower install --save sortablejs

设定:

new Sortable(parent id name, {
    animation: 150, //物件移动的动画时间
    ghostClass: 'sortable-ghost' //拖曳时的 css 样式名称
});

举例来说如果我想让这个 list 里的 item 能被移动:

<ul id="itemList">
  		<li class="item1">1</li>
  		<li class="item2">2</li>
  		<li class="item3">3</li>
  		<li class="item4">4</li>
</ul>

必须写

new Sortable(itemList, {
    animation: 150, //物件移动的动画时间
    ghostClass: 'sortable-ghost' //拖曳时的 css 样式名称
});

flatpickr 外挂

其实,我本来是想用 input 做简易的日期时间输入栏,但写完後觉得对使用者很不方便也不够直觉,同时,要规范不合理的数字也要打好几行程序码。(不考虑 HTML 的 input type = date 属性,因为每个浏览器支援度不同,且无法限定使用者选的年月日,会跑出一些不合理的数字。)

google 後选择使用这个外挂。它能让点击 input 时自动出现月历与时间,方便使用者点选,同时也解决了上述的其他问题。

//npm install
$npm i flatpickr --save

设定如:

flatpickr(dateInput,{
    altInput: true,
    altFormat: "n/j", //年月日在input格子里的显示格式、斜线可换成你想要的分隔符号
    dateFormat: "m/d", //输入後的格式、斜线可换成你想要的分隔符号
    minDate: "today", //限定只能选今天以後的日期
    maxDate: "12/31", //限定只能选今年
    disableMobile: "true" //让手机不会显示原生 input 出现的样式
});
flatpickr(timeInput,{
    enableTime: true, 
    noCalendar: true, 
    dateFormat: "H:i", //时间格式、冒号可换成你想要的分隔符号
    time_24hr: true, //24小时制
    disableMobile: "true"
});

年、月、日设定格式的部分会使用到缩写,可以参考这个表

以上大致就是我在制作时遇到的几个新知识。除此之外,因为发现 indexOf 和 sort 我学习的不够透彻,因此也补充了铁人赛文章。希望对大家有所帮助!下篇我会解释任务拆解和制作流程。


相关文章:

  • 30天学会 Python: Day 16-图片处理
  • 亚马逊选品和运营哪个比较重要
  • 【Day 2】Google Apps Script - 平台介绍
  • 跨境电商的品牌人设营销是什么?
  • 人脸辨识-day16 应用层面--2
  • 亚马逊卖家优化listing需要注意的五个问题
  • 你要的是Entity Framework吗?
  • Day 18 | Frame Animation
  • Day 6 if else
  • 产品标题的长度怎么定?
  • Day24 斜线糖果文字
  • [Day 2] 从单体式迁移至微服务架构,支援模组化开发的 Web 框架可以解决什麽问题?
  • 找LeetCode上简单的题目来撑过30天啦(DAY26)
  • 速卖通平台产品信息优化攻略
  • wish平台如何查看和申诉产品品类?
  • Gutenberg 10.6 添加Duotone过滤器、查询模式轮播和最常用标签选择器
  • Monzo Bank教程:英国银行卡申请教程【教你国内注册申请欧洲银行卡】
  • 一键脚本:SmokePing一键安装/管理脚本
  • MovoCash虚拟信用卡教程:美国虚拟信用卡申请教程
  • WooCommerce 带动顾客购物的十种方法
  • 挖矿是什么?怎么挖矿怎么挖比特币?虚拟币比特币挖矿原理
  • 国外VPS服务器主机为什么比较便宜?
  • VPS评测:Clouvider Limited英国VPS性能测试
  • 瑞士银行开户指南:0门槛开户欧洲银行卡教程【Dukascopy开户教程】
  • 如何使用Hostinger的邮箱服务,Hostinger免费企业邮箱设置教程
  • PayPal国外买东西教程:银联卡(国内储蓄卡信用卡)怎么用PayPal买国外的东西更安全
  • DNS是什么?DNS有什么用?为什么要用DNS解析域名
  • WordPress建立数据库连接时出错怎么办?
  • Jungle Scout选品工具中文版好用吗?亚马逊选品为什么要用JungleScout
  • Google Play Store报错DF-DFERH-01怎么办