JavaScript基礎課程設計

濰坊科技學院腳本開發(fā)技術課程設計報告課程設計名稱：中印計算機軟件學院網站系部名稱：中印計算機軟件院學生姓名：班級：學號：成績：指導教師：李玉杰開課時間：2017-2018學年第一學期目錄一概述 41.1課程設計的目的 42.1課程設計的開發(fā)環(huán)境 43.1課程設計的開發(fā)技術 4二網站總體方案設計 62.1整體設計思路 62.2框架的整體思路 62.3主要特點 7三實現部分 83.1網頁結構 83.2網頁的展覽： 83.3網頁行為的實現： 9摘要本次網頁設計實踐的主題是“學院展覽網站”，在網站設計過程中，通過通過DIV+CSS布局，同時引入Bootstrap的柵格布局對頁面進行調整。在頁面中添加“分時問候”、“圖片輪播”、“二級菜單”、“廣告浮動”、“無縫滾動”等JavaScript特效。通過對該網站的編寫與制作對JavaScript這門語言有了新的學習和理解。一概述1.1課程設計目的大家都知道學校的主頁是學校在Internet上展示形象的門戶，是學校開展電子推廣的基地，是學校在網上的"家"，設計制作一個優(yōu)秀的網站是建設學校成功邁向互聯網的重要步驟。

在當今互聯網時代，一個學校沒有自己的網站就像一個人沒有住址，一個商店沒有門臉。隨著經濟全球化和電子商務經濟的到來，學校如果還固守于傳統(tǒng)模式則必定不能再適應經濟全球化的趨勢，學校網站優(yōu)化是一個不可回避的現實。

一、競爭的需要。國際互聯網的用戶在迅猛地增長。這增長速度是全世界范圍的普遍現象。在美國，歐洲，港澳及其它許多國家,網站和電子信箱系統(tǒng)已經成為世界各國各所不可缺少的重要組成部分。

二、網站建設可以使學校在網上宣傳更加生動形象。盡管你的學校非常好,但人們總是無法看到它的樣子，產品畫冊雖然非常好，但它是靜止的也沒有人能想象到學校最真實的狀態(tài)是什么樣子的。如果以上因素對學生的影響真的非常重要的話,那么學校就應該利用互聯網來介紹學校了，因為WWW技術可以很簡便地為學校網站介紹加入聲音、圖形、動畫甚至影像，這些不斷涌現出來的多媒體技術已讓網絡世界變得豐富多彩。

