Skip to content

Commit 1078399

Browse files
huang303513huang303513
committed
第三章
1 parent 1954cbc commit 1078399

File tree

5 files changed

+125
-0
lines changed

5 files changed

+125
-0
lines changed

‎Head First html5 programming学习代码/第三章/playlist.css

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

‎Head First html5 programming学习代码/第三章/playlist.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>这是一个测试</title>
6+
<link rel="icon" type="image/icon" href="http://wickedlysmart.com/favicon.ico">
7+
<script type="text/javascript" src="playlist.js"></script>
8+
<script type="text/javascript" src="playlist_store.js"></script>
9+
<link rel="stylesheet" type="text/css" href="playlist.css">
10+
</head>
11+
<body>
12+
<form>
13+
<input type="text" id="songTextInput" size="40" placeholder="Song name">
14+
<input type="button" id="addButton" value="Add Song">
15+
</form>
16+
17+
<ul id="playlist">
18+
19+
</ul>
20+
</body>
21+
</html>

‎Head First html5 programming学习代码/第三章/playlist.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
window.onload = init;
2+
3+
function init () {
4+
var button = document.getElementById("addButton");
5+
button.onclick = handleButtonClick;
6+
loadPlaylist();
7+
}
8+
9+
function handleButtonClick(e) {
10+
var textInput = document.getElementById("songTextInput");
11+
var songName = textInput.value;
12+
13+
if (songName == "") {
14+
alert("Please enter a song");
15+
}else{
16+
var li = document.createElement("li");
17+
li.innerHTML = songName;
18+
var ul = document.getElementById("playlist");
19+
ul.appendChild(li);
20+
}
21+
22+
//调用另一个文件里面的方法保存
23+
save(songName);
24+
}

‎Head First html5 programming学习代码/第三章/playlist_store.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
//保存一条数据到本地
2+
function save (item) {
3+
var playlistArray = getStoreArray("playlist");
4+
playlistArray.push(item);
5+
localStorage.setItem("playlist",JSON.stringify(playlistArray));
6+
}
7+
8+
function loadPlaylist () {
9+
var playlistArray = getSavedSongs();
10+
var ul = document.getElementById("playlist");
11+
if (playlistArray != null) {
12+
for (var i = 0; i < playlistArray.length; i++) {
13+
var li = document.createElement("li");
14+
li.innrtHTML = playlistArray[i];
15+
ul.appendChild(li);
16+
};
17+
};
18+
}
19+
20+
function getSavedSongs () {
21+
return getStoreArray("playlist");
22+
}
23+
24+
//得到存在本地的数据
25+
function getStoreArray (key) {
26+
var playlistArray = localStorage.getItem(key);
27+
if (playlistArray == null || playlistArray == "") {
28+
playlistArray = new Array();
29+
}else{
30+
playlistArray = JSON.parse(playlistArray);
31+
}
32+
return playlistArray;
33+
}

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,3 +59,7 @@
5959
第一章：介绍html5的基本概念和区别。
6060

6161
第二章：javascript的基础介绍。
62+
63+
第三章：javascript的一些基础用法。
64+
65+
第四章：

0 commit comments

Comments
 (0)