1: What did you learn
- Learn to apply the localStorage localStroage, set the localStorage localstorage.setitem (“id”,”1″); GetItem (“id”) is used to get the stored value, and localStroage.removeItem(“id”) is used to remove the local stored value.
- You can use the Window. scrollTo Api to pass in a value (horizontal, vertical) to return the top, and you can also pass in an object to control the speed of return
- Return to the previous page history.go(-1);
- Solutions to variable pollution
2: What is your progress
Through the completion of this project, the application of local storage localStroage has been deepened. I have a new understanding of the scrollTo API and a more thorough understanding of Ajax after applying Ajax for many times to send requests. Reg.test (STR) is also used to determine the reg.test(STR) for login registration. The application of offsetTop and ScroolTop and scrollHeight is more skilled than before. Variable pollution can be solved by closures and let.
3: What’s wrong with you
Not enough understanding of component packaging code, the underlying prototype logic is a bit confused.
4: Summarize the business in the project that you are in line with the implementation
- After the completion of this project, what impressed me most was the application of value transfer between pages, that is, localStorage. Localstorage. setItem and localstorage. getItem store values locally respectively. Fetch the stored value on another page and apply it; Go (-1), the value passed in parentheses is -1 to return to a historical page, and the value passed in parentheses is 1 to forward a page. I only knew before and did not apply these two functions, but now I have skillfully applied them after finishing this project, which is a small progress (the code is as follows).
- Lazy loading of images
/ / lazy loading
var imgs = document.querySelectorAll(".img img");
imgs = Array.from(imgs);
window.onscroll = function (e) {
setTimeout(function () {
LazyLoading(imgs)
}, 2000)
}
LazyLoading(imgs);
function LazyLoading(imgs) {
for (var i = 0; i < imgs.length; i++) {
var height = imgs[i].offsetTop;
var wheight = window.innerHeight;
var sheight = document.documentElement.scrollTop;
if (height <= wheight + sheight) {
imgs[i].src = imgs[i].getAttribute('date-src'); }}};Copy the code- After an Ajax-initiated request, using a for loop to render the data in the interface, variable contamination occurs. You can declare variables with let declarations. Or closures can solve the problem of variable contamination.
- And then there is the application of regular, matching Numbers, letters / ^ [a zA – Z0-9] {6, 13} / or alphanumeric underline / ^ [/ w] 6, 13} {$/ etc. {} most at least, this is representative of quantifiers, there are two parameters (minimum and maximum), You can use reg.test(string to match) to determine if the condition is met. Return true if the condition is met.
- There is a small function in the project, namely floor scrolling, and the main principle of implementation is to use element. OffsetTop, which can be achieved in two steps:
- 1. Determine how far the current element is from the top of the content area. If the current element. OffsetTop < is the height of the scroll, add a special effect to its sidebar.
- 2. When click on one of the sidebar, and will get its index values, let documentElement. The value is equal to the content of the scrollTop area elements. OffsetTop values can realize floor scrolling effect. (as follows)
// Floor roll
floorMoble();
function floorMoble() {
var h3s = document.querySelectorAll("h3");
var catalogueUlLis = document.querySelectorAll(".catalogue ul li");
window.addEventListener("scroll".function (e) {
for (let i = 0; i < h3s.length; i++) {
var top = document.documentElement.scrollTop;
if (h3s[i].offsetTop <= top + 200) {
for (let j = 0; j < catalogueUlLis.length; j++) {
catalogueUlLis[j].classList.remove("floorColor");
}
catalogueUlLis[i].classList.add("floorColor")}}; });// Side jump
catalogueUlLis.forEach(function (item, index) {
item.onclick = function () {
for (let i = 0; i < catalogueUlLis.length; i++) {
catalogueUlLis[i].classList.remove("floorColor")
}
catalogueUlLis[index].classList.add("floorColor");
document.documentElement.scrollTop = h3s[index].offsetTop - 200; }})}Copy the code- Relative to the floor rolling effect, the bottom of the request data is also a similar effect, my principle is: first to get the entire page elements of body height, in acquiring rolling rolling to the height of the screen, determine if the entire page elements of body height – the height of the screen scroll swept to < = visible height of the region, for the current page shows that the element has a bottom, can initiate a request. This completes the bottom request.
- element.scrollHeight – element.scrollTop <= element.clientHeight
var htmlScrolHeight = document.documentElement.scrollHeight;
var heightCount = htmlScrolHeight - top;
var showClient = document.documentElement.clientHeight;
// console.log(" total height of HTML elements :"+htmlScrolHeight," rolled height :"+top," subtraction height :"+heightCount," page visible height "+showClient)
if (heightCount <= showClient) {
page++; // Initiate the request again
// console.log(page)
getShop(page);// Invoke the request
}
Copy the code5: Summarize the technical highlights of your project and elaborate
Back to top functionality: There is an API, window.scrollto (); You can quickly go back to the top. Pass in two values (X-axis, Y-axis) or an object (code like this)
backTop.onclick = function () {
// timerTop = setInterval(function () {
// var osTop = document.documentElement.scrollTop || document.body.scrollTop;
// var speed = Math.floor(-osTop / 5);
// document.documentElement.scrollTop = document.body.scrollTop = osTop + speed;
// if (osTop == 0) {
// clearInterval(timerTop);
/ /};
// isTop = true;
// }, 30);
window.scrollTo({
top:0.behavior:"smooth"})},Copy the code{top:0,behavior:”smooth”,}; Smooth means smooth, return top smooth. This is one of the highlights, as it only takes two or three lines of code to smooth back to the top.