<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播放音乐</title>
<style type="text/css">
body {
overflow: hidden ;
}
.wrapper{
color: rgba(218, 61, 61, 0.815);
line-height: 40px ;
text-align: center ;
font-size: 20px;
background-color: antiquewhite;
}
audio{
position: fixed;
}
</style>
</head>
<body>
<audio src="周杰伦 - 稻香.mp3" controls></audio>
<div class="wrapper">
<p>
稻香 - 周杰伦<br>
词：周杰伦<br>
曲：周杰伦<br>
对这个世界如果你有太多的抱怨<br>
跌倒了就不敢继续往前走<br>
为什么人要这么的脆弱堕落<br>
请你打开电视看看<br>
多少人为生命在努力勇敢的走下去<br>
我们是不是该知足<br>
珍惜一切就算没有拥有<br>
还记得你说家是唯一的城堡<br>
随着稻香河流继续奔跑<br>
微微笑 小时候的梦我知道<br>
小时候的梦我知道<br>
不要哭让萤火虫带着你逃跑<br>
乡间的歌谣永远的依靠<br>
回家吧 回到最初的美好<br>
回到最初的美好<br>
不要这么容易就想放弃<br>
就像我说的<br>
追不到的梦想换个梦不就得了<br>
为自己的人生鲜艳上色<br>
先把爱涂上喜欢的颜色<br>
笑一个吧<br>
功成名就不是目的<br>
让自己快乐快乐这才叫做意义<br>
童年的纸飞机<br>
现在终于飞回我手里<br>
所谓的那快乐<br>
赤脚在田里追蜻蜓追到累了<br>
偷摘水果被蜜蜂给叮到怕了<br>
谁在偷笑呢<br>
我靠着稻草人<br>
吹着风 唱着歌 睡着了<br>
午后吉它在虫鸣中更清脆<br>
阳光洒在路上就不怕心碎<br>
珍惜一切 就算没有拥有<br>
还记得你说家是唯一的城堡<br>
随着稻香河流继续奔跑<br>
微微笑 小时候的梦我知道<br>
小时候的梦我知道<br>
不要哭让萤火虫带着你逃跑<br>
乡间的歌谣永远的依靠<br>
回家吧 回到最初的美好<br>
回到最初的美好<br>
还记得你说家是唯一的城堡<br>
随着稻香河流继续奔跑<br>
微微笑 小时候的梦我知道<br>
不要哭让萤火虫带着你逃跑<br>
乡间的歌谣永远的依靠<br>
回家吧 回到最初的美好<br>
</p>
</div>
<script type="text/javascript">
let wrapper = document.querySelector( '.wrapper' );
const height = wrapper.offsetHeight ;
let offsetY = 0 ;
let handler = ()=>{
offsetY++ ;
scrollTo( 0 , offsetY );
console.log( offsetY );
if( offsetY >= height ){
clearInterval( timer );
}
} ;
const timer = setInterval( handler , 100 );
</script>
</body>
</html>
