zoukankan      html  css  js  c++  java
  • Jquery开发&BootStrap 实现“todolist项目”

    作业题目:实现“todolist项目”

    作业需求:

    基础需求:85%
    参考链接http://www.todolist.cn/
    1. 将用户输入添加至待办项
    2. 可以对todolist进行分类(待办项和已完成组),用户勾选既将待办项分入已完成组,也可以将已完成变成未完成
    3. todolist的每一项可删除和编辑
    4. 下方有clear按钮,并清空所有todolist项
    5. 使用html、css、js、jquery编写

    编码规范需求:15%
    1. 代码有相应的注释
    2. 程序有文档说明文件(README.md参考:https://github.com/csrftoken/vueDrfDemo)
    3. 程序的说明文档必须包含的内容:程序的实现的功能、程序的启动方式、程序的运行效果
    4. 程序设计的流程图
    (可以参考:https://www.processon.com/view/link/589eb841e4b0999184934329)

    程序目录划分:

    css:样式
    js:js
    ToDoList.html:网站
    README.md:说明文档

    实现效果:

    1577009725469

    总结:

    体会到了数据渲染视图,数据驱动视图,需要多练习。

     

    html代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title>ToDoList-最简单的待办事项列表</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>
    <body>
        <!--头部栏 -->
        <header>
            <section>
                <form action="javascript:void(0);" id="form">
                    <label for="title">ToDoList</label>
                    <input type="text" name="title" id="title" placeholder="添加ToDo">
                </form>
            </section>
        </header>
        
            
        <!-- 中间 -->
        <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>
        <!-- 脚部栏 -->
    
        <footer>
            路飞学城todolist.cn <a href="javascript:;">clear</a>
        </footer>
    
        <script src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        
        
    
    
    </body>
    </html>
    View Code

    css代码:

    body {    
            margin:0;
            padding:0;
            font-size:16px;
            background: #CDCDCD;
        }
    
    header {
            height:50px;
            background:#333;
            background:rgba(47,47,47,0.98);
        }
    
    section{
        margin:0 auto;
    }
    label{
        float:left;
        width:100px;
        line-height:50px;
        color:#DDD;
        font-size:24px;
        cursor:pointer;
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    
    header input{
        float:right;
        width:60%;
        height:24px;
        margin-top:12px;
        text-indent:10px;
        border-radius:5px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
        border:none
    }
    
    input:focus{outline-width:0}
    
    h2{
        position:relative;
    }
    
    span{
        position:absolute;
        top:2px;
        right:5px;
        display:inline-block;
        padding:0 5px;
        height:20px;
        border-radius:20px;
        background:#E6E6FA;
        line-height:22px;
        text-align:center;
        color:#666;
        font-size:14px;
        }
    
    ol,ul{
        padding:0;
        list-style:none;
        }
    
    li input{
        position:absolute;
        top:2px;
        left:10px;
        width:22px;
        height:22px;
        cursor:pointer;
        }
    p{
        margin: 0;
    }
    li p input{
        top:3px;
        left:40px;
        width:70%;
        height:20px;
        line-height:14px;
        text-indent:5px;
        font-size:14px;
        }
    li{
        height:32px;
        line-height:32px;
        background: #fff;
        position:relative;
        margin-bottom: 10px;
        padding:0 45px;
        border-radius:3px;
        border-left: 5px solid #629A9C;
        box-shadow: 0 1px 2px rgba(0,0,0,0.07);
        }
    ol li{
        cursor:move;
    }
    ul li{border-left: 5px solid #999;
        opacity: 0.5;
        }
    li a{
        position:absolute;
        top:2px;
        right:5px;
        display:inline-block;
        width:14px;
        height:12px;
        border-radius:14px;
        border:6px double #FFF;
        background:#CCC;
        line-height:14px;
        text-align:center;
        color:#FFF;
        font-weight:bold;
        font-size:14px;
        cursor:pointer;
        }
    
    footer{color:#666;
        font-size:14px;
        text-align:center;
        }
    footer a{
        color:#666;
        text-decoration:none;
        color:#999;
    }
    
    
    
    @media screen and (max-device- 620px) 
    {section{
        width:96%;
        padding:0 2%;
        }
    }
    /*响应式 大于620px的时候显示下面的css样式*/
    @media screen and (min- 620px)
     {section{
         width:600px;
         padding:0 10px;
     }
    }
    View Code

    js代码:

    $(function(){
        //数据渲染视图,数据驱动视图
    
        //加载数据的方法
        function loadData(){
            var collection = localStorage.getItem('todo');
            if (collection) {
                return JSON.parse(collection);
            }else{
                return [];
            }
        }
        //保存数据的方法
        function saveData(data){
            localStorage.setItem('todo',JSON.stringify(data));
        }
    
        //更新数据
        function update(i,key,value){
            var data = loadData();
            //删除
            // var i = parseInt($(this).attr('index'));
            var todo = data.splice(i,1)[0];
            //done-->true
            todo[key] =value;
            //替换
            data.splice(i,0,todo);
            saveData(data);
            load();
        }
    
        //加载网页的数据
        load();
        function load(){
    
            var todoCount = 0;
            var doneCount = 0;
            var doneStr ='';
            var todoStr ='';
            var todoList = loadData();
            if (todoList && todoList.length>0) {
                //有数据
    
                todoList.forEach(function(data,i){
                    if(data.done){
                        //已经完成
                        doneStr +=`<li>
                                        <input type="checkbox" index=${i} checked="checked">
                                        <p id='p-${i}' index=${i}>${data.title}</p>
                                        <a href="javascript:;">-</a>
                                    </li>`;
                        doneCount++;
    
                    }else{
                        //正在进行
                        todoStr +=`<li>
                                        <input type="checkbox" index=${i}">
                                        <p id='p-${i}' index=${i}>${data.title}</p>
                                        <a href="javascript:;">-</a>
                                    </li>`;    
                        todoCount++;                
                    }
                    $('#donelist').html(doneStr);
                    $('#todolist').html(todoStr);
                    $('#todocount').html(todoCount);
                    $('#donecount').html(doneCount);    
                })
    
            }else{
                //无数据
                $('#todolist').html('');
                $('#donelist').html('');
                $('#todocount').html(todoCount);
                $('#donecount').html(doneCount);
            }
    
        }
        //添加数据的方法
        $('#title').keydown(function(event){
    
            if(event.keyCode ===13){
                //获取输入框的值
                var val = $(this).val();
                if(!val){
                    alert('please input~')
                }else{
                    var data = loadData();
                    data.unshift({
                        title:val,
                        done:false,
                    });
                    //清空input
                    $(this).val('');
                    //更新一下数据
                    saveData(data);
                    load();    
                }    
            }
        })
    
        //事件代理的方式 删除数据的方法
        $('#todolist').on('click','a',function(){
            var data = loadData();
            var i =$(this).parent().index();
            //在数组中删除
            data.splice(i,1);
            saveData(data);
            load();
        })
        $('#donelist').on('click','a',function(){
            var data = loadData();
            var i =$(this).parent().index();
            //在数组中删除
            data.splice(i,1);
            saveData(data);
            load();
        })    
        //更新数据
        $('#todolist').on('change','input[type=checkbox]',function(){
            //获取li的索引
            var i = parseInt($(this).attr('index'));
            //更新数据
            update(i,'done',true);
        })
    
        //编辑操作
        $('#todolist').on('click','p',function(){
            // var i =$(this).parent().index();
            var i = parseInt($(this).attr('index'));
            console.log(i);//
            var title = $(this).html();
            var $p=$(this);
            $p.html(`<input type='text' id='input-${i}' value=${title}>`);
            //获取焦点 选中
            $(`#input-${i}`)[0].setSelectionRange(0,$(`#input-${i}`).val().length);
            $(`#input-${i}`).focus();
            //失去焦点
            $(`#input-${i}`).blur(function(){
                if ($(this).val().length===0) {
                    $p.html(title);        
                }else{
                    update(i,'title',$(this).val());
                }
            })
    
        })
    
    
    
    
    })
    View Code
  • 相关阅读:
    ASP.NET Web API 控制器执行过程(一)
    ASP.NET Web API 控制器创建过程(二)
    ASP.NET Web API 控制器创建过程(一)
    ASP.NET Web API WebHost宿主环境中管道、路由
    ASP.NET Web API Selfhost宿主环境中管道、路由
    ASP.NET Web API 管道模型
    ASP.NET Web API 路由对象介绍
    ASP.NET Web API 开篇示例介绍
    ASP.NET MVC 视图(五)
    ASP.NET MVC 视图(四)
  • 原文地址:https://www.cnblogs.com/hanfe1/p/12085121.html
Copyright © 2011-2022 走看看