您的位置：首页 > 其它

事件与处理程序

2014-05-16 14:26 155 查看

以播放器列表管理器为例：

webvilli.htm

<!doctype html>
<html lang="en">
<head>
<title>Webville Tunes</title>
<meta charset="utf-8">
<link rel="icon"
type="image/ico"
href="http://wickedlysmart.com/favicon.ico">
<script src="playlist.js"></script>
<script src="playlist_store.js"></script>
<link rel="stylesheet" href="playlist.css">
</head>
<body>
<!--表单，有一个文本域，用来输入歌曲名-->
<!--placeholder属性，暗示input-->
<form>
<input type="text" id="songTextInput" size="40" placeholder="Song name">
<input type="button" id="addButton" value="Add Song">
</form>
<!--使用一个列表存放歌曲，目前为空-->
<ul id="playlist">

</ul>

</body>
</html>

/* playlist.js */

window.onload = init;

function init() {
var button = document.getElementById("addButton");
button.onclick = handleButtonClick;

loadPlaylist();
}

function handleButtonClick(e) {
var textInput = document.getElementById("songTextInput");
var songName = textInput.value;
//alert("Adding " + songName);
<!--如果用户没有输入，value属性不是null，而是“”，空串-->
if (songName == "") {
alert("Please enter a song");
}
else {
//alert("Adding " + songName);
var li = document.createElement("li");
li.innerHTML = songName;
var ul = document.getElementById("playlist");
ul.appendChild(li);

// for Ready Bake
save(songName);
}
}

/* playlist_store.js
*
* Ready-bake code to store and retrieve playlist items
*/
<!--使用web存储API（localStorage）在用户的浏览器中存储数据-->
function save(item) {
var playlistArray = getStoreArray("playlist");
playlistArray.push(item);
localStorage.setItem("playlist", JSON.stringify(playlistArray));
}

function loadPlaylist() {
var playlistArray = getSavedSongs();
var ul = document.getElementById("playlist");
if (playlistArray != null) {
for (var i = 0; i < playlistArray.length; i++) {
var li = document.createElement("li");
li.innerHTML = playlistArray[i];
ul.appendChild(li);
}
}
}

function getSavedSongs() {
return getStoreArray("playlist");
}

function getStoreArray(key) {
var playlistArray = localStorage.getItem(key);
if (playlistArray == null || playlistArray == "") {
playlistArray = new Array();
}
else {
playlistArray = JSON.parse(playlistArray);
}
return playlistArray;
}

/* playlist.css */

body {
font-family: arial, sans-serif;
}

ul#playlist {
border: 1px solid #a9a9a9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
padding: 0px;
list-style-type: none;
}

ul#playlist li {
border-bottom: 1px solid #a9a9a9;
padding: 10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
background-image: -moz-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -ms-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -o-linear-gradient(#f9f9f9, #e3e3e3);
background-image: -webkit-linear-gradient(#f9f9f9, #e3e3e3);
background-image: linear-gradient(#f9f9f9, #e3e3e3);
}

ul#playlist li:last-child {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom: none;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
ul#playlist li:first-child {
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}

Javascript能处理很多事件，以后慢慢熟悉

但是如果学会一个处理事件，那么所有事件都会处理了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航