1. 程式人生 > >Jave Script與函式的

Jave Script與函式的

                                               基本特點
     JavaScript是一種屬於網路的指令碼語言,已經被廣泛用於Web應用開發,常用來為網頁新增各式各樣的動態功能,為使用者提供更流暢美觀的瀏覽效果。通常JavaScript指令碼是通過嵌入在HTML中來實現自身的功能的。
          1.是一種解釋性指令碼語言(程式碼不進行預編譯)。 
          2.主要用來向HTML(標準通用標記語言下的一個應用)頁面新增互動行為。 
          3.可以直接嵌入HTML頁面,但寫成單獨的js檔案有利於結構和行為的分離。 
          4.跨平臺特性,在絕大多數瀏覽器的支援下,可以在多種平臺下執行(如Windows、Linux、Mac、Android、iOS等)。
     Javascript指令碼語言同其他語言一樣,有它自身的基本資料型別,表示式和算術運算子及程式的基本程式框架。Javascript提供了四種基本的資料型別和兩種特殊資料型別用來處理資料和文字。而變數提供存放資訊的地方,表示式則可以完成較複雜的資訊處理。

1.HTML和CSS回顧 HTML &nbsp 代表一個空格 圖片標籤:img 表格標籤:<table /table> 表格的標題:caption 連結標籤:a 表單標籤:form 輸入框標籤:input 普通文字:type=‘text’ 密碼文字:type=‘password’ CSS 標籤選擇器:div 類選擇器:.類名字 層級選擇器:ul li a{ } 屬性選擇器:input [type=‘submit’] { } 引入方式 1.行內引入:<a style=’'行內引入的樣式‘’> 2.內部引入:寫在head標籤裡面的style標籤裡面的樣式; 3.外部引入:將css樣式獨立成一個檔案,通過<link rel=" stylesheet" href="css/main.css> 與當前html檔案連結在一起。 三種引入方式的優先順序:就近原則

在這裡插入圖片描述 效果相同 在這裡插入圖片描述

2.JS簡介-登錄檔單校驗雛形 在這裡插入圖片描述 function( )是一個函式,一個id只能對應一個物件,alert是彈出 框。 在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述 這裡彈出的是一個標籤物件 在這裡插入圖片描述 這裡我填的使用者名稱和密碼都是‘er’。 如圖,方法是‘get’的話,會在url框顯示密碼和使用者名稱; 如果是post,則不顯示; 注意:在jave script裡,賦值時變數前面都要加 ‘var’ 。

3.JS簡介-登錄檔單校驗是否合格 要求:使用者名稱不能為空,密碼不得少於6位,否則彈出警告框; 這裡我們定義一個函式來判斷 在這裡插入圖片描述 這裡賦值passwdleng時,兩個命令作用是一樣的; 三個等號為全等; 最終會返回一個值,如果不返回,錯誤輸入會被清空。 結果如下 在這裡插入圖片描述

在這裡插入圖片描述

4.JS比較之兩個等號和三個等號 在這裡插入圖片描述 三個等號意為全等 在這裡插入圖片描述

在這裡插入圖片描述

在這裡插入圖片描述

5.實現圖片的切換 塊級元素居中:margin:0 auto; 行內元素居中:text-align:center; 在這裡插入圖片描述

在這裡插入圖片描述 這裡圖片需要在本地目錄裡,如下 在這裡插入圖片描述 button是一個按鈕 這樣就實現了迴圈播放圖片 在這裡插入圖片描述 點選下一頁,就會切換到下一張圖片。這裡提前將上面的廣告放上去了。 在這裡插入圖片描述

6.輪播圖 只需要修改上面的一部分 設定一個時間,自動迴圈 在這裡插入圖片描述 此處的單位是毫秒,所以1000實際是每隔一秒;新增這部分在script裡面;

7.使用者註冊介面優化 在這裡插入圖片描述 這是特點 在這裡插入圖片描述 輸出如下 在這裡插入圖片描述 這裡我們看到 placeholder後跟陰影框

8.使用者註冊 在這裡插入圖片描述 這是script格式 主體 在這裡插入圖片描述 執行後 首先輸入時會有灰色字型提示 如果輸入不滿足會變成紅色 在這裡插入圖片描述 如果滿足會顯示ok 在這裡插入圖片描述 都滿足 在這裡插入圖片描述

9.table表格 生成一個表格 在這裡插入圖片描述 這裡生成的是單個按鈕,每一行按鈕只能代表該行 在這裡插入圖片描述

10.表格的全選和全不選 script格式 在這裡插入圖片描述 這裡的遍歷是用jave script方式遍歷的 在這裡插入圖片描述 此處給每一行加一個相同的名字,便於統一。 效果如下 全不選 在這裡插入圖片描述 全選 在這裡插入圖片描述 此處的第一行的對勾代表除第三行的全部

11.定時彈出廣告圖片 在這裡插入圖片描述 這裡圖片是在js目錄裡,檔名叫main.js 格式在css目錄裡,檔案叫main.css 在這裡插入圖片描述 主圖片依舊在img目錄裡 在這裡插入圖片描述 這是main.css檔案內容 在這裡插入圖片描述 這是插入廣告的部分,用來裝飾定時廣告的彈出 也是main.js的內容 這裡的hiddenAD函式,描述的就是隱藏廣告 adEle.style.display=‘block’ 意為顯示廣告 adEle.style.display=‘none’ 意為隱藏廣告

最終執行結果為主函式圖片每隔一秒換下一個,廣告每隔一秒顯示,再過一秒隱藏,依次迴圈。