36 lines
1.0 KiB
HTML
36 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
<style>
|
|
div {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: hotpink;
|
|
/* opacity: 0; */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='dv'></div>
|
|
<script type="text/javascript">
|
|
window.onload = function() {
|
|
document.getElementById('dv').onclick = function() {
|
|
//一点一点慢慢的变成透明背景 opacity = 0
|
|
var num = 10;
|
|
var timer = setInterval(function() {
|
|
//js 不要处理小数的加减，精度问题
|
|
num --
|
|
dv.style.opacity = num/10;
|
|
if(num <= 0) {
|
|
clearInterval(timer);
|
|
}
|
|
}, 100)
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |