HTML語言學習,網頁交互式行爲管理,JavaScript語言使用

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文檔執行效果如圖:

這裏寫圖片描述
這裏寫圖片描述
這裏寫圖片描述

這裏就實現了營業狀態下訂房,退房的功能,還能修改營業狀態,並且修改之後就不能再訂房
或者退房。其實最後一個按鈕可以不要,根據系統判斷當前時間來改變營業狀態。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章