Summary of JavaScript basic video tutorial (chapters 131-140)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>131-140 Chapter summary</title>
</head>
<body>
    
<pre>
131. Timer application 1
</pre>
<style type="text/css">
#box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 0;
}
</style>
<button id="btn01">After clicking the button box1 Move to the right</button>
<div class="" style="position: relative;height: 200px;">
    <div id="box1"></div>
</div>

<script type="text/javascript">
    console.log("131st");
    var box1 = document.getElementById("box1");
    var btn01 = document.getElementById("btn01");
    var timer1;
    btn01.onclick = function(){
        clearInterval(timer1);
        timer1 = setInterval(function(){
            var oldValue = parseInt(getStyle(box1,"left"));
            var newValue = oldValue + 10;
            if(newValue > 800){
                newValue = 800;
            }
            box1.style.left = newValue + "px";
            if(newValue == 800){
                clearInterval(timer1);
            }
        },30);
    };
    
    /*
     * Defines a function to get the current style of the specified element
     * Parameters:
     *      obj Elements to get styles
     *      name Style name to get
     */
    
    function getStyle(obj , name) {
        if(window.getComputedStyle){
            //Normal browser mode with getComputedStyle()Method
            return getComputedStyle(obj , null)[name];
        } else {
            //IE8 No way getComputedStyle()Method
            return obj.currentStyle[name];
        }
    }
</script>

<pre>
132. Timer application 2
</pre>
<div class="" style="position: relative;height: 200px;">
    <button id="btn21">After clicking the button box1 Move to the right</button>
    <button id="btn22">After clicking the button box1 Move to the left</button>
    <br /><br />
    <div id="box21" style="width: 100px;height: 100px;background-color: #ddd;position: absolute;"></div>
</div>
<script type="text/javascript">
    console.log("132nd");
    var box21 = document.getElementById("box21");
    var btn21 = document.getElementById("btn21");
    var btn22 = document.getElementById("btn22");
    //After clicking the button, the box1 Move right( left Increase in value)
    btn21.onclick = function(){
        move(box21 , 800 , 10);
    };
    //After clicking the button, the box1 Move left( left Decrease in value)
    btn22.onclick = function(){
        move(box21 , 0 , 10);
    };
    //Define a variable to hold the timer ID
    var timer2;
    //Try to create a function that can perform simple animation
    /*
     * Parameters:
     *  obj:Objects to animate
     *  target:Target location to execute the animation
     *  speed:Speed of movement (positive number moves to the right, negative number moves to the left)
     */
    function move(obj , target ,speed){
        // Turn off last timer
        clearInterval(timer2);
        // Get the current location of the element
        var current = parseInt(getStyle(obj,"left"));
        //Judge the positive and negative value of speed
        //If you move from 0 to 800, then speed Being positive
        //If moving from 800 to 0, then speed Negative
        if(current > target){
            //Speed should be negative at this time
            speed = -speed;
        }
        //Turn on a timer to perform animation
        timer2 = setInterval(function(){
            //Obtain obj Original left value
            var oldValue = parseInt(getStyle(obj,"left"));
            //Add to old value
            var newValue = oldValue + speed;
            //judge newValue Is it greater than 800
            //Move from 800 to 0
            //When moving to the left, you need to judge newValue Is it smaller than target
            //When moving to the right, you need to judge newValue Is it greater than target
            if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                newValue = target;
            }
            obj.style.left = newValue + "px";
            //When the element moves to 0 px To stop the animation
            if(newValue == target){
                //Reach target, turn off timer
                clearInterval(timer2);
            }
        },30);
    }
</script>

<pre>
133. Timer application 3
</pre>
<div class="" style="position: relative;height: 300px;">
    <div><button id="btn31">Click multiple changes</button></div><br />
    <div id="box31" style="position: absolute;width: 100px;height: 100px;background-color: #5197ff;"></div>
