我的练习demo——todolist
2021-02-21 19:09:40 # demo # web前端
  1. background animation:https://codepen.io/JowayYoung/details/GRKrJJX
  2. vanillaWenProject

前言

在抄完github上的vanillaWenProject项目后，准备写个抄后感。

基本版本

基本的功能:add + done
需要的有

  • 标题
  • 添加框 - input + add 按钮
  • 展示页面+页面上对应的完成按钮，也可以是复选框

杂乱的思路

  • 添加框和展示框各自属于一个div
  • 展示页面上出现的todos属于一个list，由js控制生成
  • 由localStorage进行缓存
  • 对于输入空的操作，因为感觉弹出框不是很配这个 css 所以决定用 js 控制 small 标签来代替

js流程

  1. 初始化:
  • list innerHTML clear
  • todos foreach 添加至DOM
  1. 监听 button 后调用添加函数
  • push 进 localstorage 里缓存的 item 数组
  • 添加节点
  • 更新 localstorage
  • clear list 内容以便下次使用

样式设计

  1. todo 的展示，container 使用组件提供，这样就可以框出一个框有利于todo的定位
  2. 利用 checkbox 实现todo 的 done 样式

添加组件库自带的nes-container is rounded的时候发现边框会变成虚线，指定高宽度后就可以恢复正常

但是后面我发现了，这个样式库放大或缩小到一定比例就会出现”问题”…

组件库里的复选框和 span 里的文字老是高度对不齐…我怀疑是我的问题…先搁置了

添砖加瓦

  • 删除 todo
    当鼠标悬浮至 li 上时出现 x 图标并实现删除功能
    随机为每个 todo 生成 id，通过相应 id 实现删除
    在删除函数内原本加了 init() ，但是这种情况就会导致已勾选的部分再执行删除操作之后会回到未勾选的状态
    直接 input 标签上 onclick 绑定函数，id 名设为 todo 对象的 id

  • 按回车键添加 todo
    输入框事件处理

  • 添加 done 后样式
    item 的 innerHTML 层级是 label -> input,span
    因为是即时变化，所以放在 ticked() 函数里，除此之外，还要注意初始化
    这里直接对 input 的兄弟节点加 class 名，样式在 css 中定义
    要注意是 nextElementSibling 而不是 nextSibling

  • 添加进度条
    todo 完成后进度条，设计是每完成一个 item 后更新进度条，星之卡比 顶部会出现金币动画
    因为这里加的星之卡比 icon 的 堆叠优先级高于 slider，所以 slider 想要和 icon 不重叠的话就要相对于上一级的 div 进行 position 定位。

主要问题是这里的各个 item 本身的金币动画时间和快速点击不同 item 之间时间的冲突，因为 js 本身单线程，它的东西都堆在队列里，然后用 setTimeout() 的话，时间又不一定是真正的时间(虽然可能差不多)
然后发现了 .animate() 可以解决问题…

进度条的进度靠重新获取 localstorage 的 item ，不知道为啥监听不了。

  • 背景色变换(已删)
    这里发现这个东西如果作为背景的话需要改动的东西很多，牵扯到视图，不太方便。更适合作为组件的背景图。所以已删除，但是这里的整理继续贴上来。
    repeating-linear-gradient + animation css 实现

最重要的一点是，要如何让条纹实现在窗口里展现无限播放的效果，这里指的并不是 infinite ，而是播放的视图的选择与计算。
讲一下这里的动画实现

1
2
3
4
5
6
7
8
9
10
11
12
.gradient {
  width: 500px;
  height: calc(1.4142 * 60px);
  background: repeating-linear-gradient(45deg, pink, pink 30px, transparent 0px, transparent 60px, pink 20px) 0 0 border-box;
  animation: twill 2s linear infinite;

}
@keyframes twill {
  to {
    background-position-y: calc(-1 * 1.4142 * 20vw);
  }
}

我们的角度是 45° ，这里的 1.412 指代的是根号 2 .

想说的话

应该到这里差不多基本结束了,因为这个项目并没有后端，也是一个很小很小的项目，并没有很多其他的功能。所以后续还会再开一个项目。
比起一些比较常见的基本功能，也尝试了 css 动画，虽然尝试失败2333，css 动画和 js 控制的动画又有一些不同，不过照收集的信息来看，多数推荐用 css 做动画。其实我用 js 写小游戏都觉得有点烦了…用 css 写动画也是一样的…因为需要很多的坐标和 step 变换。
还有一个小问题是，我用 js 绑定的 DOM 有点多，可能会影响到性能，但是作为练手的小 demo 来说，性能影响可以忽略不计。

Prev
2021-02-21 19:09:40 # demo # web前端