Head First HTML5 Programming 事件处理程序诸如此类

on page 85

现在分别贴出代码

playlist.html

playlist.js

playlist_store.js

playlist.css

他们的代码。放到一个文件夹下

playlist.html

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE html>
 6 <html lang="en">
 7     <head>
 8         <title></title>
 9         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10         <script src="playlist.js"></script>
11         <script src="playlist_store.js"></script>
12         <link rel ="stylesheet" href="playlist.css">
13     </head>
14     <body>
15         <form>
16             <input type=text id="songTextInput" size="40" placeholder="Song Name">
17             <input type=button id="addButton" value="Add Song">
18         </form>
19         <ul id="playlist">
20 
21         </ul>
22     </body>
23 </html>

playlist.js

 1 /* 
 2  * To change this template, choose Tools | Templates
 3  * and open the template in the editor.
 4  */
 5 window.onload = init;
 6 function init(){
 7     var button = document.getElementById("addButton");
 8     button.onclick = handleButtonClick;
 9     loadPlaylist(); // 这是利用html5的本地存储。除了IE6、7不能，其他都能用
10 }
11 function handleButtonClick(){
12     var textInput = document.getElementById("songTextInput");
13     var songName = textInput.value;
14     if (songName === ""){
15         alert("Please input a song");
16     }else{
17         var li = document.createElement("li");
18         li.innerHTML = songName;
19         var ul = document.getElementById("playlist");
20         ul.appendChild(li);
21     }
22     save(songname);
23 }

playlist_store.js

 1 /* 
 2  * To change this template, choose Tools | Templates
 3  * and open the template in the editor.
 4  */
 5 
 6 
 7 /* playlist_store.js
 8  * 
 9  * Ready-bake code to store and retrieve playlist items
10  */
11 
12 function save(item) {
13     var playlistArray = getStoreArray("playlist");
14     playlistArray.push(item);
15     localStorage.setItem("playlist", JSON.stringify(playlistArray));
16 }
17 
18 function loadPlaylist() {
19     var playlistArray = getSavedSongs();
20     var ul = document.getElementById("playlist");
21     if (playlistArray != null) {
22         for (var i = 0; i < playlistArray.length; i++) {
23             var li = document.createElement("li");
24             li.innerHTML = playlistArray[i];
25             ul.appendChild(li);
26         }
27     }
28 }
29 
30 function getSavedSongs() {
31     return getStoreArray("playlist");
32 }
33 
34 function getStoreArray(key) {
35     var playlistArray = localStorage.getItem(key);
36     if (playlistArray == null || playlistArray == "") {
37         playlistArray = new Array();
38     }
39     else {
40         playlistArray = JSON.parse(playlistArray);
41     }
42     return playlistArray;
43 }

playlist.css

 1 /* playlist.css */
 2 
 3 body {
 4     font-family: arial, sans-serif;
 5 }
 6 
 7 ul#playlist {
 8     border: 1px solid #a9a9a9;
 9     -webkit-border-radius: 5px;
10     -moz-border-radius: 5px;
11     border-radius: 5px;
12     margin-top: 10px;
13     padding: 0px;
14     list-style-type: none;
15 }
16 
17 ul#playlist li {
18     border-bottom: 1px solid #a9a9a9;
19     padding: 10px;
20     background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
21     background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
22     background-image: -ms-linear-gradient(#f9f9f9, #e3e3e3);
23     background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
24     background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
25     background-image: linear-gradient(#f9f9f9, #e3e3e3);
26 }
27 
28 ul#playlist li:last-child {
29     -webkit-border-bottom-right-radius: 5px;
30     -webkit-border-bottom-left-radius: 5px;
31     -moz-border-radius-bottomright: 5px;
32     -moz-border-radius-bottomleft: 5px;
33     border-bottom: none;
34     border-bottom-right-radius: 5px;
35     border-bottom-left-radius: 5px;
36 }
37 ul#playlist li:first-child {
38     -webkit-border-top-right-radius: 5px;
39     -webkit-border-top-left-radius: 5px;
40     -moz-border-radius-topright: 5px;
41     -moz-border-radius-topleft: 5px;
42     border-top-right-radius: 5px;
43     border-top-left-radius: 5px;
44 }

与本书P106页一样的效果。就是在页面上多了一个提交空歌曲名的小js弹窗。

__________________________________________________________

Arpil 2nd 2013. 最新修改代码为：

playlist.js 代码。

playlist.html 略加修改了一下

上面的playlist_store.js

playlist.css

都不必修改

好了。看看更新的playlist.js

 1 /* 
 2  * To change this template, choose Tools | Templates
 3  * and open the template in the editor.
 4  */
 5 window.onload = init;
 6 function init(){
 7     var button = document.getElementById("addButton");
 8     button.onclick = handleButtonClick;
 9     loadPlaylist(); // 这是利用html5的本地存储。除了IE6、7不能，其他都能用,来自于playlist_store.js
10 }
11 function handleButtonClick(){
12     var textInput = document.getElementById("songTextInput");
13     var songName = textInput.value;
14     if (songName === ""){
15         alert("Please input a song");
16     }else{
17         var li = document.createElement("li");
18         li.innerHTML = songName;
19         var ul = document.getElementById("playlist");
20         ul.appendChild(li);
21     }
22     //为了获得其内部的歌曲数目
23     var songAmount = document.getElementById("songAmount");
24     songAmount.innerHTML = "You've added "+ ul.childElementCount + " song(s).";
25     save(songname);
26     save(songAmount);    //采用HTML5本地存储技术。
27 }

为了获取歌曲内部数目，用了一个新的方法

ul.childElementCount

返回的是其子元素数目。

新修改的playlist.html代码

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE html>
 6 <html lang="en">
 7     <head>
 8         <title></title>
 9         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10         <script src="playlist.js"></script>
11         <script src="playlist_store.js"></script>
12         <link rel ="stylesheet" href="playlist.css">
13     </head>
14     <body>
15         <form>
16             <input type=text id="songTextInput" size="40" placeholder="Song Name">
17             <input type=button id="addButton" value="Add Song">
18         </form>
19         <ul id="songAmount">
20 
21         </ul>
22         <ul id="playlist">
23 
24         </ul>
25     </body>
26 </html>

就是增加了一个<ul id="songAmount"></ul>标签

下面上一个这个整体的效果。

Head First HTML5 Programming 事件 处理程序 诸如此类

Head First HTML5 Programming 事件处理程序诸如此类