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>标签
下面上一个这个整体的效果。