錨點滑動和簡單的表單驗證

2021-08-28 04:31:26 字數 1480 閱讀 4776

照例先來乙個總結,自己動手多做一些網頁,關於布局定位就會很好的理解和掌握,這一點我的體會蠻大的。但是目前還沒有想到好的方式來記錄這個布局定位的問題,等以後心血來潮了說不定就會寫一篇了。那我現在記錄的就是關於這周遇到的瞄點平緩滑動和表單驗證的問題,也是關於js和jq的問題吧,把遇到的js和jq的問題記錄下來應該會在這方面有所進步吧。但是呢,表單驗證的我也只是學到了一點點皮毛,以後有機會會再次整理一下關於表單驗證的問題的。

關於錨點問題,利用標籤的href屬性很好就可以實現,但卻是直接的跳轉,會有點突兀的感覺,那麼,就用jq的animate來實現平緩滑動吧。乙個簡單的例子用來理解。

跳轉

$(function(),500);

});})

jq的animate()方法:$('selector').animate(,speed,easing,callback)

styles可以包括多種,這裡用到的是scrolltop()方法,設定或返回被選元素的垂直滾動條位置,其語法為scrolltop(position)。

要跳轉的位置是$(this).attr('href'),問題又來了,attr是什麼鬼,attr()是css中的函式,它是返回選擇元素的屬性值,括號裡的內容是html的屬性名。

offset()方法是設定或返回被選元素相對於文件的偏移座標,可以實現更好的跳轉效果。偏移座標中帶有兩個屬性物件(top和left),也可以使用函式設定偏移座標:.offset(function(index,currentoffset)),index-返回集合中元素的index位置,currentoffset - 返回被選元素的當前座標。

speed可以用毫秒、「slow」、「fast」,來定義時間。

easing規定速度,可以用「swing」、「linear」表示,swing是在開頭結尾移動慢,中間移動快,linear是勻速移動的。

callback是animate函式執行完之後要執行的函式。

其中spped,easing,callback都是可選的,不是必須的。

做的是乙個驗證不能為空值和對長度的控制的表單,也是乙個簡單的例子說明一下。

function $(elementid)

function nicknumblur()

if(phone.value.length > 11)

phoneid.innerhtml = "";

return true;

}

千萬千萬要注意的一點是,在js**中,一定要加window.οnlοad=function(){},否則的話是沒有效果的,當然,還有乙個辦法就是利用jq,新增一句function $(elemenid)這樣也可以執行的。

onblur事件指物件在失去焦點時發生函式。

下面的就是要提示的內容,可以自己為其設定樣式。

js**其實也比較好理解了,主要是乙個控制條件,值得注意的一點是return:false和return:true是萬萬不能丟的!

簡單的表單驗證

效果圖 失焦驗證,點選按鈕再次驗證,驗證通過切換 使用者註冊 input type text name id name v model data.name placeholder 使用者名稱 blur aa span class name msg span input type text name ...

簡單表單驗證的公共函式

首先要新增require req valid type 需要驗證的 class forminfo 姓名 b label name staff name class dfinput value type text require req valid type normal label li 工號 b ...

JavaScript實現滑動條的簡單驗證

找到drag.js檔案 注意上方的兩張效果圖,有沒有發現拖動前和拖動後的字都不一樣,拖動前的字是 拖動滑塊驗證。拖動後的字是 驗證通過。給它設定乙個id,名為haha,目的就是來接受在沒滑動前的幾個字,就是通過字來驗證登陸。好了,有了id後我們自然就能接收這幾個字的值了。回到login.html頁面...