原生 js 寫分頁

2022-03-20 19:12:56 字數 2016 閱讀 4321

這段**是用原生 js 寫的乙個分頁的效果

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

*#ul

#ul li

#div

#ul .background

style

>

head

>

<

body

>

<

div

id='div'

>

<

ul id

='ul'

>

<

li>首頁

li>

<

lili

>

<

li>

li>

<

li>

li>

<

li>

li>

<

lili

>

<

li>尾頁

li>

ul>

div>

<

script

>

varul

=document.getelementbyid('ul

');varli

=ul.getelementsbytagname('li

');li[

2].classname ='

background';

varnum01 =1

;

varnum02

=800

/*總數*/;

//1 //首頁的點選事件

li[li.length

-li.length].onclick

=function

()//

2 //尾頁的點選事件

li[li.length-1

].onclick

=function

()//

li[li.length

-(li.length-1

)].onclick

=function

()

break

; }

}if(j+2

==li.length

-(li.length-2

)) }

//li[li.length-2

].onclick

=function

()

break

; }

}if(j+1

==li.length-2

) }

//分頁的點選事件

for(

vari =0

;i<

li.length-4

;i++

) }

//把所有的分頁背景去掉,給指定的分頁新增背景顏色

function

background(num)

}//給li 寫內容

content(num01);

function

content(number)

}

script

>

body

>

html

>

JS簡單原生分頁

html部分隨便寫即可 不同需求寫不同樣式 html 這裡簡單些乙個ul標籤用來寫入內容 odd呢代表我們分頁要寫入的a標籤頁數 這裡後台我用到了node來書寫,不過原理是相通的,用其他後端語言也是可以實現的。node const express require express 建立乙個伺服器 co...

原生js實現分頁快取

內容涉及知識點 1.後台分頁查詢概念 2.原生ajax請求 3.閉包 思路 利用js的記憶體機制 建立乙個物件快取池 通過閉包保證快取池物件不會被gc 而且能被外界訪問 讀取資料時 判斷快取池中是否已經存在 不存在則傳送ajax獲取資料並快取起來 否則直接在快取池中獲取資料 利用js的記憶體機制 建...

原生js寫瀑布流

準備用自學的jquery寫的,但是不熟悉api,忘得乾乾淨淨了,然後我覺得我直接用js寫比用jquery還要簡單一點 這是html布局 js 1.獲取視口的寬度,獲取每個的寬度 2.遍歷迴圈每個 3.設定top和left top 第一行設定為0,第二行開始 最小高度 left i imgw 必須等所...