[Part V | JS WebAPI] 6: PC-side web page effects and local storage

After studying this chapter, you can use JS to make some animations and special effects for web page changes
Case: PC, PE end carousel map (please refer to the resource code and courseware)
Webpage special effects are divided into PC and PE-side webpage special effects
At present, this part of the knowledge points is not very practical, so I will only give a brief introduction, and I will come back to learn in the future if necessary

Here, only a brief introduction to the content of this chapter

| Three series of web page effects on PC

1-1 elementObj.offsetXXX properties

Function 1: Get the offset (position) of the element relative to the [positioned parent element] offsetTop oddsetLeft

Function 2: Get the width and height of the element itself offsetWidth offsetHeight

Function 3: Get the positioned parent element object offsetParent

grammar

code example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }
        
        .w {
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回带有定位的父亲 否则返回的是body
        console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
    </script>
</body>

</html>

1-2 The difference between elementObj . style and offset

1-3 Case: Get the position of the mouse in a certain box

train of thought

the code

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
	var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;
	this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

2-1 elementObj.clientXXX properties

Function 1: Obtain relevant information about [Element Visible Area]. clientTop clientLeft clientWidth clientHeight (the last two are most used)

Difference: The biggest difference between clientWidth, clientHieght and offsetWidth, offsetHeight: the obtained offset [excluding borders! ! ] (but includes padding)

3-1 elementObj . scrollXXX properties

Function: If the content exceeds the box, add overflow: auto and there will be a scroll bar. The main function of scroll is to get the distance of the scrolled content. So scrollTop scrollLeft is used the most

The difference between scrollHeight, scrollWidth, and scrollTop: (red is the actual box size, overflow: auto scroll bar is added)

Explain: both scrollWidth and clientWidth can get their own width and height, but they are different

scrollHeight returns the actual width of itself: if the content exceeds the box, the actual height of the content will be calculated; clientHeight only returns the height of the box itself. Width is the same

Summary of the three series

The functions of the three series of offset, client, and scroll: all can obtain some of their own attributes, and also have their own unique methods
First, summarize the differences between the three when acquiring their own attributes

Then, summarize the three methods with their own characteristics

| Animation function encapsulation

The difference between mouseover and mouseenter

Example:

When the mouse passes the pink box (parent box), the event is triggered; when the mouse passes the purple box (child box), the event is not triggered.

It can be verified that if the mouseenter is replaced with mouseover, the mouse will trigger an event when it passes the pink box (parent box); it will also trigger an event when it passes the purple box (child box).

animation principle

principle

Through the timer, draw each key frame, and each frame changes a little bit
What needs to be determined are: the object element of the animation movement, and the end point (target position) of the element to move
Note: Be sure to add positioning to the child element (child and father), otherwise div.style.left = div.offsetLeft + x + 'px' will report an error
Note: what div.offsetLeft gets is just a value without a unit, we need to add it ourselves

code example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 一定要有定位，才能使用left属性 */
            position: absolute;
            
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script>
        window.addEventListener('load',function(){

            var box = document.querySelector('.box');
            var time = window.setInterval(function(){
                box.style.left = box.offsetLeft + 1 + 'px';
            },10)

        })
    </script>
</head>
<body>
    <div class="box"></div>
</body>
</html>

The above code can be encapsulated into an animation function animate(obj, target)

 <script>
        // 简单动画函数封装obj目标对象 target 目标位置
        function animate(obj, target) {
            var timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 调用函数
        animate(div, 300);
        animate(span, 200);
    </script>

The above functions can be optimized, using the feature of [JS objects can dynamically add attributes] to save the memory usage caused by declaring counters

 <script>
        // 简单动画函数封装obj目标对象 target 目标位置
        function animate(obj, target) {
     		//把 var times 改为 obj.times 动态添加属性
            obj.times = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 调用函数
        animate(div, 300);
        animate(span, 200);
    </script>

Slow motion and variable speed effects of animation

speed change effect

The key lies in how we set the expression of obj.style.left = XXX each time
For example, an expression that moves slower and slower: obj.style.left = obj.offsetLeft + (target - obj.offsetLeft) / 10
For more formulas, please go to Baidu

The element moves back and forth at a certain position

Add if judgment, if it is greater than a certain position, obj.style.left will decrease, otherwise it will increase

Callback

Application Scenario

Sometimes I want to execute some functions after the animation (that is, the timer) ends

Method: key code: define the function f, and then pass it to animate as a parameter to encapsulate the animation function, and call the function in the end method when the animation ends

			//动画（封装函数）
			//关键代码：定义函数f，然后作为参数传入animate封装动画函数，当动画结束的时候 再在结束的方法内调用函数
            function animate(obj , target , f){
                obj.times = window.setInterval(function(){
                    if(obj.offsetLeft > target){
                        window.clearInterval(obj.times);
                        //动画结束之后，再调用函数
                        f();
                    }else{
                        obj.style.left = box.offsetLeft + 1 + 'px';
                    }
                },10)
            }

code example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box {
            /* 一定要有定位，才能使用left属性 */
            position: absolute;
            
            
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        button {
            display: block;
            margin: 20px 0;
        }
    </style>
    <script>
        window.addEventListener('load',function(){

            //动画（封装函数）
            function animate(obj , target , f){
                obj.times = window.setInterval(function(){
                    if(obj.offsetLeft > target){
                        window.clearInterval(obj.times);
                        //动画结束之后，再调用函数
                        f();
                    }else{
                        obj.style.left = box.offsetLeft + 1 + 'px';
                    }
                },10)
            }

            //按钮
            var btn = document.querySelector('button');
            var box = document.querySelector('.box');
            btn.addEventListener('click',function(){
                animate(box , 300 , function(){
                    //回调函数
                    alert('动完啦');
                })
            })

        })
    </script>
</head>
<body>
    <button>动起来</button>
    <div class="box"></div>
    
    
    
    
</body>
</html>

Load the animation file into js

| local storage

overview

window.sessionStorage

The data will be stored in the current window, as long as it is not closed, the data will exist (such as refreshing, etc., the data will not disappear)

Features and Syntax

code example

window.localStorage

The data will be permanently stored in the user's local browser. Unless manually deleted, the data will be retained no matter the page is refreshed or closed.

Note: This data is stored in the browser and is only shared within the same browser. If the user changes the browser, the data cannot be obtained

code example

Case: remember username

Ideas:

① Save the data and use local storage

② When closing the page, the user name can also be displayed, so localStorage is used

③ Open the page, first judge whether there is this user name, if so, display the user name in the form, and check the check box

④ change event when the check box changes

⑤ If checked, save it, otherwise remove it

code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
		//页面进入的时候自动执行。如果已经存储了用户数据，则执行这个代码
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }
		//如果用户点击了复选框，则进行判断：用户是取消”记住“，还是勾选”记住“
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>
</body>