Implement the js method after the html page is loaded

Method one, JS method οnlοad="load();

1. The simplest way to call, write directly into the body tag of html:

<html> 
    <body onload="load();">
    </body> 
</html>

Method 2: window.οnlοad=function

Introduce js, use window.onload=functionmethod in script

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">window.onload=initUploaderInput()</script>

<script src="../static/js/photoMgt.js"></script>
<script type="text/javascript">
    initUploaderInput()
</script>

Method 3: $(function () {}

Introduce jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
    
    
        var arr = [
    'Camera Sensor' + '/ ' + 'Camera Sensor test in car' + '/ ' + '2020/12/30' + '/ ' + 'An Zhonghui' + '/ ' + 'IoT',
    'Health products' + '/ ' + 'To valite the product concept of touchless COP on top of vTouch technology' + '/ ' + 'Sep 2020 to Feb 2021' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
    'Facial dispatching' + '/ ' + 'To demo the product of facial dispatching' + '/ ' + 'May 2017 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
    'Robot integration' + '/ ' + 'To provide the elevator integration environment for 3rd party robot companies' + '/ ' + 'Nov 2019 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
    'Interactive elevator call' + '/ ' + 'To demo the product concept of interactive elevator call from smart speaker (home)' + '/ ' + 'Jun 2020 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
];
        var box = document.getElementById('box');
        for (var i = 0; i < arr.length; i++) {
    
    
//        box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
            if (i == 0) {
    
    
                box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
            } else {
    
    
                box.childNodes[0].innerHTML += '<li>' + arr[i] + '</li>';
            }
        }
    })
</script>
</body>
</html>

方法四：window.addEventListener(“load”, onloadContent, false);

First htmlintroduce the relevant js file in the file:

<script type="text/javascript" src="scroll.js"></script>

Use function in js:window.addEventListener("load", onloadContent, false)

function srollContent() {
    
    
    setTimeout(move, 1000);//执行一次定时器
}

//滚动方法
function move() {
    
    
    var scrollTop = document.getElementById("scrollTop");
    var scrollContent = document.getElementById("scrollContent");
    var contentUl = scrollContent.children[0];
    // var scrollTopUp = scrollTop.children[0];//向上滚动
    // var scrollTopDown = scrollTop.children[1];//向下滚动


    var direction = 1;//方向
    var timer = null;//定义定时器
    contentUl.innerHTML += contentUl.innerHTML;
    timer = setInterval(function () {
    
    
        console.log(contentUl.offsetTop)
        contentUl.style.top = contentUl.offsetTop + direction + 'px';
        // console.log("获取当前元素到顶部的距离：" + contentUl.offsetTop);
        // console.log("获取当前元素的高度：" + contentUl.offsetHeight);


        //向上滚动小于当前元素高度的一半时，则执行如下操作
        if (contentUl.offsetTop <= -contentUl.offsetHeight / 2) {
    
    
            contentUl.style.top = 0;
        }
        //向下滚动大于0时，则执行如下操作
        else if (contentUl.offsetTop >= 0) {
    
    
            contentUl.style.top = -contentUl.offsetHeight / 2 + "px";
        }
    }, 30);
}

function onloadContent() {
    
    
    var arr = [
    'Camera Sensor' + '/ ' + 'Camera Sensor test in car' + '/ ' + '2020/12/30' + '/ ' + 'An Zhonghui' + '/ ' + 'IoT',
    'Health products' + '/ ' + 'To valite the product concept of touchless COP on top of vTouch technology' + '/ ' + 'Sep 2020 to Feb 2021' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
    'Facial dispatching' + '/ ' + 'To demo the product of facial dispatching' + '/ ' + 'May 2017 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
    'Robot integration' + '/ ' + 'To provide the elevator integration environment for 3rd party robot companies' + '/ ' + 'Nov 2019 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
    'Interactive elevator call' + '/ ' + 'To demo the product concept of interactive elevator call from smart speaker (home)' + '/ ' + 'Jun 2020 to TBC' + '/ ' + 'Chen Jonhson' + '/ ' + 'LDC_SH_Innovation',
];
    var box = document.getElementById('scrollContent');
    for (var i = 0; i < arr.length; i++) {
    
    
//        box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
        if (i == 0) {
    
    
            box.innerHTML += '<ul><li>' + arr[i] + '</li></ul>';
        } else {
    
    
            box.children[0].innerHTML += '<li>' + arr[i] + '</li>';
        }
    }
    // srollContent();
}


window.addEventListener("load", onloadContent, false);

Implement the js method after the html page is loaded

Method one, JS method οnlοad="load();

Method 2: window.οnlοad=function

Method 3: $(function () {}

方法四：window.addEventListener(“load”, onloadContent, false);

Guess you like