JS ending wrong question set

1, Choose

1. Which object is unique to DOM

A. History
B. Screen
C. Document
D. Location

2. Which attribute change on location will not refresh the page

A. href
B. search
C. host
D. hash

3. Which of the following methods does not traverse the array

A. Reduce
B. Map
C. Sort
D. Pop

4. Which of the following information does the useragent attribute contain

A. Browser rendering engine
B. Device resolution
C. Operating system
D. Browser version

5. Get the Dom object oDiv corresponding to the div tag in js, execute oDiv.class = 'duyi', and the div tag appears or appears (C)

A.class = 'duyi'
B. className ='duyi'
C. Empty
D. class=''

2, Fill in the blanks

  1. The Chinese name of DOM is document object model, which is the intermediary of js operation document. The Chinese name of BOM is (browser object model), which is the intermediary of js operation (browser).
  2. History can be accessed through_ go(-2)_ Method to perform 2 steps of page fallback.
  3. Label label passed__ for___ Property is associated with other tags.
  4. Which of array ForEach and ordinary for loop is more efficient__ for__.
  5. In the course of simulating gravity field_ top = document.documentElement.clientHeight – odiv.offsetheight (current page height - block height)_ The formula judges that the object just moves to the bottom of the browser.

3, Programming problem

1. Define array: var arr = [{name: 'cst', age: '18'}, {Name: 'jc', age: '20'}, {Name: 'dxm', age: '50'}, {Name: 'dcg', age: '30'}]. Use filter and map to operate on the array: leave c in name and multiply their ages by 2
var arr = [
    {name: 'cst', age: '18'},
    {name: 'jc', age: '20'},
    {name: 'dxm', age: '50'},
    {name: 'dcg', age: '30'}
]
var arr2 = arr.filter(function (ele) {
    return ele.name.indexOf('c') != -1;
}).map(function (ele) {
    ele.age *= 2;
    return ele
})
console.log(arr2)
2.2. Input the web address on the browser input box in a better and common way, such as: https://www.baidu.com/s?ie=utf -8&f=8. Divide and create objects according to the following parts:

○ protocol: https
○ host: www.baidu.com
○ path: / s
○ parameters: ie = UTF-8 & F = 8
The form of this object's properties and property values is as follows:

{
  protocol:  'https',  
  host: 'www.baidu.com', 
  path: '/s',  
  search: {ie:'utf-8',f:'8'}
}

Mode I

var url = new URL("https://www.baidu.com/s?ie=utf-8&f=8");
      function getUrlObj() {
        var result = {
          protocol: url.protocol,
          host: url.hostname,
          path: url.pathname,
          search: {},
        };

        var str = url.search.substr(1);
        var params = str.split("&");

        params.reduce(function (pre, cur) {
          // The pre function accumulates the results after execution
          // Data currently being processed by cur
          var items = cur.split("=");
          pre[items[0]] = items[1];
          return pre;
        }, result.search);
        console.log(result);
      }
      getUrlObj();

Mode 2

var url = new URL('https://www.baidu.com/s?ie=utf-8&f=8')

function urlToObj() {
    var result = {
        protocol: url.protocol,
        host: url.hostname,
        path: url.pathname,
        search:{}
    }
    for (param of url.searchParams) {
        result.search[param[0]] = param[1]
    }
    console.log(result)
}
urlToObj()
3. Implement a get dom (str) function. You can select different DOMS according to different choices of parameters (str forms such as' #id ',' Class' and 'tag').

Note:
○ '#id' this parameter selects dom according to ID name,. Class this parameter selects dom according to class name, 'tag' this parameter obtains dom according to tag name.
○ the native getElementsByClassName method cannot be used

function trimClassName (dom) {
    var reg = /\s+/g;
    // Turn all the spaces into one first
    var newClassStr = dom.className.replace(reg, ' ');
    return newClassStr;
};      

function getByClass(_className) {
    var allDomArray = [].slice.call(document.getElementsByTagName('*'), 0);
    var newDomArr = [];
    allDomArray.forEach(function (ele, index) {
        var newClassStr = trimClassName(ele).trim();
        var classNameArray = newClassStr.split(' ');
        classNameArray.forEach(function (className, index) {
            if (className == _className) {
                newDomArr.push(ele);
            }
        })
    });
    return newDomArr;            
};

function getDom(selector) {
    this.length = 0;
    if (selector.indexOf('.') != -1) {
        var dom = getByClass( selector.slice(1) );
    }else if (selector.indexOf('#') != -1) {
        var dom = document.getElementById( selector.slice(1) );
    }else {
        var dom = document.getElementsByTagName(selector);
    }
    return dom;
} ;
4. Please try to write the effect of buffering motion.
function startMove (dom, target) {
    clearInterval(timer);
    var iSpeed = null;
    timer = setInterval(function () {
        iSpeed = (target - dom.offsetLeft) / 7; 
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if (dom.offsetLeft == target) {
            clearInterval(timer);
        }else {
            dom.style.left = dom.offsetLeft + iSpeed + 'px';
        }
    }, 30);
};
5. Please write out the production idea of the rotation chart with pseudo code (step-by-step description logic in Chinese).

Soft answer
a. The layout requires an overflow:hidden tag (div), which has ul inside and is wide enough to accommodate multiple li: float s into a horizontal row.
b. The previous motion function is introduced to complete the operation.
c. Use a timer to control the time interval, use the motion function to change the current position of ul, and move the width of li or the outermost div one at a time.
d. Add left and right click events to control ul left and right movement by calculating movement direction and distance
e. The closure principle is used to bind events to each index button, and the event handler function can determine the location of ul according to the current index value.

Tags: Javascript Front-end

Posted on Fri, 26 Nov 2021 03:31:24 -0500 by ziah75