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
- 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 )
- * One 、 Introduce
- * Two 、 Realization
- * 3、 ... and 、 effect
- Code implementation
- * Four 、 summary
- 5、 ... and 、 Good web effect , How to send links to others ?
- 6、 ... and 、 front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )
- 7、 ... and 、* The source code for
- 8、 ... and 、* More confession source code
* 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
2. Effect style
home page
Ticket purchase / Choose a seat
Sign in / register
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
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 )~
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 ~
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 !
8、 ... and 、* More confession source code
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
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich