生活随笔
收集整理的這篇文章主要介紹了
【前端期末作业 基于jQuery鲜花销售管理系统】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首頁設計：
首頁設計具體要求如下：
首頁效果圖：
部分html代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鮮花銷售系統首頁
</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/index.css"><script src="js/jquery-3.3.1.min.js"></script>
</head>
<body><div class="navWrap"><div class="logo"><a href="#"><img src="images/logo.png"></a><h1>南理·鮮花店
</h1></div><div class="nav_bar"><a href="index.html" class="cur">首頁
</a><a href="#">聯系我們
</a><a href="#" >供應商
</a><a href="#" >優惠卷
</a><a href="#" >咨詢中心
</a></div></div><div class="biggestbox"><div class="caidan"><ul><li><a href="List2/list2.html">鮮花禮品
</a><ul><li><a href="List2/list2.html">玫瑰花
</a></li><li><a href="List2/list2.html">玫瑰禮盒
</a></li><li><a href="List2/list2.html">鮮花巧克力
</a></li><li><a href="List2/list2.html">鮮花小熊套餐
</a></li></ul></li><li><a href="list.html">鮮花列表
</a><ul><li><a href="List2/list2.html">康乃馨
</a></li><li><a href="List2/list2.html">康乃馨禮盒
</a></li><li><a href="List2/list2.html">康乃馨盆栽
</a></li><li><a href="List2/list2.html">白玉蘭
</a></li><li><a href="List2/list2.html">鮮花蛋糕
</a></li></ul></li><li><a href="List2/list2.html">產品中心
</a><ul><li><a href="List2/list2.html">康乃馨
</a></li><li><a href="List2/list2.html">鮮花盆栽
</a></li><li><a href="List2/list2.html">仙人掌
</a></li><li><a href="List2/list2.html">多肉
</a></li><li><a href="List2/list2.html">綠蘿
</a></li></ul></li><li><a href="List2/list2.html">特價禮盒
</a><ul><li><a href=List2/list2.html">鮮花巧克力
</a></li><li><a href="List2/list2.html">鮮花盲盒
</a></li><li><a href="List2/list2.html">精美花瓶
</a></li><li><a href="List2/list2.html">化肥
</a></li><li><a href="">花種
</a></li></ul></li><li><a href="shopcart/shopcart.html">購物車
</a><ul><li><a href="shopcart/shopcart.html">玫瑰花
</a></li><li><a href="shopcart/shopcart.html">玫瑰禮盒
</a></li><li><a href="shopcart/shopcart.html">鮮花巧克力
</a></li><li><a href="shopcart/shopcart.html">鮮花小熊套餐
</a></li></ul></li><li><a href="about.html">關于我們
</a><ul><li><a href="#">課程總結
</a></li><li><a href="#">職業規劃
</a></li></ul></li><li><a href="login.html">登錄
</a></li><li><a href="register/register.html">注冊
</a></li></ul></div><div class="box" id="box"> <img src="images/00.jpg" alt="" id="img1"><div id="left" id="left"><
</div><div id ="right" id ="right">>
</div><div id="text" id ="right">向日葵
</div></div></div><div class="tab"><div class="tab_list"><ul><li class="current">玫瑰花
</li><li>向日葵
</li><li>滿天星
</li><li>郁金香
</li><li>薰衣草
</li></ul></div><div class="tab_con"><div class="item" style="display: block;"><h3>花語
</h3><p>1.炙熱的愛情 2.純潔天真 3.青春活力
</p><h3>花香
</h3><p>沁人心脾 芳香四溢 香氣撲鼻 芳香飄溢 芬芳馥郁
</p><h3>花色
</h3><p>玫瑰有13種顏色。有紅玫瑰、粉紅玫瑰、橙玫瑰、橘玫瑰、黃玫瑰、香檳玫瑰、綠玫瑰、淡綠色玫瑰、藍玫瑰、紫玫瑰、白玫瑰、紅白玫瑰、黑玫瑰
</p><h3>花茶
</h3><p>1.中醫認為，玫瑰花味甘微苦、性溫，最明顯的功效就是理氣解郁、活血散淤和調經止痛。此外，玫瑰花的藥性非常溫和，能夠溫養人的心肝血脈，舒發體內郁氣，起到鎮靜、安撫、抗抑郁的功效。
</p></div><div class="item"><h3>花語
</h3><p>1.沉默的愛 2.青春陽光，活力四射3.堅定執著4.象征著人們對美好生活的追求
</p></div><div class="item"><h3>花語
</h3><p>滿天星的花語是關愛、清純、配角、真愛和純潔美好的心靈。滿天星的花語和它花朵的樣子一眼，純潔簡單的愛。不同顏色的滿天星的含義也是不同的，白色滿天星的花語是浪漫純潔，藍色漫天星的花語是真心喜歡你，而粉色滿天星的花語就顯得比較扎心了，是甘愿做配角的愛。
</p></p></div><div class="item"><h3>花語
</h3><p>1、高雅、珍貴、財富、愛惜、友誼。
</p></div><div class="item"><h3>花語
</h3><p>薰衣草的花語和象征含義是：等待愛情。它就像是含苞待放的青春，憧憬著未來期許著愛情的到來。愛情或許會來，但是卻不知道是多久會來。
</p></div></div></div><div class="new"><p>限時打折，快來搶購吧!!!!!!
</p><ul><li><hgroup><h2>紅玫瑰玫瑰花束
</h2><h2>300元/打7折
</h2><h2></h2><h2></h2></hgroup></li><li><hgroup><h2>紫色玫瑰禮盒
</h2><h2>240元/打7折
</h2><h2></h2><h2></h2></hgroup></li><li><hgroup><h2>藍玫瑰花束
</h2><h2>350元/打7折
</h2><h2></h2><h2></h2></hgroup></li></ul></div><footer><div class="banquan"><a>版權 鮮花銷售管理系統
</a></div> </footer>
</body>
</html>
<script>var box =document.getElementById('box')var img =document.getElementById('img1')var left =document.getElementById('left')var right =document.getElementById('right')var text =document.getElementById('text')var arr_img = ['images/00.jpg','images/01.jpg','images/02.jpg','images/03.jpg','images/04.jpg','images/05.jpg',]var arr_text =['向日葵','鮮花蛋糕','粉蝶花','禮品小熊','禮品巧克力','白玉蘭',]var currentIndex =1;function slide (){currentIndex =++currentIndex%6;img.src = arr_img[currentIndex];text.innerText =arr_text[currentIndex] ;}var pause = setInterval(slide,2000)box.addEventListener('mouseover',function(){clearInterval(pause);})box.addEventListener('mouseout',function(){pause = setInterval(slide,2000);})left.addEventListener('click',function(){currentIndex =--currentIndex%6;if(currentIndex<0){currentIndex +=6;}img.src = arr_img[currentIndex];text.innerText =arr_text[currentIndex];})right.addEventListener('click',function(){currentIndex =++currentIndex%6;img.src = arr_img[currentIndex];text.innerText =arr_text[currentIndex];})$(".tab_list li").click(function () {$(this).addClass("current").siblings().removeClass("current");var index = $(this).index();console.log(index);$(".tab_con .item").eq(index).show().siblings().hide();});$(".box>li").mouseover(function(){$(this).children("ul").show();});$(".box>li").mouseout(function(){$(this).children("ul").hide();});
</script>
分頁效果：
需要源碼的點擊下方鏈接獲取：
源代碼
提取碼：hrq1
總結：
規劃網站結構：
該網頁由6個頁面組成，其中包括首頁：index.html，用戶登錄頁面login.html,注冊頁面：register.html，關于我們頁面：about.html,包含內容：學號、姓名、班級、職業規劃、課程總結，關于我們網頁學號、姓名、班級的樣式使用ID，職業規劃、課程總結的樣式使用CLASS，通過DOM控制臺輸出。列表頁:list.html,后臺管理：manage.html，其中包含管理員登錄頁面，后臺管理可以根據鮮花銷售系統主題定義相關功能模塊，實現添加內容、刪除內容，編輯內容的功能。每個頁面都加上學號+姓名版權所有。除此之外還添加了購物車頁面shopcart.html ,采用jQuery內容的操作方法，實現購物車增減商品數量和商品小計等功能。
總結
以上是生活随笔為你收集整理的【前端期末作业 基于jQuery鲜花销售管理系统】的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
