进度条
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#progress{
width: 250px;
height: 40px;
border: thin solid green;
left: 50%;
top:100px;
transform:translateX(-50%);
position: relative;
}
#bar{
width: 20px;
height: 40px;
background-color: green;
position: absolute;
top:0;
left: 0;
}
#percent{
position: absolute;
left: 250px;
line-height: 40px;
}
</style>
</head>
<body>
<div id="progress">
<div id="bar"></div>
<span id='percent'>0%</span>
</div>
<script>
function $(id){
return document.getElementById(id);
}
var timer =setInterval(function(){
$('bar').style.width = $('bar').clientWidth+2+'px';
$('percent').innerHTML =parseInt(100*$('bar').clientWidth/$('progress').clientWidth)+'%';
if($('bar').clientWidth>=250){
clearInterval(timer);
}
},10)
</script>
</body>
</html>
返回头部小火箭
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
position: fixed;
bottom: 0;
right: 20px;
display: none;
}
</style>
</head>
<body>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<p>4444444444</p>
<img src="Top.jpg" alt="" class='getTop'>
<script>
var gt = document.querySelector('.getTop');
onscroll = function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
console.log(scrollTop);
if(scrollTop > 0){
gt.style.display = 'block';
}else{
gt.style.display = 'none'
}
}
gt.onclick = function(){
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
</script>
</body>
</html>
