2018.03.29
author:wills
今天介紹使用HTML製作網頁實怎麼管理動態的事件,使用JavaScript(簡稱js)。我們舉個簡單的例子。假如有個很簡單網頁。
一家旅館,名字叫hotel,一共有15間房,它可以訂房可以退房,還可以更改營業狀態,那我們該怎麼做呢,先來看看一個初始效果圖。
這就是旅館網頁的初始狀態。我們可以通過下面三個按鈕實現不同的功能。下面來看代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*這裏是一些渲染的樣式表
#hotel表示對整個div進行設置
margin設置外邊距,auto表示自動居中對齊
width表示寬度,height表示高度,設置背景色以及文本居中
border-radius表示對整個塊四周倒圓角,這樣圖案好看。*/
#hotel {
margin: 0 auto;
width: 300px;
height: 360px;
background-color: chocolate;
text-align: center;
border-radius: 50px;
}
#hotel p {
/*把p標籤的元素變成行塊級元素*/
display: inline-block;
}
h1,h2 {
margin: 0 auto;
/*給h1,h2元素加下邊線*/
border-bottom: 5px solid saddlebrown;
}
h1 {
height: 120px;
/*使h1中的內容垂直居中*/
line-height: 120px;
}
#hotel button {
/*給按鈕佈局,設置背景色*/
margin: 22px 10px;
border: none;
background-color: burlywood;
outline: none;
}
/*當鼠標放到按鈕時,按鈕變色高亮顯示*/
#hotel button:hover {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 首先我們將主體部分放入到一個id=‘hotel’的模塊中這個主體由三部分構成,
第一部分:旅館名字hotel。第二部分:營業狀態status以及房間數量。第三部分:
三個按鈕實現不同功能,或者做不同的的事情(實際上第三個改變營業狀態的按鈕不該
放在這裏,但這裏只是爲了展示功能的實現)因爲狀態和房間數量是會修改的,因此
放到id爲sta和room的p標籤裏面方便修改。
這裏h1和h2表示表示塊級元素(塊級元素不做修改會直接佔滿網頁的一行,同理還有
行級元素,它會依次擺放直到放滿一行),並在其中放入了我們想要顯示在網頁的文字
網頁的效果渲染在上面style標籤裏面的樣式表裏。
button表示一個按鈕,它是行級元素。它的屬性onclick表示它在被點擊時會觸發的
事件,onclick="get()"表示點擊時觸發js裏面的get函數,然後get函數執行,
然後做出一系列的行爲改變或者渲染網頁,即交互式行爲的實現-->
<div id="hotel">
<h1>Lover Hotel</h1>
<h2>狀態:<p id="sta">營業中</p></h2>
<h2>房間數量:<p id="room">15</p></h2>
<button onclick="get()">預定房間</button>
<button onclick="quitRoom()">退房</button>
<button onclick="changeStatus()">更改營業狀態</button>
</div>
<!--js的代碼都是寫在<script></script>標籤之間的-->
<script type="text/javascript">
/* js語言支持面向對象的編程,所以爲了實現旅館的功能,我定義了一個
對象,名字叫hotel,它的名字是hotel,狀態初始爲true,房間初始爲15
它有三個行爲,訂房間getRoom,退房間quitRoom,改變狀態change。
js語言中的對象定義辦法和python的字典類型很像,都是以鍵值對的形式
放在大括號裏面,注意每個鍵值對以逗號隔開。*/
var hotel = {
name:'hotel',
status:true,
rooms:15,
getRoom:function() {
//這裏this是一種特殊語法,表示這個對象本身,this.status表示
//hotel的status,下面的this.rooms也是同理
//訂房需要判斷是不是營業狀態,以及還有沒有房間,並且根據不
//同情況作出不同的響應
if (this.status == true && this.rooms > 0) {
this.rooms -= 1;
//alert()函數表示起一個窗口在網頁上顯示你想要臨時顯示的內容
alert('預定成功!');
}else if (this.status == false){
alert('預定失敗!hotel 已經停止營業。');
}else {
alert('預定失敗,已經沒有房間了!')
}
},
quitRoom:function() {
//退房需要判斷是不是營業狀態,以及所有人都退房了的情況
if (this.status == true && this.rooms < 15) {
this.rooms += 1;
alert('退房成功!');
} else if (this.status == false){
alert('退房失敗!hotel 已經停止營業。') ;
}else {
alert('您已經退房了!')
}
},
change:function() {
/* 這裏!表示js語法的取反和python一樣,hotel.status初始爲true
那麼取反就是false*/
this.status = !this.status;
}
};
/*下面定義的三個函數就是,當網頁是的button按鈕被按下時觸發的函數
get函數調用了hotel的getRoom屬性,使得房間數量減少了,並且在網頁是實時
的顯示出來*/
function get() {
hotel.getRoom();
/*document.getElementId()函數可以取到符合id的網頁的元素,這裏取
網頁元素p標籤的id是room,然後用innerHTML方法將其修改爲房間的當前
數量*/
document.getElementById('room').innerHTML = hotel.rooms;
};
function quitRoom() {
hotel.quitRoom();
document.getElementById('room').innerHTML = hotel.rooms;
};
function changeStatus() {
//調用hotel的change()函數,改變hotel的營業狀態
hotel.change();
//對hotel狀態判斷,輸出不同的結果
if (hotel.status == true) {
var s = '營業中...'
} else{
var s = '停止營業!'
}
document.getElementById('sta').innerHTML = s;
}
</script>
</body>
</html>
該HTML文檔執行效果如圖:
這裏就實現了營業狀態下訂房,退房的功能,還能修改營業狀態,並且修改之後就不能再訂房
或者退房。其實最後一個按鈕可以不要,根據系統判斷當前時間來改變營業狀態。