時間：2023-09-21 00:12:02 | 來源：網(wǎng)站運(yùn)營
時間：2023-09-21 00:12:02 來源：網(wǎng)站運(yùn)營
HTML期末學(xué)生作業(yè)~HTML+CSS+JavaScript仿貓眼電影在線網(wǎng)站：? # ? HTML期末學(xué)生作業(yè)~html+css+javascript仿貓眼電影在線網(wǎng)站(功能齊全)
在線咨詢
web期末結(jié)課大作業(yè) html+css+javascript網(wǎng)頁、電影、仿京東、天貓、服裝、 企業(yè)網(wǎng)站制作，資源里面有網(wǎng)頁的HTML文件、CSS文件、JAVASCRIPT文件和網(wǎng)頁中的圖片文件，用于大學(xué)web網(wǎng)頁課程參考以及相關(guān)從業(yè)人員參考學(xué)習(xí) root/root和 username/password<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>電影-大學(xué)生模板（期末作業(yè)）</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> <div class="header-body"> <a href="index.html?123" class="logo">貓眼電影</a> <div class="city">杭州 <span class="caret"></span> </div> <div class="city-list"> <div class="now-city"> 定位城市: 定位失敗 </div> <div class="citys"> <span class="icon"></span> 定位失敗 </div> </div> <div class="nav"> <ul class="nav-list"> <li><a href="index.html?123" class="nav-model active">首頁</a></li> <li><a href="movies.html" class="nav-model">電影</a></li> <li><a href="cinemas.html" class="nav-model">影院</a></li> <li class="nav-model">演出</li> <li class="nav-model">榜單</li> <li class="nav-model">熱點(diǎn)</li> <li class="nav-model">商城</li> </ul> </div> <div class="app-download"> <a href="#"> <span class="phone"></span> APP下載 <span class="caret"></span> <div class="appcode"> <img src="images/phonecode.png" class="app-code"></img> <p class="down-tip">掃碼下載APP</p> <p class="down-text">選座更優(yōu)惠</p> </div> </a> </div> <div class="search"> <div type="text" class="searchinput"> <input type="text" class="input" placeholder="找影視劇、影人、影院"> <input class="submit" type="submit" value=""> </div> </div> <div class="userimg"> <img src="images/user.png" alt=""> <span class="caret"></span> </div> <div class="userlogin"> <a href="login.html" class=" notlogin">登錄</a> <div class="islogin nologin"> <a href="personal.html">個人中心</a> <a href="index.html">退出</a> </div> </div> </header> <!-- 輪播圖 --> <div class="wrap" id="wrap"> <ul class="content"></ul> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> </div> <!-- 頁面主體 --> <div class="container"> <div class="main"> <!-- 正在熱映 --> <div class="hot-movie"> <h2>正在熱映（4部）</h2> <div class="movies" id="hotmovies"> </div> </div> <!-- 即將上映 --> <div class="movie-box"> <div class="movie-header"> <h2>即將上映（115部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>10月2日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>11月1日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>9月23日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>9月31日上映</p> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>46461661人想看</p> <button onclick="alert('123')">預(yù)告片</button> <button onclick="alert('123')">預(yù)售</button> <p>9月31日上映</p> </div> </div> </div> <!-- 熱播電影 --> <div class="movie-box"> <div class="movie-header c hotmovie "> <h2>熱播電影（115部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies movies-hot"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> </div> </div> <!-- 喜劇電影 --> <div class="movie-box"> <div class="movie-header"> <h2>喜劇電影（115部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> </div> </div> <!-- 恐怖片 --> <div class="movie-box"> <div class="movie-header"> <h2>恐怖電影（115部）</h2> <a href="#"> <span>全部></span> </a> </div> <div class="movies"> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie2.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie3.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie4.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> <div class="movies-model"> <a href=""> <img src="images/hotmovie1.png" alt="" srcset=""> </a> <p>9.0分</p> <button class="buynow">立即購票</button> </div> </div> </div> </div> <!-- 側(cè)邊欄 --> <div class="aside"> <!-- 今日票房 --> <div class="rank"> <h2>今日票房</h2> <div class="ranklist"> <ul class="ranks"> <li class=" rangk-item-first clearfix"> <a href="#"> <div class="first-item clearfix"> <img src="images/rank.png" alt="" srcset=""> </div> <p class="name">愛寵大機(jī)密2</p> <p class="money">0.72萬</p> </a> </li> <li class="rank-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">2</i> <span>冰雪奇緣2</span> </div> <span class="index-money">0.00萬</span> </a> </li> <li class="rank-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">3</i> <span>冰雪奇緣2</span> </div> <span class="index-money">0.00萬</span> </a> </li> <li class="rank-item"> <a href="#"> <div class="index-box"> <i class="index">4</i> <span>冰雪奇緣2</span> </div> <span class="index-money">0.00萬</span> </a> </li> <li class="rank-item"> <a href="#"> <div class="index-box"> <i class="index">5</i> <span>冰雪奇緣2</span> </div> <span class="index-money">0.00萬</span> </a> </li> </ul> </div> </div> <!-- 今日大盤 --> <div class="aside-total"> <h2 class="total-nav">今日大盤</h2> <div class="total-body"> <h2>0.6 <span>萬</span></h2> <span class="more">查看更多></span> <p class="time"><span>杭州時間14:48:31</span> <span>貓眼專業(yè)版實(shí)時票房數(shù)據(jù)</span></p> </div> </div> <!-- 最受期待 --> <div class="hope"> <h2>最受期待 <span>查看完整榜單></span></h2> <div class="hope-body"> <ul class="hope-list"> <li class="hope-item-top1"> <a href="#"> <div class="hope-img"> <img src="images/hope1.png" alt=""> </div> <div class="hope-text"> <p class="hope-name">姜子牙</p> <p class="hope-time">上映時間：2020</p> <p class="hope-num">932707人想看</p> </div> </a> </li> <li class="hope-item-top"> <a href="#"> <div class="hope-img"> <img src="images/hope2.png" alt=""> </div> <p class="hope-name">哪吒重生</p> <p class="hope-num">932707人想看</p> </a> </li> <li class="hope-item-top left"> <a href="#"> <div class="hope-img"> <img src="images/hope3.png" alt=""> </div> <p class="hope-name">唐人街探案3</p> <p class="hope-num">932707人想看</p> </a> </li> <li class="hope-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">4</i> <span>冰雪奇緣2</span> </div> <span class="hope-num">932707人想看</span> </a> </li> <li class="hope-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">5</i> <span>冰雪奇緣2</span> </div> <span class="hope-num">932707人想看</span> </a> </li> <li class="hope-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">6</i> <span>冰雪奇緣2</span> </div> <span class="hope-num">932707人想看</span> </a> </li> <li class="hope-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">7</i> <span>冰雪奇緣2</span> </div> <span class="hope-num">932707人想看</span> </a> </li> <li class="hope-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">8</i> <span>冰雪奇緣2</span> </div> <span class="hope-num">932707人想看</span> </a> </li> <li class="hope-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">9</i> <span>冰雪奇緣2</span> </div> <span class="hope-num">932707人想看</span> </a> </li> <li class="hope-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">10</i> <span>冰雪奇緣2</span> </div> <span class="hope-num">932707人想看</span> </a> </li> </ul> </div> </div> <!-- top100 --> <div class="top"> <h2>TOP 100 <span>查看完整榜單></span></h2> <div class="toplist"> <ul class="topone"> <li class=" top-item-first clearfix"> <a href="#"> <div class="first-item clearfix"> <img src="images/top1.png" alt="" srcset=""> </div> <p class="name">活著</p> <p class="money">9.0分</p> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">2</i> <span>鋼琴家</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">3</i> <span>勇敢的心</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index">4</i> <span>阿飛正傳</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index">5</i> <span>射雕英雄傳之東成西就</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index">6</i> <span>愛回家</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index">7</i> <span>初戀這件小事</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index">8</i> <span>泰坦尼克號</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index">9</i> <span>遷徙的鳥</span> </div> <span class="index-money">8.8分</span> </a> </li> <li class="top-item"> <a href="#"> <div class="index-box"> <i class="index">10</i> <span>蝙蝠俠：黑暗騎士</span> </div> <span class="index-money">8.8分</span> </a> </li> </ul> </div> </div> <!-- 熱門影人 --> <div class="people"> <h2>熱門影人</h2> <div class="peoplelist"> <ul class="peoples"> <li class=" people-item-first clearfix"> <a href="#"> <div class="first-item clearfix"> <img src="images/people.png" alt="" srcset=""> </div> <p class="name">大張偉</p> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">2</i> <span>蔡國慶</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">3</i> <span>黃一山</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index">4</i> <span>蔡軒正</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index">5</i> <span>平安</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index">6</i> <span>王源</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index">7</i> <span>小黑</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index">8</i> <span>郁可唯</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index">9</i> <span>許魏洲</span> </div> </a> </li> <li class="people-item"> <a href="#"> <div class="index-box"> <i class="index">10</i> <span>王力宏</span> </div> </a> </li> </ul> </div> </div> <!-- 娛樂熱點(diǎn) --> <div class="hotspot"> <h2>娛樂熱點(diǎn)</h2> <div class="hotspotlist"> <ul class="hotspots"> <li class=" hotspot-item-first clearfix"> <a href="#"> <div class="first-item clearfix"> <img src="images/hotspot.png" alt="" srcset=""> </div> <p class="name">《什剎?！方裢硌胍婚_播...</p> </a> </li> <li class="hotspot-item"> <a href="#"> <div class="index-box"> <i class="index index-hot">2</i> <span>反差萌!動畫電影《楊戩》“哮天犬” 形象首次曝光</span> </div> </a> </li>什剎?！费胍欢n7.10， “多彩京韻” 版海報(bào)今...</span> </div> </a> </li> </ul> </div> </div> </div> </div></body></html>//用戶的用戶名和密碼var user = {'root': 'root', 'username': 'password'};function initLoginPage() { //初始化驗(yàn)證碼 const captcha = document.getElementById('captcha-img'); captcha.src = generateCaptcha(); captcha.onclick = function () { captcha.src = generateCaptcha(); }; //初始化輸入框的事件 initInputEvent(); //初始化登錄按鈕點(diǎn)擊事件 document.getElementById("form-submit-btn").onclick = login;}/** * 產(chǎn)生驗(yàn)證碼并且設(shè)置session */function generateCaptcha() { ele_captcha.onfocus = function () { this.placeholder = ""; ele_captchaError.style.color = "#FF8D1B"; ele_captchaError.innerHTML = "? 驗(yàn)證碼："; }; ele_captcha.onblur = function () { this.placeholder = "請輸入驗(yàn)證碼"; ele_captchaError.innerHTML = ""; }; } var code = getRandomString(); setSession('Captcha', code); var canvas = getStringCanvas(code); return canvasToBase64Image(canvas);}/** * 得到隨機(jī)字符串 * @param {number} len [字符串長度] * @return {[String]} [隨機(jī)字符串] */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;}/** * 得到隨機(jī)顏色的16進(jìn)制值 * @return {[String]} [顏色的十六進(jìn)制值] */function getRandomColor() { return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);}/** * HTML5 canvas對象轉(zhuǎn)換成png格式圖片的base64編碼字符串 * @param canvas {HTMLCanvasElement} * @returns {string}png格式圖片的base64編碼字符串 */function canvasToBase64Image(canvas) { return canvas.toDataURL("image/png");}/** * 獲得 * @param string * @returns {HTMLCanvasElement} */function getStringCanvas(string) { var canvas = document.createElement("canvas"); //創(chuàng)建canvas的對象 var context = canvas.getContext("2d"); //canvas畫圖的環(huán)境 canvas.width = 80; canvas.height = 30; var string = string || "capa"; // 填充字符串 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; // 產(chǎn)生一個隨機(jī)角度 var angle = Math.random() - 0.8; context.font = "bold 22px 微軟雅黑"; context.fillStyle = getRandomColor(); context.translate(text_x, text_y); // 移動到想0+x，0+y context.rotate(angle); context.fillText(txt, 0, 0); // 還原 context.rotate(-angle); context.translate(-text_x, -text_y); } function checkLoginInfo() { let isSuccess = true; // !!把一個任意類型的值轉(zhuǎn)換為布爾類型，存在為true，不存在為false if (!!user[ele_username.value]) { if (user[ele_username.value] !== ele_password.value) { ele_passwordError.style.color = "#F00"; ele_passwordError.innerHTML = "× 密碼錯誤！"; isSuccess = false; } } else { ele_usernameError.style.color = "#F00"; ele_usernameError.innerHTML = "× 用戶名錯誤！"; isSuccess = false; } if (ele_captcha.value.toLowerCase() !== getSession("Captcha").toLowerCase()) { ele_captchaError.style.color = "#F00"; ele_captchaError.innerHTML = "× 驗(yàn)證碼錯誤！"; isSuccess = false; } return isSuccess; }}關(guān)鍵詞：電影,學(xué)生,作業(yè)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
