利用JS实现点赞的增加和减少功能
HTML文档：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset="UTF-8">
<title>点赞功能</title>
<link rel="stylesheet" href="2.css">
</head>
<body>
<div class="like">
<img class="like_container" src=./like_init.png>
<p class="like_count"><span id="sum">100</span>赞</p>
</div>
<script type="text/javascript" src="./2.js"></script>
</body>
</html>
CSS文档：
@charset "utf-8";
*{
margin:0;
padding:0;
}
.like{
margin:20px auto;
width:400px;
overflow:hidden;
}
.like_container{
width:20px;
height:20px;
}
.like_count{
width:50px;
height:20px;
float:right;
}
JS文档：
var like_container = document.getElementsByClassName("like_container")[0];
var sum = document.getElementById("sum");
var count = parseInt(sum.innerHTML);
like_container.onclick = function(){
var str = like_container.getAttribute("src");
console.log(str);
var newstr = str.indexOf("like_init");
console.log(newstr);
if(newstr === 2){
like_container.setAttribute("src" , "./like_after.png");
count++;
} else{
like_container.setAttribute("src" , "./like_init.png");;
count--;
}
sum.innerHTML=count;
}
实现点赞和再次点击取消。