current position：Home>10 sets of final students' homework ~ HTML + CSS + JavaScript imitation Dingdang film online website (fully functional)

10 sets of final students' homework ~ HTML + CSS + JavaScript imitation Dingdang film online website (fully functional)

2021-08-22 22:58:06 【@. code out the future】

10 set HTML The students finish their homework at the end of the term ~html+css+javascript Imitation Dingdang movie online website ( The function is all ready )

web End of term homework html+css+javascript Webpage 、 The movie 、 Imitation of Jingdong 、 Tmall 、 clothing 、 Enterprise website production , There are web pages in the resource HTML file 、CSS file 、JAVASCRIPT Files and picture files in web pages , For University web Web course reference and relevant practitioners reference learning

* List of articles


* One 、 Introduce

Use native HTML、CSS、JavaScript Write a static movie website , The name Dingdang movie .

A small work done when learning the basic knowledge of the front end , Refer to a prototype of many movie websites , Record your learning process and products here .

* Two 、 Realization

Tinkle movies total 4 A page , They are the login registration page 、 home page 、 Movie details page and movie ticket purchase page .

The website needs to log in , The account password is written in JS in , The login account and password are root/root and username/password

I remember the most difficult thing to achieve at that time was the rotation map , But it was finally done , The effect is quite satisfactory .

* 3、 ... and 、 effect

1. File directory

Insert picture description here

2. Effect style

home page

Insert picture description here
Insert picture description here

Ticket purchase / Choose a seat

Insert picture description here
Insert picture description here

Insert picture description here

Sign in / register

Insert picture description here
Insert picture description here

Code implementation

html Home page 

  
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title> Ding Dang is a good movie - College student template （ Final assignment ）</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<header class="header">
    <div class="container">
        <!--logo-->
        <a href="index.html" class="logo"></a>
        <!-- Navigation tag -->
        <div class="nav">
            <ul class="navbar">
                <li><a href="index.html" class="active"> home page </a></li>
                <li><a href="movie.html"> Ticket purchase </a></li>
                <li><a href="javascript:;"> Cinema </a></li>
                <li><a href="javascript:;"> Community </a></li>
            </ul>
        </div>
        <!-- The shopping cart -->
        <div class="headcart">
            <i class="cart-icon"></i>
            <b class="card-num"></b>
            <div class="card-tip"></div>
        </div>
        <!-- User login registration -->
        <div class="user">
            <div class="userout">
                <a href="login.html" class="login cur"> Sign in </a>
                <a href="register.html" class="register cur"> register </a>
            </div>
            <div class="userin">
                <a href="javascript:;" class="menu-item-user">
                    <img class="user-face" src="./imgs/userface.jpg" alt="userface">
                    <span class="user-name"></span>
                </a>
                <span class="caret"></span>
                <ul class="dropdown-menu">
                    <li><a href="javascript:;"> Personal center </a></li>
                    <li><a href="javascript:;"> Log out </a></li>
                </ul>
            </div>
        </div>
        <!-- Search bar -->
        <div class="search">
            <form class="form-search" action="" method="">
                <input type="text" id="search-input" class="form-search-input" placeholder=" Search for movies 、 Cinema " autocomplete="off"/>
                <a class="form-search-icon" href="javascript:;" onclick="searchBtnClick(this,event)"></a>
            </form>
        </div>
 
        <!--APP download -->
        <div class="app-download">
            <span class="phone-icon"></span>
            <span class="app-text"> download APP</span>
            <span class="caret"></span>
            <div class="qrcode-tip">
                <img class="qrcode-img" src="imgs/dingdang-qrcode.png" alt=" Scan QR code to download APP"/>
                <p class="qrcode-tip-title"> Scan code download client </p>
                <p class="qrcode-tip-content"> Mobile ticket   Convenient and affordable </p>
            </div>
        </div>
    </div>
