「兔了个兔」创意投稿大赛——todolist,写下你的兔年flag!

3,898 阅读2分钟

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

前言

新的一年新的目标,今天制作一个兔年任务列表,记录我们立下的flag,来年再看看实现了没有,先放上最终的效果图:

image.png

雪地背景和雪花特效

雪地背景是使用了ps将导入的图片进行裁剪出来的,给body选择器设置background-image属性将雪地设为背景图,雪花特效则直接导入了jq库,直接加载就行了

<div id="divSnow" style="position: absolute;height: 100%;width: 100%;"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="./Websnowjq.js"></script> 
<script>
    $(function () {
        $("#divSnow").websnowjq();
    }
</script>

3.gif

html

顶部部分添加div,里面添加lebel和input元素作为添加flag使用

<div class="header">
    <label>🐰年仪式感,快来立下你的2023flag吧!</label>
    <input type="text" id="title" name="title" placeholder="添加ToDo" required>
</div>

中间任务列表部分使用section标签,里面分别添加ol和ul标签,ol标签作为未完成列表,ul标签作为已完成的列表

<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>

js

js代码为了方便使用了jquery,完成和未完成的数据都要保存在浏览器里,可以为获取浏览器数据和保存数据设置两个方法

//读取本地存储
function getDate() {
  let data = localStorage.getItem('todolist')
  if (data) {
    return JSON.parse(data)
  } else {
    return []
  }
}
//保存本地存储
function setDate(local) {
  localStorage.setItem('todolist', JSON.stringify(local))
}

一开始进行一个初始化,获取保存在浏览器里的数据并将ul和ol标签里的内容和子节点都清空,然后循环数据,判断flag是否已完成,并添加子节点到对应的ul或ol标签里

load()
function load() {
  let todocount=0 //已完成目标的数量
  let donecount=0 //未完成目标的数量
  let data = getDate()
  $('ol,ul').empty()
  $.each(data, function (i, n) {
    console.log(i,n);
    if(n.done){ //判断是否完成
      donecount++
      $('ul').prepend(`<li><input checked="checked" type="checkbox"/><p>${n.title}</p><img id="${i}" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02f36880149744a5b31bab017e518e01~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li>`)
    }else{
      todocount++
      $('ol').prepend(`<li><input type="checkbox"/><p>${n.title}</p><img id="${i}" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02f36880149744a5b31bab017e518e01~tplv-k3u1fbpfcp-zoom-1.image" alt=""></li>`)
    }
  })
  $('#todocount').text(todocount)
  $('#donecount').text(donecount)
}

当在input框里键被按下的时候判断键码值是否为13(回车键键码值)并且输入框里有值,条件满足则获取保存在浏览器里的数据,将新加入的数据push进去再保存到浏览器里,再刷新一边数据

$('#title').keyup(function (e) {
    if (e.keyCode === 13 && $(this).val()) {
        //先获取本地存储
        let local = getDate()
        //更新数据
        local.push({ title: $(this).val(), done: false })
        setDate(local)
        $(this).val('')
        load()
    }
})

当我们目标实现的时候就可以点击check输入框,将未完成的目标添加到已完成的列表里,我们在添加创建flag的时候有将数组下标作为img标签的id属性,这样我们可以根据这个id也就是下标来将对应的flag添加到了已完成的列表中

$('ol,ul').on('click','input',function(){
    //获取本地存储
    let data=getDate()
    //获取数组下标
    let index=$(this).siblings('img').attr('id')
    //获取复选框的值
    data[index].done=$(this).prop('checked')
    //保存到本地
    setDate(data)
    //刷新
    load()
  })

最后就是目标右边图片的点击处理了,未完成列表点击可以将当前的元素从列表里删除,也是根据id也就是下标来处理的

$('ol').on('click', 'img', function () {
    //获取本地存储
    let data = getDate()
    //获取数组下标
    let index = $(this).attr('id')
    //删除
    data.splice(index, 1)
    //保存到本地
    setDate(data)
    //刷新
    load()
})

最后将完整代码放在码上掘金,不过没有做响应式样式会乱,建议点进码上掘金里去看