三、可以迅速樹立學校品牌形象。今天，國際互聯網絡已成為未來生活的代名詞，要顯示學校的實力，提升學校形象，沒有什么比在學校信封、學校宣傳單及各種公眾能看得到的東西印上自己公司獨有的網絡地址和專用的電子郵件地址更有說服力了。這樣學校便加簡單的為自己做好了宣傳。2.1課程設計的開發(fā)環(huán)境網站開發(fā)使用的環(huán)境是sublimetext3。該工具對于javascript的編寫具有諸多的優(yōu)點?？梢钥焖僮⑨屧诰帉懢W站的過程中，代碼的注釋有利于結構的清晰、思路的流暢，同時對于日后代碼的維護和后期的修改都有著重要的作用。自動代碼補全在編寫一個學校前臺官網，其中代碼量較多，外加上對知識點的不熟悉。自動代碼補全功能對于代碼的編寫作用顯著。能夠開始查找在整體過程中，查找的功能并不是很特別，但是這個功能非常高效，能很快速的定位到關鍵的位置，方便其他代碼的編寫?？s略圖定位這個功能是該工具特有的，在左側編寫js等代碼，在右側可以形成左側的縮量圖效果。這個功能能對代碼有一個整體的觀念，方便對項目工程的整體把握?？焖俅蜷_文件各種快捷鍵的使用常常能有助于我們對功能的編寫，同時，sublimetext3能夠右鍵打開文件夾能夠快速定位到文件所在的文件夾。整個工程管理在代碼的左側我們能夠清晰的看到所有的資源文件以及需要的代碼文件，只需單擊即可管理所有的項目文件，這對我們項目的管理是有利的。3.1課程設計的開發(fā)技術 此次使用的開發(fā)技術為基礎的html、css、javascript、jquery、bootstrap等相關基礎。 HTML,超文本標記語言，標準通過標記語言下的一個應用，負責網站的整體結構。通過標簽來展現不同的內容個容器。 CSS，層疊樣式表，通過它可以為頁面的標簽進行美化和修飾，增強網站的整體效果和頁面的優(yōu)化。 Javascript，直譯式腳本語言，給HTML網頁增加動態(tài)功能。為網站增添動態(tài)交互能力和美觀的特效。針對網站所使用的動態(tài)效果都是依靠js來進行實現的。 Jquery，一段javascript代碼塊，對javascript的常用方法進行封裝和簡化，方便程序員編寫和開發(fā)。 Bootstrap，成熟的前端常用框架，針對前端常規(guī)能力和控件進行優(yōu)化和補充，便于開發(fā)。二網站總體方案設計2.1整體設計思路通過對原有網站和其他高校的研究，最新覺得使用“一欄式”開發(fā)，在一欄的基本上再通過div進行不同的細化和補充。就首頁而言，主要包括頭部、標題欄、輪轉大圖、一列的學校相關新聞、專題網站和尾部構成。首先對網頁的整體設計有個全面的把握，然后在事無巨細的增添上去。網站總體包括網站首頁、學校概況、教學工作、學校工作、教研科研、黨團建設、就業(yè)工作、校企合作等八大部分。在此主要展示前五個部分。網頁首頁：主要展現的學校的整體風貌，對學校最新新聞和相關重要信息有了初步的介紹。學校概況：對學校進行相關的概況，其中包括學院簡介、機構設置和現任領導進行相關說明。教學工作：主要通過表格和分頁組件對學校相關的教學工作進行瀏覽和說明。學校工作：使用列表的形式列舉學校的重要工作，包括學校舉辦的相關活動。教研科研：這個欄目使用表單對教研科研調查表進行登錄，然后進行相關信息的調查。2.2框架的整體思路1.首先進行相關內容的設計，構建草圖。 2.進行編碼，構建相關網站內容原型，精準計算相關大小。 3.搜集相關網站內容，充實網站。 4.將內容使用所學的javascript知識合理的規(guī)劃在網站中。 5.測試代碼，完成相關文檔的編寫。2.3主要特點 網站總體設計方案明確，通過總體設計進行開發(fā)和編寫。 網站功能分工合理，通過二級菜單進行詳細說明。 網站色彩搭配適中，適合學校官網的使用。三實現部分3.1網頁結構 網頁結構設計清晰，網頁內容明確。所有頁面使用相同的網站的頭部和尾部，使所有頁面融洽的結合在一起。所有網頁統(tǒng)一使用相同的頁面結構，便于日后的管理與更改。3.2網頁的展覽網站首頁3.3網頁行為的實現：網頁使用的大量的javascript特效，其中包括實現時間及分時問候、二級菜單、滾動字幕、浮動廣告、輪轉圖片、圖片切換、無縫滾動、音樂播放、網頁換膚、圓點動畫網頁加載特效等行為。時間及分時問候： 二級菜單： 滾動字幕：浮動廣告：輪轉圖片： 圖片切換：無縫滾動：音樂播放：網頁換膚：圓點動畫網頁加載特效：其中，列舉部分代碼：1.浮動廣告:HTML部分<divid="floadAD"class="floadAd"><aclass="close"href="javascript:void();"style="color:red">×關閉</a><aclass="item"target="_blank"><imgsrc="images/rczp.jpg"alt="首屆黨建文化節(jié)"/></a></div>CSS部分<style>.floadAd{position:absolute;z-index:999900;display:none;}.floadAd.item{display:block;}.floadAd.itemimg{vertical-align:bottom;}</style>Javascript部分<scripttype="text/javascript">FloatAd("#floadAD");//調用//廣告漂浮窗口functionFloatAd(selector){varobj=$(selector);if(obj.find(".item").length==0)return;//如果沒有內容，不執(zhí)行varwindowHeight=$(window).height();//瀏覽器高度varwindowWidth=$(window).width();//瀏覽器寬度vardirX=-1.5;//每次水平漂浮方向及距離(單位：px)，正數向右，負數向左，如果越大的話就會看起來越不流暢，但在某些需求下你可能會需要這種效果vardirY=-1;//每次垂直漂浮方向及距離(單位：px)，正數向下，負數向上，如果越大的話就會看起來越不流暢，但在某些需求下你可能會需要這種效果vardelay=30;//定期執(zhí)行的時間間隔，單位毫秒obj.css({left:windowWidth/2-obj.width()/2+"px",top:windowHeight/2-obj.height()/2+"px"});//把元素設置成在頁面中間obj.show();//元素默認是隱藏的，避免上一句代碼改變位置視覺突兀，改變位置后再顯示出來varhandler=setInterval(move,delay);//定期執(zhí)行，返回一個值，這個值可以用來取消定期執(zhí)行obj.hover(function(){//鼠標經過時暫停，離開時繼續(xù)clearInterval(handler);//取消定期執(zhí)行},function(){handler=setInterval(move,delay);});obj.find(".close").click(function(){//綁定關閉按鈕事件close();});$(window).resize(function(){//當改變窗口大小時，重新獲取瀏覽器大小，以保證不會過界（飄出瀏覽器可視范圍）或漂的范圍小于新的大小windowHeight=$(window).height();//瀏覽器高度windowWidth=$(window).width();//瀏覽器寬度});functionmove(){//定期執(zhí)行的函數，使元素移動varcurrentPos=obj.position();//獲取當前位置，這是JQuery的函數，具體見：/jq/position.htmlvarnextPosX=currentPos.left+dirX;//下一個水平位置varnextPosY=currentPos.top+dirY;//下一個垂直位置//if(nextPosX>=windowWidth-obj.width()){//這一段是本站特有的需求，當漂浮到右邊時關閉漂浮窗口，如不需要可刪除//close();//}if(nextPosX<=0||nextPosX>=windowWidth-obj.width()){//如果達到左邊，或者達到右邊，則改變?yōu)橄喾捶较騞irX=dirX*-1;//改變方向nextPosX=currentPos.left+dirX;//為了不過界，重新獲取下一個位置}if(nextPosY<=0||nextPosY>=windowHeight-obj.height()-5){//如果達到上邊，或者達到下邊，則改變?yōu)橄喾捶较?。dirY=dirY*-1;//改變方向nextPosY=currentPos.top+dirY;//為了不過界，重新獲取下一個位置}obj.css({left:nextPosX+"px",top:nextPosY+"px"});//移動到下一個位置}functionclose(){//停止漂浮，并銷毀漂浮窗口cl