</header>
            <div class="aside">
                <div class="panel-header">
                    <span class="panel-title"> Today's box office </span>
                    <a href="javascript:;" class="panel-more"> more </a>
                </div>
            <div class="aside">
                <div class="panel-header">
                    <span class="panel-title"> Highly anticipated </span>
                    <a href="javascript:;" class="panel-more"> more </a>
                </div>
                <div class="movie-rank">
                    <ul>
                        <li class="movie-rank-top1">
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">1</span>
                                <img src="./imgs/poster/haishanggangqinshi.jpg" alt="">
                                <div>
                                    <p class="movie-rank-name"> Marine pianist </p>
                                    <span class="box-office">1500 No one wants to see it </span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">2</span>
                                <p class="movie-rank-name"> Leaf asked 4</p>
                                <span class="box-office">1400 No one wants to see it </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num movie-rank-top3">3</span>
                                <p class="movie-rank-name"> If I could ride on the waves with you </p>
                                <span class="box-office">1000 No one wants to see it </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">4</span>
                                <p class="movie-rank-name"> Whistler </p>
                                <span class="box-office">900 No one wants to see it </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">5</span>
                                <p class="movie-rank-name"> About in winter </p>
                                <span class="box-office">800 No one wants to see it </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">6</span>
                                <p class="movie-rank-name"> Whistler </p>
                                <span class="box-office">700 No one wants to see it </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">7</span>
                                <p class="movie-rank-name"> God · fire </p>
                                <span class="box-office">600 No one wants to see it </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">8</span>
                                <p class="movie-rank-name"> I have you all my life </p>
                                <span class="box-office">550 No one wants to see it </span>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <span class="movie-rank-num">9</span>
                                <p class="movie-rank-name"> Frozen 2</p>
                                <span class="box-office">450 No one wants to see it </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
<footer class="footer">
    <div class="container">
        <div class="link-nav">
            <ul>
                <li><a href="javascript:;"> About tinkle </a></li>
                <li><a href="javascript:;"> Join us </a></li>
                <li><a href="javascript:;"> Contact us </a></li>
                <li><a href="javascript:;"> Privacy policy </a></li>
                <li><a href="javascript:;"> Problem feedback </a></li>
            </ul>
            <div class="copyright">Copyright  2019  Dingdang movie </div>
        </div>
        <div class="sns">
            <a href="javascript:;" class="sina-icon icon"></a>
            <a href="javascript:;" class="wechat-icon icon"></a>
            <a href="javascript:;" class="rss-icon icon"></a>
        </div>
    </div>
</footer>
<div id="toTop"></div>
 
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/slidey.js"></script>
<script type="text/javascript"> window.onload = function () {
       setPage("index.html"); initPublic(); initScrollToTop(); new initSlidey(); }; </script>
</body>
</html>

js Login section 

// User name and password 
var user = {
    'root': 'root', 'username': 'password'};

function initLoginPage() {
    
    // Initialization captcha 
    const captcha = document.getElementById('captcha-img');
    captcha.src = generateCaptcha();
    captcha.onclick = function () {
    
        captcha.src = generateCaptcha();
    };

    // The event that initializes the input box 
    initInputEvent();

    // Initialize login button click event 
    document.getElementById("form-submit-btn").onclick = login;
}

/** *  Generate verification code and set session */
function generateCaptcha() {
    
        ele_captcha.onfocus = function () {
    
            this.placeholder = "";
            ele_captchaError.style.color = "#FF8D1B";
            ele_captchaError.innerHTML = "*  Verification Code ：";
        };

        ele_captcha.onblur = function () {
    
            this.placeholder = " Please enter the verification code ";
            ele_captchaError.innerHTML = "";
        };
    }    var code = getRandomString();
    setSession('Captcha', code);
    var canvas = getStringCanvas(code);
    return canvasToBase64Image(canvas);
}

