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=function
method 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>
or
<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 html
introduce 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);