<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv{
width:300px;
height:200px;
background-color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<input type="button" value="点击" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
//渐变使用opacity属性
my$("btn").οnclick=function () {//按钮 的点击事件
var opacity=10;//这个值(透明度的值)只到1就结束，思路：先放大10倍，后面在缩小10倍
var timeId=setInterval(function () {//设置定时器（渐变的时间）
opacity--;
if(opacity<=0){//等到这个值小于等于0的时候，就取消定时器
clearInterval(timeId);
}
my$("dv").style.opacity=opacity/10;//缩小10倍在给opacity
},200);
}
</script>
</body>
</html>
