jQuery实现简单的Web备忘录

最新推荐文章于 2022-01-08 17:41:21 发布

SC前端

最新推荐文章于 2022-01-08 17:41:21 发布

阅读量530

点赞数 3

分类专栏：前端文章标签： jquery javascript js html css

本文链接：https://blog.csdn.net/weixin_43152611/article/details/105934640

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

实现功能：

添加备忘事件
自动获取备忘时间
在未完成事件中点击对号，相应的事件会走到已完成事件中
在已完成事件中点击对号，相应的事件会消失

实现效果：
在这里插入图片描述
index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div class="header">
        <input type="text">
        <button class="btn btn-success">添加备忘</button>
    </div>
    <div class="con">
        <div class="weiwancheng">
            <p>未完成</p>
            <ul>
                
            </ul>
        </div>
        
        <div class="yiwancheng">
            <p>已完成</p>
            <ul>
               
            </ul>
        </div>
        
    </div>
</body>
</html>

index.css文件：

* {
    margin: 0;
    padding: 0;
    outline: none!important;
}
html {
    height: 100%;
}
body {
     height: 100%;
     background-image: -webkit-linear-gradient(left,#fbc2eb, #a6c1ee);
}
.header {
     width: 500px;
     height: 42px;
     margin: 10px auto;
     text-align: center;
}
.header input {
    width: 300px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    padding: 0 10px;
}
.header button {
    height: 40px;
    margin-left: 10px;
    border: 0;
}
.weiwancheng,
.yiwancheng {
    width: 600px;
    margin: 10px auto;
}
.weiwancheng ul,
.yiwancheng ul {
    width: 100%;
}
.weiwancheng ul li,
.yiwancheng ul li {
    display: flex;
    align-items: center;
    list-style: none;
    line-height: 30px;
    width: 100%;
    margin-top: 10px;
    border: 0;
    border-radius: 10px;
    background-color: aqua;
}
.content {
    display: inline-block;
    width: 400px;
    word-wrap:break-word;
    margin: 0!important;
    padding: 0 10px;
}
.weiwancheng ul li em,
.yiwancheng ul li em {
    margin-left: 20px;
    cursor: pointer;
    height: 14px;
    width: 14px;
}

index.js:

$(function () {
    $(".btn").click(function () {
        if ($(".header input").val() != '') {
            var li = $("<li></li>");
            $(".weiwancheng ul").prepend(li);
            var p = $("<p></p>");
            p.addClass("content");
            li.append(p);
            p.text($(".header input").val());
            function getNow(s) {
                return s < 10 ? '0' + s : s;
            }

            var myDate = new Date();

            var year = myDate.getFullYear();        //获取当前年
            var month = myDate.getMonth() + 1;   //获取当前月
            var date = myDate.getDate();            //获取当前日
            var h = myDate.getHours();              //获取当前小时数(0-23)
            var m = myDate.getMinutes();          //获取当前分钟数(0-59)
            var s = myDate.getSeconds();

            var now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
            var span = $("<span></span>");
            li.append(span);
            span.text(now);
            var em = $("<em></em>");
            em.addClass("glyphicon glyphicon-ok");
            li.append(em);
           
            $(em).click(function () {
                var li = $("<li></li>");
                $(".yiwancheng ul").prepend(li);
                var p = $("<p></p>");
                p.addClass("content");
                li.append(p);
                p.text($(this).siblings("p").text());
                function getNow(s) {
                    return s < 10 ? '0' + s : s;
                }

                var myDate = new Date();

                var year = myDate.getFullYear();        //获取当前年
                var month = myDate.getMonth() + 1;   //获取当前月
                var date = myDate.getDate();            //获取当前日
                var h = myDate.getHours();              //获取当前小时数(0-23)
                var m = myDate.getMinutes();          //获取当前分钟数(0-59)
                var s = myDate.getSeconds();

                var now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
                var span = $("<span></span>");
                li.append(span);
                span.text(now);
                var em = $("<em></em>");
                em.addClass("glyphicon glyphicon-ok");
                li.append(em);
                $(this).parent().remove();
                $(".yiwancheng ul li em").click(function () {
                    $(this).parent().remove();
                });
            });
            
        } else {
            alert('备忘不能为空！');
        }
    });
})

SC前端

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现简单的Web备忘录

实现功能：添加备忘事件自动获取备忘时间在未完成事件中点击对号，相应的事件会走到已完成事件中在已完成事件中点击对号，相应的事件会消失实现效果：index.html文件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam...
复制链接

扫一扫