/** *  Get random string  * @param {number} len [ String length ] * @return {[String]} [ Random string ] */
function getRandomString(len) {
    
    var ostr = "abcdefghijkmnpqrstuvwxyzABCEFGHJKLMNPQRSTWXYZ1234567890";
    var len = len || 4;
    var ostr_len = ostr.length;
    var randomString = "";
    for (var i = 0; i < len; i++) {
    
        randomString += ostr.charAt(Math.floor(Math.random() * ostr_len));
    }
    return randomString;
}


/** *  Get random colors 16 Base value  * @return {[String]} [ The hexadecimal value of the color ] */
function getRandomColor() {
    
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
}

/** * HTML5 canvas Object conversion to png Format picture base64 Encoded string  * @param canvas {HTMLCanvasElement} * @returns {string}png Format picture base64 Encoded string  */
function canvasToBase64Image(canvas) {
    
    return canvas.toDataURL("image/png");
}

/** *  get  * @param string * @returns {HTMLCanvasElement} */
function getStringCanvas(string) {
    
    var canvas = document.createElement("canvas"); // establish canvas The object of 
    var context = canvas.getContext("2d"); //canvas Drawing environment 

    canvas.width = 80;
    canvas.height = 30;
    var string = string || "capa";

    //  Fill string 
    for (var i = 0; i < string.length; i++) {
    
        var txt = string.charAt(i);
        var text_x = 10 + i * 18;
        var text_y = 20 + Math.random() * 6;
        //  Generate a random angle 
        var angle = Math.random() - 0.8;
        context.font = "bold 22px  Microsoft YaHei ";
        context.fillStyle = getRandomColor();
        context.translate(text_x, text_y); //  Move to want to 0+x,0+y
        context.rotate(angle);
        context.fillText(txt, 0, 0);
        //  Restore 
        context.rotate(-angle);
        context.translate(-text_x, -text_y);
    }

    function checkLoginInfo() {
    
        let isSuccess = true;

        // !! Convert a value of any type to a boolean type , Existence as true, There is no such thing as false
        if (!!user[ele_username.value]) {
    
            if (user[ele_username.value] !== ele_password.value) {
    
                ele_passwordError.style.color = "#F00";
                ele_passwordError.innerHTML = "×  Wrong password ！";
                isSuccess = false;
            }
        } else {
    
            ele_usernameError.style.color = "#F00";
            ele_usernameError.innerHTML = "×  User name error ！";
            isSuccess = false;
        }

        if (ele_captcha.value.toLowerCase() !== getSession("Captcha").toLowerCase()) {
    
            ele_captchaError.style.color = "#F00";
            ele_captchaError.innerHTML = "×  Verification code error ！";
            isSuccess = false;
        }

        return isSuccess;
    }
}

* Four 、 summary

Tinkle movies total 5 A page , They are the login registration page 、 home page 、 Movie details page and movie ticket purchase page .

Look back at , I still think it's awesome , There was no framework at that time , Native implementation .

I hope to continue to maintain my original learning enthusiasm and motivation , Make continuous exploration and progress .

Let me share with you ！！

5、 ... and 、 Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( Use for free forever )

1. You don't need to buy a server to deploy online , Your connection is accessible all over the world , Here is a necessary artifact for programmers ~
Plugins are integrated with super easy-to-use plug-ins , Download and install for free , Simple and easy to understand , It's an artifact ~ If necessary, it can be found in the article ↓ Xiagong Z Number acquisition

2. Is to do your code effect well , Deploy online , Send links to others , You can let the other party click in through your connection , You can see the effect of your web page , Both computer and mobile terminals are OK ! ( Otherwise, people will send files when they see your web page , The experience is not very good ~)

1.1 Deployment process

Insert picture description here

1.2 wow ~ Deployment success

wow ~ Deployment success ! Deploy your written page online , People all over the world can access your web page through links ( Free forever )~

Insert picture description here

6、 ... and 、 front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~
Insert picture description here

7、 ... and 、* The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」！

* 3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

Insert picture description here

8、 ... and 、* More confession source code

100 Paragraph confession source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225804892q.html

The sidebar is recommended

guess what you like

Random recommended