</div>
<script type="text/javascript">
    console.log("133rd");
    //Try to create a function that can perform simple animation
    /*
     * Parameters:
     *  obj:Objects to animate
     *  attr:The style to perform the animation, such as: left top width height
     *  target:Target location to execute the animation
     *  speed:Speed of movement (positive number moves to the right, negative number moves to the left)
     *  callback:Callback function, which will be executed after the animation is executed
     */
    function moveAni(obj, attr, target, speed, callback) {
        //Turn off last timer
        clearInterval(obj.timer);
        //Get the current location of the element
        var current = parseInt(getStyle(obj, attr));
        //Judge the positive and negative value of speed
        //If you move from 0 to 800, then speed Being positive
        //If moving from 800 to 0, then speed Negative
        if(current > target) {
            //Speed should be negative at this time
            speed = -speed;
        }
        //Turn on a timer to perform animation
        //Add a to the object that performs the animation timer Property to hold the identity of its own timer
        obj.timer = setInterval(function() {
            //Obtain box1 Original left value
            var oldValue = parseInt(getStyle(obj, attr));
            //Add to old value
            var newValue = oldValue + speed;
            //judge newValue Is it greater than 800
            //Move from 800 to 0
            //When moving to the left, you need to judge newValue Is it smaller than target
            //When moving to the right, you need to judge newValue Is it greater than target
            if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                newValue = target;
            }
            //Set new value to box1
            obj.style[attr] = newValue + "px";
            //When the element moves to 0 px To stop the animation
            if(newValue == target) {
                //Reach target, turn off timer
                clearInterval(obj.timer);
                //When the animation is finished, call the callback function
                callback && callback();
            }
        }, 30);
    }
    
    var btn31 = document.getElementById("btn31")
    btn31.onclick = function(){
        moveAni(box31,"width",200,10,function(){
            moveAni(box31,"height",200,10,function(){
                moveAni(box31,"left",50,10,function(){
            
                })
            })
        })
    }
</script>

<pre>
134. Complete the rotation chart interface
</pre>
<pre>
135. Click button to switch pictures
</pre>
<pre>
136. Complete the rotation chart
</pre>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
#outer{
    width: 520px;
    height: 333px;
    margin: 20px;
    background-color: greenyellow;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
}
#imgList{
    list-style: none;
    position: absolute;
    left: 0px;
}
#imgList li{
    float: left;
    margin: 0 10px;
}
#navDiv{
    position: absolute;
    bottom: 15px;
}
#navDiv a{
    float: left;
    width: 15px;
    height: 15px;
    background-color: red;
    margin: 0 5px;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
#navDiv a:hover{
    background-color: black;
}
</style>
<!-- Create an external div,As a big container -->
<div id="outer">
    <!-- Create a ul,Use to place pictures -->
    <ul id="imgList">
        <li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
    <!--Create navigation button-->
    <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
<script type="text/javascript">
    console.log("134th,135,136");
    var imgList = document.getElementById("imgList");
    var imgArr = document.getElementsByTagName("img");
    imgList.style.width = 520*imgArr.length+"px";
    var navDiv = document.getElementById("navDiv");
    var outer = document.getElementById("outer");
    navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
    var index = 0;
    var allA = document.getElementsByTagName("a");
    allA[index].style.backgroundColor = "black";
    for(var i=0; i<allA.length ; i++){
        allA[i].num = i;
        allA[i].onclick = function(){
            index = this.num;
            setA();
            moveAni(imgList , "left" , -520*index , 20 , function(){
                autoChange();
            });
        };
    }
    //Turn on automatic picture switching
    autoChange();
    //Create a method to set the selected a
    function setA(){
        //Determine whether the current index is the last image
        if(index >= imgArr.length - 1){
            //Will index Set to 0
            index = 0;
            //The last picture is displayed, and the last picture is the same as the first one
            //adopt CSS Switch from last to first
            imgList.style.left = 0;
        }
        for(var i=0 ; i<allA.length ; i++){
            allA[i].style.backgroundColor = "";
        }
        allA[index].style.backgroundColor = "black";
    };
    //Defining the identity of an automatic switching timer
    var timer4;
    //Create a function to enable automatic picture switching
    function autoChange(){
        //Turn on a timer to switch pictures
        timer4 = setInterval(function(){
            //Make index self increasing
            index++;
            //judge index Value
            index %= imgArr.length;
            //Performing animation, switching pictures
            moveAni(imgList , "left" , -520*index , 20 , function(){
                //Modify navigation button
                setA();
            });
            
        },1500);
    }
    
</script>

<pre>
137. class(class)Operation
</pre>
<style type="text/css">
.b1{
    width: 100px;
    height: 100px;
    background-color: red;
}
.b2{
    height: 300px;
    background-color: yellow;
}
</style>
<div class="">
    <button id="btn71">Click the button to modify later box Style</button>
    <br /><br />
    <div id="box71" class="b1"></div>
