如何使用JavaScript建設交互式網站

發表時間:2020-08-05 11:11作者:網站建設來源:江蘇互旦科技網址:http://www.gtechxp.com/how-to-create-a-website-with-JavaScript.html

JavaScript是一種可用來使網站建設具有交互性的編程語言。當我們在Google上搜索內容或單擊鏈接時,我們的網站就會更改-這就是JavaScript允許我們執行的操作。

如何使用JavaScript建設交互式網站


首先,我們將使用Sublime創建具有常規樣板信息的index.html文件,并在此處在body標簽中創建一個快速按鈕。


然后,我們將創建一個js文件夾,并在其中放置一個名為script.js的文件-此名稱是慣例。接下來,我們將將此JS文件鏈接到我們的代碼,就像在先前的教程中對CSS和bootstrap框架所做的一樣。它將進入我們的頭部標簽內。


現在我們有了JavaScript!到目前為止,一切看起來都沒有什么不同,但是我們已經準備就緒,可以開始編寫代碼了?,F在,我們想用一條隱藏的消息使我們的朋友感到驚訝。當他們第一次加載屏幕時,只會顯示“單擊此處”按鈕,但是如果他們單擊該按鈕,則隱藏的消息將顯示出來。首先,讓我們隱藏消息,然后添加一些CSS,以便首先隱藏它……


現在刷新頁面,我們看到盡管我們已經用代碼編寫了此元素,但是由于將display屬性設置為none,因此它是隱藏的。


我們需要做的就是編寫JavaScript,這樣,當我們單擊按鈕時,該消息就會顯示出來,因此我們將轉到script.js并編寫一個函數。要創建一個函數,我們將先編寫關鍵字function,然后再編寫該函數的名稱-在這里,它是揭示消息。如果我們需要在函數中添加參數,則可以將其放在括號之間,但現在不必擔心,因此我們不會在其中添加任何內容。然后,我們可以添加函數的主體—調用RevealMessage()時它將實際執行的操作。在函數內部,我們將訪問變量文檔(又稱為HTML文檔),然后獲取ID為hiddenMessage的元素(我們之前創建的段落)。接下來,我們將訪問此元素的樣式(即CSS),并將其顯示屬性設置為值“ block”。


現在,我們有了這個功能RevealMessage,但它尚未連接到按鈕?;氐轿覀兊腍TML,我們將onclick屬性添加到我們的按鈕中,并為其指定revealMessage的值。這基本上表示單擊此按鈕后,請運行reveveMessage函數。


刷新頁面,讓我們對其進行測試。當我們單擊按鈕時,將顯示消息。


我們只是使用JavaScript來操縱display屬性的值,但這幾乎可以用于CSS中的任何屬性。我們可以使用JavaScript更改圖像或背景的顏色,或者根據用戶的行為進行更改。


盡管這看起來很酷,但CSS操縱并不是JavaScript唯一能做的。我們還可以向該假期添加一個倒數,以便用戶每次按下倒數按鈕時,假期日期將越來越近?;氐酱a,我們將添加一個帶有id countDownButton和onclick操作countDown()的按鈕。


接下來,我們將創建一個div并將這些段落中的樣式和id屬性放在div上,以便隱藏消息和倒計時。


轉到JavaScript以使倒計時生效,我們將編寫關鍵字函數并將其命名為countDown。同樣,我們將不提供任何參數,然后繼續執行我們的方法。我們將使用關鍵字var創建一個變量,并將其命名為currentVal。其值將是具有id countDownButton的元素的文本,可以使用innerHTML屬性檢索該文本。然后,我們將有另一個名為newVal的變量,并給它提供currentVal減去1的值-這就是我們倒計時的方式!接下來,我們將使用getElementById函數抓取countDownButton的文本并將其設置為newVal,從而將countDownButton的文本設置為新值。


這將使我們倒數并刷新頁面…我們有倒數按鈕!


但是,您可能會注意到有時我們的倒數會低于零。為了防止這種情況,我們可以添加一個稱為if語句的東西?;旧?,我們會說該按鈕的默認新值為零,但是如果該按鈕的當前值為1或更高,那么我們將減去(倒數)一,并將其作為按鈕的新值。否則,按鈕的值將為零,即默認值。


刷新頁面,現在我們可以進行倒計時,并且不會低于零。


那是對JavaScript的介紹,以及它如何使您的網站建設具有交互性。在這里,我們編寫了原始JavaScript,這意味著我們在代碼中沒有使用任何額外的庫。

文章列表
2019-07-15
前期蘇州seo就title標簽使用技巧進行了詳細的分析,也告訴大家關于T標簽使用注意事項,本期我將以Keyword...
2019-07-15
google海外推廣一般所指谷歌和必應這類的海外大型搜索引擎優化。本次教程由江蘇互旦蘇州外貿網站優化提供,教你如何...
2019-07-16
robots文件在蘇州seo網站優化中的位置舉足輕重,它的作用在于讓搜索引擎便于抓取優質內容,過濾掉一些無用頁面、...
2019-07-16
蘇州外貿推廣怎么做?Facebook、雅虎、谷歌和必應等平臺如何推廣產品?企業網站優化步驟有哪些?接下來就由江蘇互...
2019-07-18
  外貿網站建設對于非專業人士來說似乎是一項了不起的技術,但并不困難。隨著軟件之類的傻瓜的發展,為了降低成本,網站...
2019-07-19
蘇州外貿網絡推廣要素:一是要調查你推廣的國家和地區的詳細信息,了解當地的風土人情,這是細節。一方面能最大化的流量轉...
2019-07-19
  提高企業站谷歌代理在搜索引擎上的排名,特別是客戶急著要排名,關鍵詞不在首頁就很頭疼。接下來我就為大家著重介紹優...
2019-07-20
   網站營銷方式總結就那么幾種,但是如何高效的利用的這些方法吸引流量卻是件難事。本期我就以蘇州外貿網絡推廣相關企業來講,深挖海外營銷方法。    首先是半分鐘規則:如果您不能讓客戶知道您在30秒內銷售的產品,產品在哪里使用,那么您就完成...
2019-07-20
一個有吸引力的外貿網站不能與SEO和網站建設分開。自然排名是增加用戶點擊網站的概率,而網站建設是留住用戶的關鍵。接...
2019-07-22
  國外的外貿公司谷歌網站的分類一般都是sem,這是我們通常所說的競價。雖然這種方法工作很快,但入門成本也很高,因...