寫在前面的話

    經過這一個星期的努力，我終於把這個簡陋的tudolist做出來了。（好吧，我承認是自己比較菜。）
    通過寫部落格的方式，我想把這一個星期裡來除錯的收穫和對程式設計的感悟記錄下來，回顧自己走過的路會對以後要走的路有所啟示的。
    如果你和我一樣是初窺前端的一個懷抱夢想的初學者，我希望我走過的這段路能對你有些許的啟示，讓你對前端收穫一點感悟。
    如果你是一個前端的大牛，也由衷的希望你能留下些許的指教。

非常感謝你能看到這篇文章，也希望你能繼續看下去……

專案名

帕尼尼的備忘錄

HTML結構

<div class="tudo">
 

        <!-- 標題部分開始 -->
        <header>
            <h1 class="tudo-title">帕尼尼的Tudo</h1>
        </header>
        <!-- 標題部分結束 -->
        <!-- 提交部分開始 -->
        <section>
        </section>
        <!-- 提交部分結束 -->
        <!-- 列表部分開始 -->
 

        <section>
            <!-- 列表條目 -->
            <div class="tudo-list">
                <p>未完成事項</p>
            </div>
            <ul class="list-group" id="tList"></ul>
            <!-- 已完成列表條目 -->
            <div class="tudo-list">
 

                <p>已完成事項</p>
            </div>
            <ul class="list-group" id="fList"></ul>
            <!-- 事件提醒條目 -->
            <ul class="list-group" id="rList"></ul>
            <!-- 模態框 事項資訊框-->
            <div class="modal fade" id="modal_list" tabindex="-1" role="dialog">
            </div>
            <!-- 模態框 提示框-->
            <div class="modal fade" id="modal_sure" tabindex="-1" role="dialog">
            </div>
        </section>
        <!-- 列表部分結束 -->
        <!-- 腳註部分開始 -->
        <footer>
        </footer>
        <!-- 腳註部分結束 -->
        <video src="alert.mp3" class="alert"></video>
    </div>

js函式

//初始化
function init(){}
//事件列表拼接
function ping(){}
//未完成事件拼接
function ping_unfinish(object,i){}
//已完成事件拼接
function ping_finish(object,i){}
//刪除事件監聽
function listion_del(){}
//列出事件監聽
function listion_all(){}
//勾選事件監聽
function listion_che(){}
//事件刪除操作
function thing_del(id){}
//事件列出操作
function thing_all(id){}
//事件提交操作
function thing_sub(){}
//事件修改操作
function thing_upd(){}
//事件狀態改變操作
function thing_change(){}
//時間監視
function time_watch(){}
//時間檢查(獲取離現在最近的一個任務)
function time_check(){}
//時間達到預定後處理
function time_get(){}
//重新監聽時間
function time_reset(){}
//顯示提醒面板
function time_remain(){}

思維導圖

執行效果圖