<!doctype html>
<html>
<head>
<title>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</title>
<meta name="author" content="阿耀王子">
</head>
<body>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<p>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色</p>
<script>
setInterval(function () {
var scrollTop=document.body.scrollTop; //開始值爲0
console.log(scrollTop);
// 隨滾動條距離頂部的高度不同，顯示的背景顏色也是不同的
if(scrollTop < 100){
document.body.style.background = "white";
}else if(scrollTop < 200){
document.body.style.background = "red";
}else if(scrollTop < 300){
document.body.style.background = "orange";
}else if(scrollTop < 400){
document.body.style.background = "yellow";
}else if(scrollTop < 500){
document.body.style.background = "green";
}else if(scrollTop < 600){
document.body.style.background = "cyan";
}else if(scrollTop < 700){
document.body.style.background = "blue";
}else if(scrollTop < 800){
document.body.style.background = "purple";
}else{
document.body.style.background = "black";
}
},600);
</script>
</body>
</html>測試scrollTop--隨滾動條距離頂部的高度body顯示不同的顏色
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.