</div>
<script type="text/javascript">
    console.log("137th");
    var btn71 = document.getElementById("btn71")
    var box71 = document.getElementById("box71")
    btn71.onclick = function(){
        //addClass(box71,"b2")
        toggleClass(box71,"b2")
    }
    // Defines a function to add the specified class Attribute value
    // parameter: obj To add class Element of attribute,cn To add class value
    function addClass(obj , cn){
        //inspect obj Does it contain cn
        if(!hasClass(obj , cn)){
            obj.className += " "+cn;
        }
    }
    // Determine whether an element contains the specified class Attribute value
    function hasClass(obj , cn){
        //judge obj Is there any cn class
        //Create a regular expression
        //var reg = /\bb2\b/;
        var reg = new RegExp("\\b"+cn+"\\b");
        return reg.test(obj.className);
    }
    // Delete the specified class attribute
    function removeClass(obj , cn){
        //Create a regular expression
        var reg = new RegExp("\\b"+cn+"\\b");
        //delete class
        obj.className = obj.className.replace(reg , "");
    }
    // toggleClass Can be used to switch a class
    function toggleClass(obj , cn){
        //judge obj Does it contain cn
        if(hasClass(obj , cn)){
            //Yes, delete
            removeClass(obj , cn);
        }else{
            //No, add
            addClass(obj , cn);
        }
    }
    
</script>

<pre>
138. Secondary menu to complete basic functions
</pre>
<pre>
139. Secondary menu transition effect
</pre>
<style type="text/css">
div.sdmenu {
    width: 150px;
    margin: 20px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    padding-bottom: 10px;
    background: #eee;
    color: #fff;
}
div.sdmenu div {
    background: #bbb;
    overflow: hidden;
}
div.sdmenu div.collapsed {
    height: 25px;
}
div.sdmenu div span {
    display: block;
    position: relative;
    height: 15px;
    line-height: 15px;
    overflow: hidden;
    padding: 5px 25px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}
div.sdmenu div span:before {
    content: '';
    position: absolute;
    top: 7px;
    left: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px;
    border-color:#333 transparent  transparent transparent;
}
div.sdmenu div.collapsed span:before {
    border-color: transparent  transparent transparent #333;
}

div.sdmenu div a {
    padding: 5px 10px;
    background: #eee;
    display: block;
    border-bottom: 1px solid #ddd;
    color: #066;
}

div.sdmenu div a.current {
    background: #ccc;
}

div.sdmenu div a:hover {
    background: #066 ;
    color: #fff;
    text-decoration: none;
}
</style>
<div id="my_menu" class="sdmenu">
    <div>
        <span class="menuSpan">Online tools</span>
        <a href="javascript:;">Image optimization</a>
        <a href="javascript:;">Favorite Icon builder</a>
        <a href="javascript:;">mail</a>
        <a href="javascript:;">htaccess Password</a>
        <a href="javascript:;">Gradient image</a>
        <a href="javascript:;">Button Generator</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">Support us</span>
        <a href="javascript:;">Recommend us</a>
        <a href="javascript:;">Link us</a>
        <a href="javascript:;">network resource</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">Cooperative partner</span>
        <a href="javascript:;">JavaScript Tool kit</a>
        <a href="javascript:;">CSS drive</a>
        <a href="javascript:;">CodingForums</a>
        <a href="javascript:;">CSS Example</a>
    </div>
    <div class="collapsed">
        <span class="menuSpan">Test current</span>
        <a href="javascript:;">Current or not</a>
        <a href="javascript:;">Current or not</a>
        <a href="javascript:;">Current or not</a>
        <a href="javascript:;">Current or not</a>
    </div>
</div>

<script type="text/javascript">
    console.log("138th,139");
    /*
     * Each of our menus is a div
     *  When a div has a collapsed class, it is the folded state
     *  When div does not have this class, div is the expanded state
     */
    
    //Get all class by menuSpan Elements
    var menuSpan = document.querySelectorAll(".menuSpan");
    //Define a variable to save the currently open menu
    var openDiv = menuSpan[0].parentNode;
    //by span Bind click response function
    for(var i=0 ; i<menuSpan.length ; i++){
        menuSpan[i].onclick = function(){
            //this On behalf of the span
            //Get current span Parent element
            var parentDiv = this.parentNode;
            //Toggle the display status of the menu
            toggleMenu(parentDiv);
            //judge openDiv and parentDiv Are they the same?
            if(openDiv != parentDiv  && !hasClass(openDiv , "collapsed")){
                //Toggle the display status of the menu
                toggleMenu(openDiv);
            }
            //modify openDiv Menu currently open
            openDiv = parentDiv;
        };
    }
    
    // Used to switch menu folding and display status
    function toggleMenu(obj){
        //Get the height of the element before switching classes
        var begin = obj.offsetHeight;
        //switch parentDiv Display
        toggleClass(obj , "collapsed");
        //Get a height after switching classes
        var end = obj.offsetHeight;
        //console.log("begin = "+begin +" , end = "+end);
        //The animation effect is to change the height from begin towards end transition
        //Reset the height of the element to begin
        obj.style.height = begin + "px";
        //Performing animation from bengin towards end transition
        moveAni(obj,"height",end,10,function(){
            //After the animation is executed, the inline style has no meaning. Delete it
            obj.style.height = "";
        });
    }
    
