我正在構建一個自動分頁計算器，可以根據用戶輸入計算偏移量和范圍。一個非常簡單的任務，但由于 for 回圈中從 0 開始的偏移量，我的演算法已關閉。不管怎么說，從 0 或 1 開始，數字永遠是關閉的。我怎樣才能使這項作業？
例如輸入 100 個專案，每頁 25 個專案被 4 關閉：
page : 1 | offset : 0 | range : 1 - 25 | total : 24
page : 2 | offset : 25 | range : 26 - 50 | total : 24
page : 3 | offset : 50 | range : 51 - 75 | total : 24
page : 4 | offset : 75 | range : 76 - 100 | total : 24
//event listener
var button = document.getElementById('submit');
//click
button.addEventListener('click',function(){
//div results
var results = document.getElementById('results');
//clear div before appending
results.innerHTML= '';
//grab value
var total_items = document.getElementById('total_items').value;//331165139
var per_page = document.getElementById('items_per_page').value;
//total pages
var total_pages = Math.ceil(total_items/per_page);
//iterate over pages
for(var x = 0; x<total_pages; x ){
//get page
var page = x 1;
//offset
var offset = (per_page * page) - per_page;
//range from
var from = ((page - 1) * per_page) 1 ;
//range to
var to = per_page * page
var range = from ' - ' to;
//creating divs
var newDiv = document.createElement('div');
newDiv.innerHTML = 'page : ' page ' | offset : ' offset ' | range : ' range ' | total : ' (to-from);
results.appendChild(newDiv);
}
})<h3>Pagination Calculator</h3>
<hr>
<p>Calculates pagination automatically in the console</p>
<p>*Pop open the console</p>
<hr>
<label>total items </label>
<input id="total_items">
<label>limit per page</label>
<input id="items_per_page">
<button id="submit">Submit</button>
<hr>
<div id="results"></div>uj5u.com熱心網友回復：
關于你的代碼有什么問題的最簡單的答案是你有一個錯誤的錯誤。這些很常見。
當您想計算 和 之間的整數時a，b包括在內，計數不是b - a。是b - a 1。舉個例子很容易看出。如果您想計算 和 之間的數字5，8我們有5、6、7和8, 的總數4。但是8 - 5是3。我們需要添加一個來說明第二個包含的端點。
但我會以不同的方式看待這些問題。
在不嘗試復制您的 UI 的情況下，我可能會撰寫如下函式：
const paginate = (items, per) =>
Array .from ({length: Math .ceil (items / per)}, (_, i) => ({
page: i 1,
offset: i * per,
range: [i * per 1, Math .min ((i 1) * per, items)],
total: Math .min ((i 1) * per, items) - (i * per)
}))
console .log (paginate (99, 8)).as-console-wrapper {max-height: 100% !important; top: 0}這會一次獲取所有頁面。另一種方法是在請求時使用頁碼動態創建頁面范圍。（也可以使用偏移量來完成；每種方法都有利有弊。）
這可能看起來像這樣：
const nextPage = (
items = [], per = 10, page = 1, top = Math .min ((page 1) * per, items)
) => ({
page,
range: [page * per 1, top],
total: Math .max (0, top - (page * per)),
done: top >= items
})
console .log (nextPage (99, 8, 1)) // `done` is false
console .log (nextPage (99, 8, 2)) // ...
console .log (nextPage (99, 8, 3)) // ...
console .log ('....') // `done` stays false
console .log (nextPage (99, 8, 11)) // ...
console .log (nextPage (99, 8, 12)) // `done` is now true.as-console-wrapper {max-height: 100% !important; top: 0}Also, do note the comment that said
My friend, do realize
inputElement.valuereturns a string!!!
This happened to not hurt you because the only arithmetic you did with your input values was to multiply or subtract them. Had you tried to add, you might have gotten some surprising answers because of string concatenation.
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/441741.html
標籤：javascript 算法 数学
上一篇：如何使用“%”數學運算式？