一个点赞的功能是怎样实现的呢？
通过js可以实现点赞的功能 作为前端的小白
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content{
margin-top:30px;
margin-left: 100px;
width:200px;
height:40px;
}
.item{
position:relative;
width:140px;
border:2px solid #003EFF;
padding-left:20px
}
span{
font-size: 30px;
}
img{
margin-left:80px;
width:40px;
height:40px;
position:absolute;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<p><img src="点赞.jpeg"</p>
<span>点赞</span>
</div>
</div>
<script src="../课程代码/第17周-源码/day17/jquery-1.12.4.js"></script>
<script>
$('.item').click(function(){
Addspan(this);
})
function Addspan(ths){
var fontsize = 20
var top = 0
var right = 0
var opacity = 1
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','red');
$(tag).css('position','absolute');
$(tag).css('opacity',opacity);
$(tag).css('fontSize',fontsize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + "px");
$(ths).append(tag);
var obj = setInterval(function(){
fontseze = fontsize + 5;
top = top - 5
right = right - 5
opacity =opacity - 0.1
$(tag).css('opacity',opacity);
$(tag).css('fontSize',fontsize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + "px");
if(opacity <= 0){
clearInterval(obj);
$(tag).remove()
}
},100);
}
</script>
</body>
</html>之后变成这个样子：
可以动态的进行+1 主要依赖的是js中的定时器，将标签里面的属性重新的赋值一下。感兴趣的话可以试下。
