HTML language learning, Web interactive behavior management, JavaScript language use

2018.03.29*****************************Good Day*****************************
author: wills

Today, we will introduce how to use HTML to make web pages to manage dynamic events, using JavaScript (js for short). Let's give you a simple example. If there is a very simple web page.

A hotel, called hotel, has 15 rooms in total. It can make a reservation, check out or change the business status. What should we do? Let's take a look at an initial effect picture first.

This is the initial state of the hotel web page. We can realize different functions through the following three buttons. Let's look at the code.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /*Here are some rendered style sheets
        #hotel Indicates that the entire div is set
        margin Set the outer margin, auto means auto center alignment
        width For width, height for height, set background color and text Center
        border-radius It means to fillet the whole block, so that the pattern looks good.*/
            #hotel {        
                margin: 0 auto;
                width: 300px;
                height: 360px;
                background-color: chocolate;
                text-align: center;
                border-radius: 50px;
            }
            #hotel p {
            /*Change the element of p label into row block level element*/
                display: inline-block;
            }
            h1,h2 {
                margin: 0 auto;
                /*Add a boundary line to h1, h2*/
                border-bottom: 5px solid saddlebrown;
            }
            h1 {
                height: 120px;
                /*Center content vertically in h1*/
                line-height: 120px;
            }
            #hotel button {
            /*Layout the buttons and set the background color*/
                margin: 22px 10px;
                border: none;
                background-color: burlywood;
                outline: none;
            }
            /*When the mouse is over the button, the button changes color and highlights*/
            #hotel button:hover {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
         <!-- First, we put the main part into a id='hotel'The main body of the module consists of three parts,
         //The first part: hotel. The second part: business status and the number of rooms. Part three:
         //Three buttons realize different functions or do different things (actually the third button that changes business status should not
         //It's here, but it's just to show the implementation of the function) because the status and the number of rooms will be changed, so
         //Put it in the p tag with the id of sta and room for easy modification.
         //Here, h1 and h2 represent block level elements (block level elements will directly occupy a row of the web page without modification, similarly
         //Line level elements, which will be placed in turn until the line is full), and in which we put the text we want to display on the web page
         //The effect of the web page is rendered in the style sheet in the style tab above.
         button Represents a button, which is a row level element. Its properties onclick Indicates that it will trigger when clicked
         //Event, onclick="get()" indicates that the get function in js is triggered when clicking, and then the get function is executed,
         //Then make a series of behavior changes or render the web page, that is, the realization of interactive behavior -- >
        <div id="hotel">
            <h1>Lover Hotel</h1>
            <h2>state:<p id="sta">In business</p></h2>
            <h2>Number of rooms:<p id="room">15</p></h2>
            <button onclick="get()">Reservation</button>
            <button onclick="quitRoom()">Check out</button>
            <button onclick="changeStatus()">Change of business status</button>
        </div>  
        <!--js The code is written in<script></script>Between labels-->
        <script type="text/javascript">
                /* js The language supports object-oriented programming, so in order to realize the functions of the hotel, I defined a
                Object, named Hotel, its name is hotel, the state is initially true, and the room is initially 15
                It has three behaviors: booking getRoom, retiring quitRoom and changing state.
                js The object definition method in the language is very similar to python's dictionary type, both in the form of key value pairs
                Place in braces, noting that each key value pair is separated by commas.*/
                var hotel = {
                    name:'hotel',
                    status:true,
                    rooms:15,
                    getRoom:function() {
                         //Here this is a special syntax, representing the object itself, and this.status
                         //The same is true for this.rooms
                         //To make a reservation, you need to judge whether it is open or not, and whether there is room or not, and according to No
                         //Respond differently to the same situation
                        if (this.status == true && this.rooms > 0) {
                            this.rooms -= 1;
                        //The alert() function indicates that a window displays the content you want to display temporarily on the web page
                            alert('Reservation succeeded!');
                        }else if (this.status == false){
                            alert('Reservation failed! hotel It has been closed.');
                        }else {
                            alert('Reservation failed. There are no rooms left!')
                        }                       
                    },
                    quitRoom:function() {
                    //Check out needs to judge whether it is in business status and whether everyone has checked out
                        if (this.status == true && this.rooms < 15) {
                            this.rooms += 1;
                            alert('Check out successful!');
                        } else if (this.status == false){
                            alert('Check out failed! hotel It has been closed.') ;
                        }else {
                            alert('You have checked out!')
                        }
                    },
                    change:function() {
                    /* Here! Indicates that the inversion of js syntax is the same as that of python, and hotel.status is initially true
                    So the reverse is false*/
                        this.status = !this.status;
                    }
                };
                /*The three functions defined below are the functions that trigger when the button button of the web page is pressed
                get The getRoom property of hotel is called by the function, which reduces the number of rooms and makes them real-time on the web page
                The display of*/
                function get() {
                    hotel.getRoom();
                    /*document.getElementId()The function can get the elements of the web page that match the id. here, the
                    The id of the page element p tag is room, and then use the innerHTML method to change it to the current room
                    Number*/
                    document.getElementById('room').innerHTML = hotel.rooms;
                };
                function quitRoom() {
                    hotel.quitRoom();
                    document.getElementById('room').innerHTML = hotel.rooms;
                };
                function changeStatus() {
                //Call the change() function of hotel to change the business status of Hotel
                    hotel.change();
                    //Judge the state of hotel and output different results
                    if (hotel.status == true) {
                        var s = 'In business...'
                    } else{
                        var s = 'business suspended!'
                    }
                    document.getElementById('sta').innerHTML = s;
                }       
        </script>
    </body>
</html>
The execution effect of the HTML document is shown in the figure below:



Here, the function of reservation and check-out under the business state is realized, and the business state can be modified, and after modification, the room can no longer be reserved
Or check out. In fact, the last button can not be used to change the business status according to the current time determined by the system.

Tags: Javascript Python Programming

Posted on Sun, 05 Apr 2020 16:11:19 -0400 by irishdreaming