Web開發之jQuery實現滾動欄一直處於最底部

2021-08-09 18:20:30 字數 1593 閱讀 4584

相信大家有時候在展示一些實時資料展示並且資料量非常大的時候,由於無法在同一頁面看到最有效的資料,所以我們須要將滾動欄至於底部。以便我們看到最須要的資料和資訊。這裡非常明顯的樣例那拿windows的ping來說吧,當我們長ping的時候,這時候資料會越來越多,並且還是累加的,新資料又所有在後面,所以這個時候讓滾動欄一直處於底部就大有作為了!

大夥能夠看一下,在windows的cmd中執行ping 位址 -t。這時候就會一直ping,剛開始的時候,資料可能比較小,同一屏就能看到

但時間一長。資料就越來越多,同一屏根本就無法看到,並且最有效的資料都在最底部,所以這個時候我們應該看到的是底部最想看到的資料

僅僅要我們把滾動欄處於底部。就達到我們的效果了。!

這個demo通過不斷在textarea標籤中加文字的方式實現滾動欄一直處於最底部的功能(這個比較直觀)

注意:標籤裡只能顯示文字(ps:如果裡面有html的標籤也是以文字形式展示)

標籤裡可以將html的標籤轉化為頁面顯示出來,可以顯得更加整齊、美觀

實際上我是想實現將後台的日誌實時顯示在前端的功能,且返回的資料中有html標籤(ps:比如

),所以最終選擇用來實現日誌顯示功能(後台資料是用vue.js來互動的,後面有時間可以給大家做個詳解)

簡單展示一下我做的東西吧

日誌:td>

id="logs"

v-html="device.logs"

style="width:465px; height: 300px;border: 1px #ccc solid; overflow-y: scroll;float: left;">

div>

td>

tr>

tbody>

table>

function

refreshlogs

() ws2.onerror = function

() ws2.onmessage = function

(message)

ws2.onopen = function

() document.getelementbyid('getlogbtn').textcontent = "停止"

devicedetail.device.getlog = "停止"

}else

}

效果如下

Python實現web開發

參考 python的flask框架實現web開發 環境建議採用pycharm,建立檔案指令碼 webdemo.py from flask import flask 指定web 處理的路由路徑,根路徑 s首頁訪問的函式index def index return hello world 啟動應用例項 ...

web開發之快取

以資料為驅動的web站點,當訪問量增大後,由於頻繁的從db中讀取資料,使得db伺服器的壓力大增,從而影響系統的效能。為了緩解這種來自於大訪問量的頻繁讀取db的壓力,我們可以把一些資料快取起來,當請求過來後,不需要去db中獲取資料,在快取中讀取即可 快取不存在,在到db中取 這樣大大減輕了db的壓力,...

web開發之介面開發流程

web開發很多專案有不同的開發流程,有些專案直接由程式設計師將前端 後台全部包攬開發製作完成。而乙個高質量的web開發專案,應該由需求人員 產品人員 ue設計人員 視覺人員 美工人員 ui製作人員 前端工程師 程式設計師等人員的參與,共同合作完成。下面講一下我公司的開發流程。1.首先由需求人員 產品...