js实现⾛马灯效果-----⼤屏幕滚动抽奖<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
html滚动效果代码<script type="text/javascript">
var intervalOne = null;
let arr = [
"@------四等奖---",
"@------⼆等奖---",
"@------三等奖---",
"@------再来⼀次---",
"@------⼀等奖---",
"@------三等奖---",
"@------四等奖---",
"@------四等奖---",
"@------再来⼀次---",
"@------四等奖---"
];
show(arr);
intervalOne = setInterval(function() {
scroll();
}, 10);
}
function show(arr) {
for(item in arr) {
let inner_div = ateElement("div");
inner_div.id = "item" + item;
inner_div.style.height = "40px";
inner_div.style.backgroundColor = item % 2 == 0 ? "#B9E3FB" : "#FFFFCC";
inner_div.innerText = arr[item];
lick = function() {
let out_div = ElementById("out_div");
out_div.appendChild(inner_div);
}
}
function scroll() {
let scrollTop = ElementById("out_div").scrollTop;
if(39 <= scrollTop) {
let one_inner_div = ElementById("out_div").firstChild;
}
}
function mouseover1() {
clearInterval(intervalOne);
}
function onmouseleave1() {
intervalOne = setInterval(function() {
scroll();
}, 10);
}
function click1(flag) {
debugger
if(flag) {
clearInterval(intervalOne);
let one_inner_div = ElementById("out_div").firstChild;
} else {
intervalOne = setInterval(function() {
scroll();
}, 10);
}
}
</script>
</head>
<body>
<div id="out_div" οnmοuseοver="mouseover1()"οnmοuseleave="onmouseleave1()">
</div>
<input id="stop" type="button" value="***停***" οnclick="click1(true)">
</input>
<input id="stop" type="button" value="***继续***" οnclick="click1(false)">
</input>
<div id="show_data">
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。