<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width:100%;
height:100%;
margin:0;
background-color: #333;
color:white;
text-align: center;
overflow: hidden;
}
#time{
width:200px;
height:40px;
border:1px solid white;
border-radius:50px;
margin:0 auto;
margin-top:12%;
line-height: 40px;
}
#box{
width:300px;
height:300px;
border:1px solid white;
margin:0 auto;
margin-top:10px;
border-radius:10px;
background-image:url("https://img.ui.cn/data/file/1/1/5/253511.gif");
background-size: 210%;
background-position: center;
}
</style>
<script>
var t1 = new Date().getTime();
</script>
</head>
<body>
<div id="time"></div>
<div id="box"></div>
<script>
window.onload = function () {
var t2 = new Date().getTime(),
nt = t2-t1,
box = document.getElementById("time"),
img = document.getElementById("box");
console.log(t1+","+t2+","+nt);
box.innerText = nt;
setTimeout(function () {
img.style.display = "none";
},nt*30);
};
</script>
</body>
</html>