jquery实现记事本功能

最新推荐文章于 2022-10-26 14:58:15 发布

gaojianqiao1234

最新推荐文章于 2022-10-26 14:58:15 发布

阅读量928

点赞数

分类专栏： js 文章标签：记事本 jquery 没有保存

本文链接：https://blog.csdn.net/gaojianqiao1234/article/details/102660868

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.html
在代码中，为了方便实现功能，我先写了一些要，动态添加结构（已经注释了）
入过想实现储存功能，可以把数据存在localstorage

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="all">
        <div class="t1"><span class="l">ToDoList</span> <input class="r" id="push" type="text" placeholder="添加ToDo"></div>
        <div class="t2">
            <div class="head">
                <h1 class="l">正在进行</h1> <span class="count r s1"></span></div>
            <ul class="ul1">
                <!-- <li><input type="checkbox" class="l">
                    <p class="l"></p>
                    <span class="r jian">delete</span>
                </li>
                <li><input type="checkbox" class="l">
                    <p class="l"></p>
                    <span class="r jian"></span></li>
                <li><input type="checkbox" class="l">
                    <p class="l"></p>
                    <span class="r zjian"></span></li> -->
            </ul>
        </div>
        <div class="t3">
            <div class="head">
                <h1 class="l">已完成</h1> <span class="count r s2"></span></div>
            <ul class="ul2">
                <!-- <li><input type="checkbox" class="l">
                    <p class="l"></p>
                    <span class="r yjian">delete</span>
                </li>
                <li><input type="checkbox" class="l">
                    <p class="l"></p>
                    <span class="r yjian">delete</span>
                </li>
                <li><input type="checkbox" class="l">
                    <p class="l"></p>
                    <span class="r yjian">delete</span>
                </li> -->
            </ul>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
</html>

2.js(jquery)代码

$(document).keyup(function(event) {
//这是为了监听回车键
    if (event.keyCode == 13) {

        if ($("#push") !== '') {
            $('.ul1').prepend(`<li><input type="checkbox" class="l">
            <p class="l">${ $("#push").val()}</p>
            <span class="r jian">delete</span>
        </li>`)

        }

        $('.s1').text($(".ul1 li").length)
        $('.s2').text($(".ul2 li").length)

        //删除
        $jian1 = $(".ul1 li span")
        $.each($jian1, function() {
            $(this).on('click', function() {

                $(this).parent().remove()
            })
        });

        $jian2 = $(".ul2 li span")
        $.each($jian2, function() {
            $(this).on('click', function() {

                $(this).parent().remove()
            })
        });
        $("#push").val('')
    }
});

// 数量
$(window).on('load', function(event) {
    $ul2li = $(".ul2 li input")
    $('.s1').text($(".ul1 li").length)
    $('.s2').text($(".ul2 li").length)
});


//转移

//上到下（因为是先添加记事内容，再勾选，之后跳到已完成，所以封套在一起）
$('body').on('mousedown ', function(event) {
    $(".ul1 li input").on('click', function() {
        $.each($(".ul1 li"), function(index, value) {
                // console.log($(value).children(':first').val())
                if ($(value).children(':first').is(":checked")) {
                    $(value).children(':first').parent().clone(true).appendTo(".ul2")
                    $(value).children(':first').parent().remove()
                }
            })
            //下到上
            // console.log($(".ul2 li input"))
        $(".ul2 li input").on('click', function() {

            $.each($(".ul2 li"), function(index, value) {

                if ($(value).children(':first').is(":checked")) {

                } else {
                    $(value).children(':first').parent().clone(true).appendTo(".ul1")
                    $(value).children(':first').parent().remove()
                }
            })
        })
    })
})


//删除
$jian1 = $(".ul1 li span");
$.each($jian1, function() {
    $(this).on('click', function() {

        $(this).parent().remove()
    })
});

$jian2 = $(".ul2 li span");
$.each($jian2, function() {
    $(this).on('click', function() {

        $(this).parent().remove()
    })
});


// 数量

$(document).on('click ', function(event) {

    $('.s1').text($(".ul1 li").length)
    $('.s2').text($(".ul2 li").length)
});

//已完成默认选中
$lis2 = $(".ul2 li input")
    // console.log($lis2)
$.each($lis2, function(index, value) {
    // console.log(value)
    value.checked = true;
});

3.css

@charset "UTF-8";
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.all {
  overflow: hidden;
  margin: 150px auto;
  width: 300px;
  background: cornflowerblue;
  padding: 10px;
}

body {
  color: black;
  font-size: 12px;
  font-family: '微软雅黑', '宋体';
  background: #eee;
}

.l {
  float: left;
}

.r {
  float: right;
}

div.t1 {
  height: 30px;
  line-height: 30px;
  width: 280px;
  padding: 0 10px;
}

div.t1 span {
  font-size: 18px;
}

div.t1 input {
  height: 20px;
  width: 130px;
  border-radius: 5px;
  padding: 0 10px;
}

div.t2 {
  background: #fff;
  width: 300px;
}

div.t2 div.head {
  height: 60px;
  line-height: 60px;
}

div.t2 div.head h1 {
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  font-size: 30px;
}

div.t2 div.head span.count {
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: 20px;
}

div.t2 ul {
  width: 280px;
  padding: 10px 0;
}

div.t2 ul li {
  margin: 2px 10px;
  width: 100%;
  height: 20px;
  line-height: 20px;
}

div.t2 ul li input {
  width: 15px;
  height: 15px;
  line-height: 15px;
  margin: 2px 5px;
}

div.t2 ul li p {
  width: 200px;
  height: 15px;
  line-height: 15px;
}

div.t2 ul li span {
  width: 40px;
  height: 15px;
  color: red;
  text-align: center;
}

div.t3 {
  background: #fff;
  width: 300px;
}

div.t3 div.head {
  height: 60px;
  line-height: 60px;
}

div.t3 div.head h1 {
  height: 60px;
  line-height: 60px;
  padding: 0 10px;
  font-size: 30px;
}

div.t3 div.head span.count {
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: 20px;
}

div.t3 ul {
  width: 280px;
  line-height: 30px;
  padding: 10px 0;
}

div.t3 ul li {
  background: #cccccc;
  margin: 2px 10px;
  width: 100%;
  height: 20px;
  line-height: 20px;
}

div.t3 ul li input {
  width: 15px;
  height: 15px;
  line-height: 15px;
  margin: 2px 5px;
}

div.t3 ul li p {
  width: 200px;
  height: 15px;
  line-height: 15px;
}

div.t3 ul li span {
  width: 40px;
  height: 15px;
  color: red;
  text-align: center;
  cursor: pointer;
}
/*# sourceMappingURL=index.css.map */

gaojianqiao1234

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现记事本功能

1.html在代码中，为了方便实现功能，我先写了一些要，动态添加结构（已经注释了）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
复制链接

扫一扫