<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.line{
position: absolute;
left: 50%;
bottom: 0;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="line" style="height: 0;width: 5px;"></div>
<script type="text/javascript">
var line=document.querySelector(".line");
var inter=setInterval(function(){
//字符串
var height=line.style.height;
//小数
height=parseFloat(height.replace("%",""));
height+=1;
if(height>=100){
clearInterval(inter);
inter =setInterval(function(){
var width=line.style.width;
width=parseFloat(width.replace("px",""));
width+=5;
if(width>document.body.offsetWidth/2){
clearInterval(inter);
}
line.style.width=width+"px";
});
}
line.style.height=height+"%"
},20)
</script>
</body>
</html>
运动案例
最新推荐文章于 2020-09-27 22:21:56 发布