JavaScript实现精美Todolist

最新推荐文章于 2024-08-11 11:00:32 发布

小羊斩肖恩

最新推荐文章于 2024-08-11 11:00:32 发布

阅读量777

点赞数 9

文章标签： javascript 学习

本文链接：https://blog.csdn.net/May_as_well/article/details/140823169

版权

这周刚学习完JavaScript基础知识，并自己写了一项Todolist作品，给大家分享一下我的作品，并带着实现一下

作品展示

背景有雪花飘动的效果，右下角也有个小人，这个小人是动态的效果，你鼠标在哪个坐标它就会看向哪里，并且还会眨眼

每次鼠标点击，对应位置会有随机颜色的文字出现，并有烟花效果

对每一项任务都是可以设置时间和删除的

JavaScript功能实现讲解

任务渲染模块：

从浏览器中的数据库读取数据，并用JSON方法将数据转换为数组

然后用map方法将数组的数据用模版字符串的方式返回小li，最终将所有小li全部

添加到ul中，这样数据渲染就成功了

  const data = localStorage.getItem('tesk')
  const arr = data ? JSON.parse(data) : []
  const ul = document.querySelector('.list ul')
  const kuo = document.querySelector('.kuo')
 
  // 3. 渲染模块函数
  function render() {
    // 遍历数组 arr，有几个对象就生成几个 tr，然后追击给tbody
    // map 返回的是个数组  [tr, tr]
    const trArr = arr.map(function (item, i) {

      let time = item.time ? item.time : "暂未设置时间"
      time = item.istrue ? '您已完成' : time
      const timestyle = item.time =='已超时' ?'red':''
      const chek = item.istrue ? 'checked' : '';
      const line = item.istrue ? 'line':''
      const ha = item.istrue ? 'line' : ''
      const jj = item.import == '重要' ? '骂' :'眨眼'
      return `
        <li>
            <input type="checkbox" name="gou" id="" ${chek}>
            <div class="content">
              <div class="text ${line}">${item.text}</div>
              <div class="time ${timestyle}">${time}</div>
            </div>
           <div>
              <img src="./images/${jj}.png" alt="">
              <img class="zhan" src="./images/zhankai.png" alt="" data-id=${i}>
              
            </div>
          </li>
        `
    })
    document.querySelectorAll('[data-id="1"]')
    
    // 追加给ul
    // 因为 trArr 是个数组， 我们不要数组，我们要的是 trArr的字符串 join()
    ul.innerHTML = trArr.join('')
    zhankaile()
    checkbox()
    
  }
  render()

当天月份时间的获取

 // 获取当前日期
  const today = new Date();

  // 获取月份和星期几
  const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  
  const monthIndex = today.getMonth();
  const dayIndex = today.getDay();
  const dateNumber = today.getDate();
  const dateString = `${months[monthIndex]}${dateNumber}日 ${days[dayIndex]}`;
  document.querySelector('.date').innerHTML=dateString
  //判断
  function isElementHidden(element) {
    return window.getComputedStyle(element).getPropertyValue('display') == 'none';
  }

添加数据功能模块：

读取input输入框和下拉框的值，然后通过声明空对象，将数据添加到空对象中，再然后将对象添加到数组的最后边，最后再浏览器的数据库中更新数组

//添加数据功能模块
  let addInput = document.querySelector('.add input')
  addInput.addEventListener('keyup', function (e) {
    if (e.key === 'Enter') {
      
      let newText = addInput.value
      let importantInput = document.querySelector('.importantL').value
      if (newText === '') {
        return alert('输入内容不能为空')
      }
      //声明空对象
      const obj = {}
      obj.text = newText
      obj.import = importantInput
      obj.istrue =false
      arr.unshift(obj)
      localStorage.setItem('tesk', JSON.stringify(arr))
      render()
      // 重置表单
      addInput.value = ''
    }
  })

推迟时间功能模块

在点击确认按钮后获取下拉框中的value值，如果这项任务本身没有设置时间，直接修改时间就OK了，如果本身就有时间，就将两者时间相加，在展示在时间块里

HTML代码

<div class="kuo" >
<select name="selctTime" class="selctTime" aria-placeholder="推迟">
  <option value="">推迟</option>
<option value="5">5分钟后</option>
<option value="15">15分钟后</option>
<option value="30">30分钟后</option>
<option value="60">1小时后</option>
<option value="180">3小时后</option>
<option value="明天">明天</option>
</select>
<div class="ok">
  确认
</div>
<div class="delete">
<img src="./images/delete.png" alt=""></div>
</div>

JavaScript代码

  //推迟时间模块
  const ok = document.querySelector('.ok')
  const selctTime = document.querySelector('.selctTime')
  ok.addEventListener('click', function () { 
   
    // console.log(li)
    if (selctTime.value) { 
      const li = document.querySelector('.suo1').parentNode.parentNode.children[2].children[1]
      
      const time = document.querySelector('.suo1').parentNode.parentNode.children[1].children[1]
      if ((time.innerHTML == '暂未设置时间' || time.innerHTML == '已超时') && selctTime.value != '明天') {
        const temp = selctTime.value
        let hours = Math.floor(temp / 60) >= 10 ? Math.floor(temp / 60) : '0' + Math.floor(temp / 60)
        let mins = temp % 60 >= 10 ? temp % 60 : '0' + temp % 60
        time.innerHTML = hours + ":" + mins + " 小时后"
      } else if (time.innerHTML == '明天') { 
          alert('请于明天再修改哦！')
      } else if (selctTime.value == '明天') {
        time.innerHTML = '明天'
      }else{ 
        let temp = time.innerHTML
        let hours = parseInt(temp.slice(0,2));
        let minutes = parseInt(temp.slice(3, 5));
        temp = (+hours)*60 + (+minutes) + (+selctTime.value)
        console.log(+minutes)
        hours = Math.floor(temp / 60) >= 10 ? Math.floor(temp / 60) : '0' + Math.floor(temp / 60)
        mins = temp % 60 >= 10 ? temp % 60 : '0' + temp % 60
        time.innerHTML = hours + ":" + mins + " 小时后"
      }
        if(time.classList.contains('red')) time.classList.remove('red')
      // document.querySelector('.red').classList.remove('red')
      arr[li.dataset.id].time = time.innerHTML
      localStorage.setItem('tesk', JSON.stringify(arr))
      render()

    }
    // console.log(11111)
    selctTime.value = ''
    kuo.classList.remove('active')
    let temp = document.querySelector('.suo1')
    if (temp) {
      temp.src = "./images/zhankai.png"
      temp.classList.remove('suo1')
    }
  })

删除模块实现

当点击删除选项后，浏览器会有弹窗问你‘您确定要删除这项任务吗？’当点击确定后才会删除

点击取消就不会删除逻辑主要就是吸纳获取你点击的是数组中的哪个元素，然后将其在数组中删除，最后再浏览器中数据库中更新即可

  //删除模块
  const deletes=document.querySelector('.delete')
  deletes.addEventListener('click', function () {
    if (confirm('您确定要删除这项任务吗？')) { 
    const li = document.querySelector('.suo1').parentNode.parentNode.children[2].children[1]
    arr.splice(li.dataset.id, 1)
    localStorage.setItem('tesk', JSON.stringify(arr))
    render()
     
      //document.querySelector('.suo1').classList.remove('suo1')
      
    }
    kuo.classList.remove('active')
    let temp = document.querySelector('.suo1')
    if (temp) {
      document.querySelector('.suo1').classList.remove('suo1')
       temp.src = "./images/zhankai.png"
    }
  })