<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var intervalOne = null;
window.onload = function() {
let arr = [
"@------四等奖---",
"@------二等奖---",
"@------三等奖---",
"@------再来一次---",
"@------一等奖---",
"@------三等奖---",
"@------四等奖---",
"@------四等奖---",
"@------再来一次---",
"@------四等奖---"
];
show(arr);
intervalOne = setInterval(function() {
scroll();
}, 10);
}
function show(arr) {
for(item in arr) {
let inner_div = document.createElement("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];
inner_div.onclick = function() {
document.getElementById("show_data").innerText = "中奖情况：" + inner_div.innerText;
}
let out_div = document.getElementById("out_div");
out_div.appendChild(inner_div);
}
}
function scroll() {
let scrollTop = document.getElementById("out_div").scrollTop;
document.getElementById("out_div").scrollTop = scrollTop + 10;
if(39 <= scrollTop) {
let one_inner_div = document.getElementById("out_div").firstChild;
document.getElementById("out_div").removeChild(one_inner_div);
document.getElementById("out_div").appendChild(one_inner_div);
}
}
function mouseover1() {
clearInterval(intervalOne);
}
function onmouseleave1() {
intervalOne = setInterval(function() {
scroll();
}, 10);
}
function click1(flag) {
debugger
if(flag) {
clearInterval(intervalOne);
let one_inner_div = document.getElementById("out_div").firstChild;
document.getElementById("show_data").innerText = "中奖情况：" + one_inner_div.innerText;
} else {
intervalOne = setInterval(function() {
scroll();
}, 10);
}
}
</script>
</head>
<body>
<div id="out_div" onmouseover="mouseover1()" onmouseleave="onmouseleave1()">
</div>
<input id="stop" type="button" value="***停***" onclick="click1(true)">
</input>
<input id="stop" type="button" value="***继续***" onclick="click1(false)">
</input>
<div id="show_data">
</div>
</body>
</html>