</script>

<pre>
140. JSON
- JS Objects in only JS I know it. I don't know any other languages
- JSON It is a special format string, which can be recognized by any language,
//And it can be converted into objects in any language. JSON is mainly used for data interaction in development
- JSON
- JavaScript Object Notation JS Object representation
- JSON and JS The format of the object is the same, except JSON Property names in strings must be double quoted
//Others are consistent with JS syntax
JSON Classification:
1.object {}
2.array []
JSON Values allowed in:
1.Character string
2.numerical value
3.Boolean value
4.null
5.object
6.array
</pre>
<script type="text/javascript">
    console.log("140th");
    var arr = '[1,2,3,"hello",true]';
    var obj2 = '{"arr":[1,2,3]}';
    var arr2 ='[{"name":"Sun WuKong","age":18,"gender":"male"},{"name":"Sun WuKong","age":18,"gender":"male"}]';
    /*
     * Converting JSON strings to objects in JS
     *  In JS, we are provided with a tool class called JSON
     *  This object can help us to convert a JSON to a JS object, or a JS object to a JSON
     */
    var json = '{"name":"Sun WuKong","age":18,"gender":"male"}';
    /*
     * json --> js object
     *   JSON.parse()
     *      - You can convert JSON strings to js objects
     *      - It needs a JSON string as a parameter, which will be converted to a JS object and returned
     */
    var o = JSON.parse(json);
    var o2 = JSON.parse(arr);
    console.log(o.gender);
    console.log(o2[1]);
    var obj3 = {name:"Zhu Bajie" , age:28 , gender:"male"};
    /*
     * JS Object -- > JSON
     *  JSON.stringify()
     *      - You can convert a JS object to a JSON string
     *      - A js object is required as a parameter, and a JSON string will be returned
     */
    var str = JSON.stringify(obj3);
    console.log(str);
    /*
     * JSON This object is not supported in browsers of IE7 and below, so it will be wrong to call in these browsers.
     */
    var str3 = '{"name":"Sun WuKong","age":18,"gender":"male"}';
    JSON.parse(str3);
    /*
     * eval()
     *  - This function can be used to execute a string of JS code and return the execution result
     *  - If a string executed using eval() contains {}, it treats {} as a code block
     *      If you don't want to parse it as a code block, you need to add a () before and after the string
     *  - eval()This function is very powerful and can directly execute js code in a string,
     *      But try not to use it in development. First, its execution performance is poor, and then it has security risks
     */
    var str2 = "console.log('hello');";
    var obj = eval(str2);
</script>

</body>
</html>

All basic course links:

 1. Summary of JavaScript basic video tutorial (Chapter 001-010)           2. Summary of JavaScript basic video tutorial (Chapter 011-020)          3. Summary of JavaScript basic video tutorial (Chapter 021-030)        4. Summary of JavaScript basic video tutorial (Chapter 031-040)

5. Summary of JavaScript basic video tutorial (Chapter 041-050)           6. Summary of JavaScript basic video tutorial (Chapter 051-060)         7. Summary of JavaScript basic video tutorial (Chapter 061-070)        8. Summary of JavaScript basic video tutorial (Chapter 071-080)

9. Summary of JavaScript basic video tutorial (Chapter 081-090)          10. Summary of JavaScript basic video tutorial (Chapter 091-100)        11. Summary of JavaScript basic video tutorial (chapters 101-110)      12. Summary of JavaScript basic video tutorial (Chapter 111-120)

13. Summary of JavaScript basic video tutorial (chapters 121-130)        14. Summary of JavaScript basic video tutorial (chapters 131-140)

In addition, please pay attention to my Sina micro-blog

Tags: Javascript JSON Attribute network

Posted on Sun, 01 Dec 2019 23:50:58 -0800 by cody44