不同版本实现ToDoList

一、静态网页原型 1、index.html

  
    
    
    
    
    
  
  
    
      
      

          
      
      
​
      
      

          

              
吃饭删除
              
睡觉删除
              
逛街删除
              
敲代码删除
          
      
      
​
      
      
      
    
  

2、index.css

*{
    padding: 0;
    margin: 0;
}
​
ul{
    list-style: none;
}
​
input[type='checkbox']{
    width: 15px;
    height: 15px;   
    vertical-align: middle;
}
​
body{
    font-size: 18px;
    color: #434544;
}
​
.contonter{
    overflow: hidden;
    width: 1200px;       
    margin: 10px auto; 
    border: 2px solid #E2E2E2;  
    box-sizing: border-box;  
    border-radius: 10px;
    padding: 20px;
}
​
header{
    width: 100%;
    height: 50px;
}
 
header input{
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;        
    outline: none;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}
​
section ul{
    margin: 30px 0;
    border: 1px solid #E9E9E9;
    border-radius: 5px;    
}
​
section ul li{
    position: relative;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E9E9E9;    
}
​
section ul li:last-of-type{
    border-bottom: none;
}
​
section ul li:hover{
    background-color: rgb(235, 234, 234);        
    cursor: pointer;
}
​
section ul li input{
    margin-right: 10px;
}
​
section ul li button{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
}
​
footer{
    width: 100%;
    height: 50px;
    float: left;
    line-height: 50px;
}
​
.footer_left{    
    float: left;
    padding-left: 10px;
    box-sizing: border-box; 
}
​
.footer_left input{    
    margin-right: 20px;    
    cursor: pointer;
}
​
.footer_right{
    float: right;
}
​
.footer_right button{
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

3、效果图

二、使用原生js实现ToDoList 1、index.html

  
    
    
    
    
    
    
    
    
  
  
    
      
      

          
      
      
​
      
      

          

              
暂无数据
          
          
      
      
​
      
      
      
    
    
    
  

2、index.js

//1、原始写法
// window.οnlοad=function(){
//     alert(111)
// }
//2、原始写法的es6写法
// window.οnlοad=()=>{
//     alert(111)
// }
//3、监听事件写法
// window.addEventListener('load',function(){
//     alert(111)
// })
//4、立即执行函数
// ;(function () {
//     alert(111);
// })();
​
//5、监听事件的es6写法
window.addEventListener('load', () => {
  // 获取元素
  const ipt = document.getElementById('ipt')
  let lis = document.getElementById('lis')
  const empty = document.getElementsByClassName('empty')[0]
  let countTask = 0
​
  countAll()
  isCheckedAll()
  countDoneTask()
  delAllDoneTask()
  
  ipt.onkeydown = (event) => {
    if (event.keyCode == 13) {
      //判断输入的值是否为空
      if (ipt.value.trim() == '')
        return alert('您输入的任务不能为空，请重新输入!')
      const doneChecked = document.getElementById('done')
      doneChecked.checked = false
      empty.style.display = 'none'
      //创建一个任务
      let taskObj = {
        id: getUuid(),
        content: ipt.value,
        done: false,
      }
      //创建节点
      let li = document.createElement('li')
      let input = document.createElement('input')
      input.setAttribute('type', 'checkbox')
      let txt = document.createTextNode(taskObj.content)
      let button = createElementWithTxt('button', '删除')
      li.appendChild(input)
      li.appendChild(txt)
      li.appendChild(button)
      //向节点的后面添加一个任务
      //lis.appendChild(li);
      //向节点的前面添加一个任务
      lis.insertBefore(li, lis.children[0])
      ipt.value = ''
      delToDoList()
      countAll()
      isCheckedAll()
      delAllDoneTask()
    }
  }
​
  
  function delToDoList() {
    btns = lis.getElementsByTagName('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].onclick = function (e) {
        if (confirm('确认要删除该任务吗?')) {
          lis.removeChild(this.parentNode)
          btns = lis.getElementsByTagName('button')
          stopPropagation(e)
          if (btns.length === 0) empty.style.display = 'block'
          const checkboxs = lis.getElementsByTagName('input')
          countTask = 0
          for (let i = 0; i < checkboxs.length; i++) {
            if (checkboxs[i].checked) {
              countTask++
            }
          }
          countDoneTask()
          countAll()
          const doneChecked = document.getElementById('done')
          if (btns.length === countTask && btns.length !== 0) {
            doneChecked.checked = true
          } else {
            doneChecked.checked = false
          }
        }
      }
    }
  }
​
  
  function countAll() {
    const all = document.getElementsByClassName('all')[0]
    const btns = lis.getElementsByTagName('button')
    all.innerText = btns.length
  }
​
  
  function countDoneTask() {
    const done = document.getElementsByClassName('done')[0]
    done.innerText = countTask
  }
​
  
  function isCheckedAll() {
    const doneChecked = document.getElementById('done')
    const checkboxs = lis.getElementsByTagName('input')
    doneChecked.onclick = function () {
      for (let i = 0; i < checkboxs.length; i++) {
        checkboxs[i].checked = this.checked
      }
      if (this.checked) {
        countTask = checkboxs.length
        countDoneTask()
      } else {
        countTask = 0
        countDoneTask()
      }
    }
    for (let i = 0; i < checkboxs.length; i++) {
      checkboxs[i].onclick = function () {
        let flag = true
        countTask = 0
        for (let i = 0; i < checkboxs.length; i++) {
          if (!checkboxs[i].checked) {
            flag = false
            break
          }
        }
        for (let i = 0; i < checkboxs.length; i++) {
          if (checkboxs[i].checked) {
            countTask++
          }
        }
        countDoneTask()
        // 设置全选按钮的状态
        doneChecked.checked = flag
      }
    }
  }
​
  
  function delAllDoneTask() {
    let checkboxs = lis.getElementsByTagName('input')
    const delDone = document.getElementById('del_done')
    delDone.onclick = function () {
      if (checkboxs.length === 0) return alert('请添加任务!')
      if (confirm('确认要删除所有已完成的任务吗?')) {
        countTask = 0
        for (let i = 0; i < checkboxs.length; i++) {
          if (checkboxs[i].checked) {
            lis.removeChild(checkboxs[i].parentNode)
            i--
          }
        }
        checkboxs = lis.getElementsByTagName('input')
        for (let j = 0; j < checkboxs.length; j++) {
          if (checkboxs[j].checked) {
            countTask++
          }
        }
        countDoneTask()
        btns = lis.getElementsByTagName('button')
        if (btns.length === 0) {
          const doneChecked = document.getElementById('done')
          doneChecked.checked = false
          empty.style.display = 'block'
        }
        countAll()
      }
    }
  }
​
  
  function stopPropagation(e) {
    e = e || window.event
    if (e.stopPropagation) {
      //W3C阻止冒泡方法
      e.stopPropagation()
    } else {
      e.cancelBubble = true //IE阻止冒泡方法
    }
  }
​
  
  function getUuid() {
    var s = []
    var hexDigits = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
    for (var i = 0; i < 36; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    s[14] = '4'
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
    s[8] = s[13] = s[18] = s[23] = '-'
    let uuid = s.join('')
    return uuid
  }
​
  
  function createElementWithTxt(tagName, Txt) {
    // 创建元素节点（标签）
    var node = document.createElement(tagName)
    // 创建文本节点
    var oTxt = document.createTextNode(Txt)
    // 将文本节点放到元素节点中
    node.appendChild(oTxt)
    // 返回元素节点
    return node
  }
​
  
  function trim(str) {
    return str.replace(/(^s*)|(s*$)/g, '')
  }
})

3、index.css

*{
    padding: 0;
    margin: 0;
}
​
ul{
    list-style: none;
}
​
input[type='checkbox']{
    width: 15px;
    height: 15px;   
    vertical-align: middle;
}
​
body{
    font-size: 18px;
    color: #434544;
}
​
.contonter{
    overflow: hidden;
    width: 1200px;       
    margin: 10px auto; 
    border: 2px solid #E2E2E2;  
    box-sizing: border-box;  
    border-radius: 10px;
    padding: 20px;
}
​
header{
    width: 100%;
    height: 50px;
}
 
header input{
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;        
    outline: none;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}
​
section ul{
    margin: 30px 0;
    border: 1px solid #E9E9E9;
    border-radius: 5px;    
}
​
section ul li{
    position: relative;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E9E9E9;  
    border-radius:5px;  
}
​
section ul:nth-last-child(1){
    border-bottom: none;
}
​
section ul li:hover{
    background-color: rgb(235, 234, 234);        
    cursor: pointer;
}
​
section ul li input{
    margin-right: 10px;
}
​
section ul li button{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
​
footer{
    width: 100%;
    height: 50px;
    float: left;
    line-height: 50px;
}
​
.footer_left{    
    float: left;
    padding-left: 10px;
    box-sizing: border-box; 
}
​
.footer_left input{    
    margin-right: 20px;    
}
​
.footer_right{
    float: right;
}
​
.footer_right button{
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

5、原生js升级版

;(function () {
    // 获取元素
    const todoData = document.querySelector('#ipt');
    const todoList = document.querySelector('#lis');
    const emptyData = document.querySelector('.empty'); 
    const delTodoBtn = document.querySelector('#del_done');
    const allNumber = document.querySelector('.all');
    const doneNumber= document.querySelector('.done');
    let todoItems = document.querySelectorAll('.todo-item');
    const todoDone = document.querySelector('#done')
​
    // 已完成的任务
    let done=0;
​
    // 执行方法
    delTodoAllItem();  
    checkTodoItem(); 
    doneTaskNumber();
    allTaskNumber();
​
    
    todoData.onkeypress = (event) => {
      if (event.which === 13) {
        if (todoData.value.trim() == '')  return alert('请输入任务名称')
        addTodoItem();
        delTodoItem();
        checkTodoItem();
        doneTaskNumber();
        allTaskNumber();
      }      
    }
    
    
    function addTodoItem(){
        let li = document.createElement('li');
        let input = document.createElement('input');
        let button = document.createElement('button');
        const todoContent = document.createTextNode(todoData.value.trim());
        const btnDelete = document.createTextNode('删除');
        button.appendChild(btnDelete);
        button.classList.add('del-item');
        input.setAttribute('type', 'checkbox')
        li.appendChild(input);
        li.appendChild(todoContent);
        li.appendChild(button);
        li.classList.add('todo-item');
        todoList.insertBefore(li, todoList.children[0]);
        todoData.value = '';
        emptyData.style.display = 'none';
        todoItems = document.querySelectorAll('.todo-item');
        todoDone.checked=false;
    }
​
    
    function delTodoItem(){
        const delTodo = document.querySelector('.del-item');
        delTodo.addEventListener('click',()=>{
            if (!confirm('确认要删除该任务吗?')) return
            delTodo.parentNode.remove();
            doneTaskNumber();
            allTaskNumber();
            if (todoItems.length === done) {
              todoDone.checked = true
            }
            if (todoList.children.length!= 1) return
            emptyData.style.display = 'block';
            todoDone.checked = false;
        })
    }
​
    
    function delTodoAllItem(){       
        delTodoBtn.addEventListener('click',()=>{
            if (done <= 0) return alert('请先添加任务')
            if (!confirm('确认要删除已完成任务吗?')) return
            todoItems.forEach(v=>{
                if (v.querySelector('input').checked) {
                    v.remove()
                }
            })            
            doneTaskNumber();
            allTaskNumber();            
            if (todoList.children.length != 1) return
            emptyData.style.display = 'block';
            todoDone.checked = false;
        })
    }
​
    
    function checkTodoItem(){
        let todoItemsInput = document.querySelectorAll('.todo-item input');
        const todoCheck = document.querySelector('.todo-item input');        
        todoDone.addEventListener('click',()=>{
            if (todoItemsInput.lenth === 0) return
            todoItemsInput.forEach((v) => (v.checked = todoDone.checked))
            doneTaskNumber();  
        })
        if (!todoCheck) return
        todoCheck.addEventListener('click', () => {
            todoItemsInput = document.querySelectorAll('.todo-item input');
            for (let i = 0; i < todoItemsInput.length; i++) {
              todoDone.checked = true
              if (!todoItemsInput[i].checked) {
                todoDone.checked = false;
                break;
              }
            }             
            doneTaskNumber();                     
        })        
    }
​
    
    function doneTaskNumber(){
        done = 0;        
        const todoItemsInput = document.querySelectorAll('.todo-item input');
        todoItemsInput.forEach(v=>{
            if(v.checked) done++
        })
        doneNumber.innerText=done
    }
​
    
    function allTaskNumber(){
        todoItems = document.querySelectorAll('.todo-item');
        allNumber.innerText = todoItems.length;
    }
})();

三、使用jQuery实现ToDoList 1、index.html

  
    
    
    
    
    
       
  
  
    
      
      

          
      
      
​
      
      

          

              
暂无数据
          
          
      
      
​
      
      
      
    
     
    
    
  

2、index.css

*{
    padding: 0;
    margin: 0;
}
​
ul{
    list-style: none;
}
​
input[type='checkbox']{
    width: 15px;
    height: 15px;   
    vertical-align: middle;
}
​
body{
    font-size: 18px;
    color: #434544;
}
​
.contonter{
    overflow: hidden;
    width: 1200px;       
    margin: 10px auto; 
    border: 2px solid #E2E2E2;  
    box-sizing: border-box;  
    border-radius: 10px;
    padding: 20px;
}
​
header{
    width: 100%;
    height: 50px;
}
 
header input{
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;        
    outline: none;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}
​
section ul{
    margin: 30px 0;
    border: 1px solid #E9E9E9;
    border-radius: 5px;    
}
​
section ul li{
    position: relative;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E9E9E9;  
    border-radius:5px;  
}
​
section ul:nth-last-child(1){
    border-bottom: none;
}
​
section ul li:hover{
    background-color: rgb(235, 234, 234);        
    cursor: pointer;
}
​
section ul li input{
    margin-right: 10px;
}
​
section ul li button{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
​
footer{
    width: 100%;
    height: 50px;
    float: left;
    line-height: 50px;
}
​
.footer_left{    
    float: left;
    padding-left: 10px;
    box-sizing: border-box; 
}
​
.footer_left input{    
    margin-right: 20px;    
}
​
.footer_right{
    float: right;
}
    
.footer_right button{
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

3、index.js

$(function () {
  
  $('#ipt').keyup(function (event) {
    if (event.keyCode == 13) {
      if ($('#ipt').val().trim() === '') return alert('请输入任务名称')
      addTodoItem()  
      delTodoItem() 
      isCheckedToDo() 
      doneTaskNumber()
      allTaskNumber()
      delAllTask()
    }
  })  
})


function addTodoItem() {  
  const li = `
  

    
    ${$('#ipt').val().trim()}
    删除
  
`
  $('#lis').prepend(li)
  $('#ipt').val('')
  $('.empty').css('display', 'none')
  $('#done').prop('checked', false)
}


function delTodoItem() {
  $('.del-item').off('click')
  $('.del-item').on('click', function () {
    if (!confirm('确认要删除该任务吗?')) return
    $(this).parent().remove()
    doneTaskNumber()
    allTaskNumber()  
    if ($('.todo-item input').length === $('.todo-item input:checked').length)
    $('#done').prop('checked', true)
    if ($('#lis').children().length != 1) return
    $('.empty').css('display', 'block')
    $('#done').prop('checked', false)
  })  
}


function isCheckedToDo(){    
    $('#done').click(function () {
      doneTaskNumber()
      $('.todo-item input').each(function () {
        $(this).prop('checked', $('#done').prop('checked'))
      })
    })

    iptArr = $('.todo-item input')
    iptArr.click(function () {
      doneTaskNumber()
      for (let i = 0; i < iptArr.length; i++) {
        $('#done').prop('checked', true)
        if (!iptArr[i].checked) {
          $('#done').prop('checked', false)
          break
        }
      }
    })             
}


function doneTaskNumber(){
    let count = 0;
    count = $('.todo-item input:checked').length;
    $('.done').text(count);
}


function allTaskNumber(){     
    $('.all').text($('.todo-item input').length) 
}


function delAllTask(){
    $('#del_done').off('click')    
    $('#del_done').click(function(){
        if ($('.todo-item input').length <= 0) return alert('请先添加任务')
        if ($('.todo-item input:checked').length <= 0 )
          return alert('还没有已完成任务')
        if (!confirm('确认要删除该任务吗?')) return
        $('.todo-item input:checked').parent().remove()
        doneTaskNumber()
        allTaskNumber()
        if ($('#lis').children().length != 1) return
        $('.empty').css('display', 'block')
        $('#done').prop('checked', false)
    })    
}

四、使用vue实现ToDoList 1、使用vue-cli创建项目

注意使用vue3

2、App

3、header

4、list

5、item

>

6、footer

7、index

>

五、使用react实现ToDoList 1、创建react脚手架

• 检查npm和node是否安装

• npm install -g create-react-app

• create-react-app hello-react

• cd hello-react

• npm start或者yarn start

2、如下载慢请将npm或yarn镜像切换成taobao镜像

NPM CONFIG SET REGISTRY HTTPS://REGISTRY.NPM.TAOBAO.ORG
// 配置后可通过下面方式来验证是否成功
npm config get registry

//安装yarn，将yarn镜像切换为淘宝镜像
npm i -g -yarn
yarn --vresion
// 查看下载源
yarn config get registry
// 更换为淘宝源
yarn config set registry  https://registry.npm.taobao.org

3、App

import React, { Component } from 'react'
import Header from './components/header'
import List from './components/list'
import Footer from './components/footer'
import './App.css'

export default class App extends Component {
  state = {
    todos: [
      { id: 1, name: '吃饭', done: true },
      { id: 2, name: '睡觉', done: false },
      { id: 3, name: '打代码111', done: true },
    ],
  }

  
  addListItem = (value) => {
    let { todos } = this.state
    let newTodos = { id: todos.length + 1, name: value, done: false }
    this.setState({todos: [newTodos, ...todos] })
  }

    
    updataDone=(id,done)=>{
        const newTodos= this.state.todos.map(v=>{
            if(v.id===id){
                return {...v,done}
            }
            return v
        })
        this.setState({ todos: newTodos })
    }

        
    removeListItem=(id)=>{
        const newTodos= this.state.todos.filter(v=>{
            return v.id!==id
        })
        this.setState({
            todos:newTodos
        })
    }

        
    checkedAll=(done)=>{
        const newTodos=this.state.todos.map(v=>{
            return {...v,done}
        })
        this.setState({
          todos: newTodos
        })
    }

        
    removeAllChecked=()=>{
        const newTodos=this.state.todos.filter(v=>!v.done)
        this.setState({
            todos:newTodos
        })
    }

  render() {
    return (
      
        

        
        
      
    )
  }
}

*{
    padding: 0;
    margin: 0;
}

ul{
    list-style: none;
}

input[type='checkbox']{
    width: 15px;
    height: 15px;   
    vertical-align: middle;
}

body{
    font-size: 18px;
    color: #434544;
}

.contonter{
    overflow: hidden;
    width: 1200px;       
    margin: 10px auto; 
    border: 2px solid #E2E2E2;  
    box-sizing: border-box;  
    border-radius: 10px;
    padding: 20px;
}

4、header

import React, { Component } from 'react'
import PropType from 'prop-types'
import './index.css'

export default class index extends Component {
    
    static propTypes={
        addListItem:PropType.func.isRequired
    }

        
    handleKeyUp=(event)=>{
        const {target,keyCode}=event
        //判断是否按得是回车键
        if (keyCode!==13) return
        //判断用户有没有输入值
        if (target.value.trim()==='') {
            alert("您输入的值不能为空，请重新输入!")
            return
        }
        //将用户输入的值传递过去
        this.props.addListItem(target.value)
        //将用户输入的值清空
        target.value=""
    }

    render() {
        return (           
            

                
            
     
        )
    }
}

header{
    width: 100%;
    height: 50px;
}
 
header input{
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;        
    outline: none;
    border: 1px solid #DFDFDF;
    border-radius: 5px;
}

5、list

import React, { Component } from 'react'
import PropType from 'prop-types'
import Item from '../item'
import './index.css'

export default class index extends Component {   

    static propTypes={
        todos:PropType.array.isRequired,
        updataDone:PropType.func.isRequired,
        removeListItem:PropType.func.isRequired
    }

    render() { 
        const {todos,updataDone,removeListItem}=this.props    

        return (
            

                
0?'empty':''}>
                    {
                        todos.map(v=>{
                            return 
                        })
                    }
                
            
        )
    }
}

section ul{
    margin: 30px 0;     
}

.empty{
    border: 1px solid #E9E9E9;
    border-radius: 5px;   
}

6、item

import React, { Component } from 'react'
import './index.css'

export default class index extends Component {
    state={
        mouse:false
    }

        
    mouseInOut=(flag)=>{
        return ()=>{
            this.setState({
                mouse:flag
            })
        }
    }

      
    updataDone=(id)=>{
        return (event)=>{
            this.props.updataDone(id,event.target.checked)
        }
    }  

      
    removeListItem=(id)=>{
        return ()=>{
            if (window.confirm("确认删除这个任务吗？")) {
                this.props.removeListItem(id)
            }
        }
    }  

    render() {
        const {id,name,done} = this.props
        const {mouse} = this.state

        return (
             

                 {name}{display:mouse?'block':'none'}}>删除
             
        )
    }
}

section ul li{
    position: relative;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E9E9E9;    
}

section ul li:last-of-type{
    border-bottom: none;
}

section ul li:hover{
    background-color: rgb(235, 234, 234);        
    cursor: pointer;
}

section ul li input{
    margin-right: 10px;
}

section ul li button{
    position: absolute;
    top: 10px;
    right: 10px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
}

7、footer

import React, { Component } from 'react'
import './index.css'

export default class index extends Component {
        
    checkedAll=(event)=>{
         this.props.checkedAll(event.target.checked)
    }

        
    removeAllChecked=()=>{
        this.props.removeAllChecked()
    }

    render() {    
        const {todos}=this.props
        const sum=todos.reduce((pre,item)=>{
            if(item.done){
                pre++
            }
            return pre            
        },0)       

        return (
            
        )
    }
}

footer{
    width: 100%;
    height: 50px;
    float: left;
    line-height: 50px;
}

.footer_left{    
    float: left;
    padding-left: 10px;
    box-sizing: border-box; 
}

.footer_left input{    
    margin-right: 20px;   
    cursor: pointer; 
}

.footer_right{
    float: right;
}

.footer_right button{
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background-color: #D5514C;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

六、效果

帅哥美女点个赞吧，源码：ToDoList: 使用不同版本实现方式来实现ToDoList