JQuery实现任务清单案例

最新推荐文章于 2021-12-07 23:11:18 发布

Mr_jinhua

最新推荐文章于 2021-12-07 23:11:18 发布

阅读量1.8k

点赞数

分类专栏： JQuery案例总结

本文链接：https://blog.csdn.net/weixin_38849871/article/details/76736939

版权

JQuery案例总结专栏收录该内容

11 篇文章

订阅专栏

效果图：

1.输入任务计划，不能为空
2.点击添加 会在任务栏添加任务记录 同时输入框内容消失
3.点击复选框 表示任务完成  任务消失保存在下方的 已完成任务栏里
4.点击隐藏、显示已完成任务 显示淡入淡出效果
代码：
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="UTF-8">
    <script src="./jq183.js"></script>
    <style>
        #box {
            width: 400px;
            margin: 0 auto;
        }

        #show {
            font-size: 12px;
        }

        span {
            font-size: 12px;
            background-color: #F0FFF0;
        }

        s {
            font-size: 12px;
            color: #7B7B7B;
            background-color: #F0F0F0;
        }
    </style>
</head>
<body>
<div id="box">
    <!--添加任务  -->
    <input type="text" value="" style="width:300px" id="list_value">
    <input type="button" value="添加任务" id="add">
    <!--任务列表  -->
    <div class="lists">
    </div>
    <hr>
    <!--显示与隐藏  -->
    <div>
        <p id="show">显示已完成任务</p>
    </div>
    <!--已完成任务的列表  -->
    <div id="hide">
    </div>
</div>
</body>
<script>
    $('#add').click(function(){
       var n= $('#list_value').val();//获取输入框里的值
       var t='<div> <input type="checkbox" id="t2"><span>'+n+'</span> </div>';//构建插入待办列表
        //表单不能为空
       if(n!= ''){
            $('.lists').prepend(t);//
            $('#t2').on('click',function(){
                var v= $(this).next().html();//获取点击的那个input对应 span中的值
                var tt='<div> <s>'+v+'</s> </div>';//创建已完成 任务列表
                $('#hide').prepend(tt); //添加已完成列表
                $(this).parent().remove();//删除未完成列表
            });
                $('#list_value').val('');//情况文本框
       }else{
            alert('输入内容不能为空！')
        }
    });
    //已完成显示和隐藏列表
   $('#show').toggle(function(){
       $('#hide').show(2000,function(){
           $('#show').html('隐藏已完成任务');
       });
   },function(){
       $('#hide').hide(2000,function(){
           $('#show').html('显示已完成任务');
       });
   });


</script>
</html>