jQuery实现简单的Web备忘录

实现功能:

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

实现效果:

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/[email protected]/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 = $("
  • "
    ); $(".weiwancheng ul").prepend(li); var 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 = $(""); li.append(span); span.text(now); var em = $(""); em.addClass("glyphicon glyphicon-ok"); li.append(em); $(em).click(function () { var li = $("
  • "
    ); $(".yiwancheng ul").prepend(li); var 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 = $(""); li.append(span); span.text(now); var em = $(""); em.addClass("glyphicon glyphicon-ok"); li.append(em); $(this).parent().remove(); $(".yiwancheng ul li em").click(function () { $(this).parent().remove(); }); }); } else { alert('备忘不能为空!'); } }); })

    你可能感兴趣的:(前端)