【HTML+CSS+JavaScript】實現待辦事項（純DOM實現）

阿新 • • 發佈：2018-08-14

todolist ive relative spa java set 釣魚 scrip input

需求：實現待辦事項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <style>    
        #todoList {
            list-style: none;
            margin:10px 0px;
            padding:0;
            width:600px;
        }
        #todoList li {
            margin 
-bottom:5px;
            padding: 10px;
            border: 1px solid #ccc;
            background:#f5f5f5;
            position: relative;
        }
        input {
            padding:10px;
            font-size:16px;
            border:1px solid #ccc;
        }
        button {
            padding:10px 20px;
            border:1px solid #ccc;
            background: #f5f5f5;
            outline: none;
            cursor: pointer;
        }

        #todoList span {
            position: absolute;
            right: 10px;
            cursor: pointer;
        }
     
</style>
</head>
<body>
    <input type="text" id="content"> 
    <button id="btn">添加</button>
    <ul id="todoList">
        <li>取釣魚 <span>&times;</span></li>
        <li>取洗澡 <span>&times;</span></li>
        <li>取吃飯 <span>&times;</span></li>
        <li>去睡覺 <span>&times;</span></li>
    </ul>


    <script>    
        var 
 input = document.querySelector(‘#content‘);
        var btn = document.querySelector(‘#btn‘);
        var todoList= document.querySelector(‘#todoList‘);
        var spans = document.querySelectorAll(‘#todoList span‘);


        btn.onclick = function(){
            //獲取 input的內置
            var text = input.value;

            //創建li元素 並給li元素添加包裹 內容
            var li = document.createElement(‘li‘);
            li.innerText = text;
            var span = document.createElement(‘span‘);
            span.innerHTML = ‘&times;‘;
            li.appendChild(span);

            //把li元素添加到ul中
            todoList.appendChild(li);
        }    


        /*spans.forEach(function(span){
            span.onclick = function(){
                todoList.removeChild(this.parentNode)
            }
        })*/

        //委派方式綁定
        todoList.onclick = function(event) {
            if (event.target.nodeName === ‘SPAN‘) {
                this.removeChild(event.target.parentNode);
            }
        }
    </script>
</body>
</html>

todolist ive relative spa java set 釣魚 scrip input 需求：實現待辦事項 <!DOCTYPE html> <html lang="en"> <head> <meta chars

【HTML+CSS+JavaScript】實現地址選擇聯動

div chang city UNC padding () 定義 html 寧波需求：實現地址選擇聯動 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

【HTML+CSS+JavaScript】日歷生成器

itl you ava lse max 星期幾 mat mar 超出需求：實現日歷生成器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

【HTML+CSS+JavaScript】網頁實戰開發筆記之二—關於Web標準，你不能不知道的事

毛星雲，網路ID「淺墨」，90後，熱愛遊戲開發、遊戲引擎、計算機圖形、實時渲染等技術，就職於騰訊互娛。微軟最有價值專家著作《Windows遊戲程式設計之從零開始》、《OpenCV3程式設計入門》碩士就讀於南京航空航天大學航天學院（2013級碩士研究生），已於2016年三月畢業。本科

【Share Code | HTML & CSS & Javascript】動畫片段幻燈片

資源下載：介紹本文使用"Pieces"庫輕鬆實現動畫片段幻燈片效果。今天我們想向您展示如何建立一個具有動畫片段幻燈片效果的圖片。圖片被分成多個片段，這些片段將以不同的方式進行動畫製作，使用Pieces，可以輕鬆實現這些有趣的效果。這將是最終結果：

【HTML+CSS實戰】商城網頁前端

1、網頁前端基礎分析我們知道網頁是由HTML+CSS+JavaScript結合起來共同完成靜態/動態網頁的開發，如果把一個網頁比喻成一個人，HTML相當於人的骨架，CSS是包裹骨架的肉和衣服，JavaScript是人做出的各種動作，而後臺語言是告訴前端需要做什麼，相

【數據結構】之順序表（Java語言描述）

arraylist 表數據 nbsp real 不同 1.5 根據長度 tar 　　之前總結過使用C語言描述的順序表數據結構。在C語言類庫中沒有為我們提供順序表的數據結構，因此我們需要自己手寫，詳細的有關順序表的數據結構描述和C語言代碼請見【我的這篇文章】。　　在Jav

【BZOJ1458】【洛谷4311】士兵占領（網絡流）

scrip AR truct gis lin class ++i () 網絡【BZOJ1458】【洛谷4311】士兵占領（網絡流）題面 BZOJ權限題，洛谷真好 Description 有一個M * N的棋盤，有的格子是障礙。現在你要選擇一些格子來放置一些士兵，一個格子

【BZOJ2084】【洛谷P3501】[POI2010]ANT-Antisymmetry（Manache算法）

異或操作 image font bzoj rdquo 技術 sign ant close 題意描述　　原題：　　　　　　一句話描述：對於一個0/1序列，求出其中異或意義下回文的子串數量。題解　　我們可以看出，這個其實是一個對於異或意義下的回文子串數

【CodeForces 129 B】Students and Shoelaces（拓撲排序）

end owin clu namespace 每次 font order 單獨 when Anna and Maria are in charge of the math club for junior students. When the club gathers tog

【Spring筆記三】Spring中Bean（XML方式裝配）

我們可以把 Spring 看作一個大型的工廠，而 Spring 容器中的 Bean 就是該工廠的產品。要想使用這個工廠生產和管理Bean，就需要在配置檔案中告訴它需要哪些 Be

【洛谷3648】[APIO2014] 序列分割（斜率優化DP）

點此看題面大致題意：你可以對一個序列進行\(k\)次分割，每次得分為兩個塊元素和的乘積，求總得分的最大值。區間\(DPor\)斜率優化\(DP\) 這題目第一眼看上去感覺很明顯是區間\(DP\)。但是，一看資料範圍，\(n\le100000\)，這是要上天的節奏！不過，再看\(m\le

Python開發【第七篇】：面向物件（進階篇）

上一篇《Python 面向物件（初級篇）》文章介紹了面向物件基本知識：面向物件是一種程式設計方式，此程式設計方式的實現是基於對類和物件的使用類是一個模板，模板中包裝了多個“函式”供使用（可以講多函式中公用的變數封裝到物件中）物件，根據模板

【洛谷3396】雜湊衝突（大力分塊）

點此看題面大致題意：給你一個長度為nn的陣列valval以及mm個操作，操作有兩種：一種是將valxvalx修改為yy，另一種操作是求出∑vali(i∑vali(i%x=y)x=y)。樸素的暴力我們先

【bzoj2333 & luoguP3273】棘手的操作（線段樹合併）

　　題目傳送門：bzoj2333 luoguP3273 　　這操作還真“棘手”。。聽說這題是可並堆題？然而我不會可並堆。於是我就寫了線段數合併，然後調了一晚上，資料結構毀一生！！！QAQ…… 　　其實這題也可以把合併強行看成樹上的關係然後dfs序後直接線段樹的，然而我菜啊。。看到連邊就只能想到線

2018.09.26【TJOI2017】【BZOJ4888】【洛谷P3760】異或和（樹狀陣列）（差分）

洛谷傳送門解析：額，TJOITJOITJOI連續兩年考了位運算。。。我還能說什麼。。。 PS:zxyoiPS:zxyoiPS:zxyoi不是天津oieroieroier。思路：一般位運算都

2018.11.09【NOIP2016】【洛谷P1600】天天愛跑步（樹上差分）

傳送門解析：據說這是NOIP歷年最難一道題。。但是真的沒有寶藏難啊我覺得。。。思路：答案分兩類統計，一種是子樹中過來，一種是其他地方過來。那麼路徑就被拆分成兩部分了，一部分是S−>lcaS->lcaS−>lca，一部分

【Spring筆記三】Spring中Bean（XML方式配置）

我們可以把 Spring 看作一個大型的工廠，而 Spring 容器中的 Bean 就是該工廠的產品。要想使用這個工廠生產和管理Bean，就需要在配置檔案中告訴它需要哪些 Bean，以及需要使用何種方法將這些 Bean 裝配到一起。首先，分清楚 JavaBean 和

【java面試題】Static Nested Class（巢狀類）和 Inner Class（內部類）的不同、final、static

前言：本來是想總結一下inner class 的用法，但是卻發現這幾位頗為親近。索性一起拉出來溜溜。寫作目的：跟 static , final, inner class 搞好關係，以便將來遇見了，就像用if ,else一樣，一清二楚。文中的術語定義以java language spec為準。先想想

【洛谷 P2763】試題庫問題（最大流）

題目連結 6/23 這是網路流23題裡我第一個沒看題解自己寫出來一遍過的。。這題應該是最簡單的模型了吧。從源點向每個型別連一條流量為這個型別要的題數，再從每個型別向可以屬於這個型別的所有試題連一條流量為1的邊，最後從所有試題向匯點連一條流量為1的邊。跑最大流就行。判斷邊有沒有流量。 // luo

【HTML+CSS+JavaScript】實現待辦事項（純DOM實現）

相關推薦