todolist_1/jquery.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="container" id="c1">
    <div class="text-center">
        <h1>
            <div class="sj">
            <span></span>年
            <span></span>月
            <span></span>日
            <span></span>时
            <span></span>分
            <span></span>秒
        </div>
        </h1>
    </div>
</div>
<div class="container" id="c2">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-danger task-list">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">待处理<span class="badge pull-right" id="b1"></span></h3>

                </div>
                <div class="panel-body" id="pending">
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-primary task-list">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">进行中<span class="badge pull-right" id="b2"></span></h3>
                </div>
                <div class="panel-body" id="inProgress">

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-success task-list">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">已完成<span class="badge pull-right" id="b3"></span></h3>
                </div>
                <div class="panel-body" id="completed">

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default task-list">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">添加项目</h3>
                </div>
                <div class="panel-body">
                    <form class="todoForm">
                        <input type="text" class="addTitle" placeholder="标题"/>
                        <textarea placeholder="内容" class="addDescriptions"></textarea>
                        <input type="date" placeholder="截至日期（月/日/年）" id="datepicker" class="addDate"/>
                        <input type="button" class="btn btn-primary" value="添加项目" id="addItem"/>
                    </form>
                    <input type="button" class="btn btn-primary" value="清空全部项目" id="DeleteAll"/>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!--<script src="js/jquery-ui.theme.min.css"></script>-->
<script src="js/bootstrap.js"></script>
<script src="js/events.js"></script>
</html>