用js实现一个点赞效果
时间: 2023-06-18 08:07:07 浏览: 63
可以用以下代码实现一个简单的点赞效果:
HTML:
```html
<button id="likeBtn" class="like-btn">
<i class="fa fa-thumbs-up"></i>
<span>0</span>
</button>
```
CSS:
```css
.like-btn {
border: none;
background: none;
color: #999;
cursor: pointer;
padding: 0;
font-size: 16px;
}
.like-btn:hover {
color: #333;
}
.like-btn .fa {
margin-right: 5px;
}
```
JavaScript:
```js
const likeBtn = document.getElementById('likeBtn');
const likeCount = likeBtn.querySelector('span');
let count = 0;
likeBtn.addEventListener('click', () => {
count++;
likeCount.textContent = count;
});
```
这段代码会在页面中创建一个带有计数器的点赞按钮。每次点击按钮,计数器会加1,并且计数器的值会更新到页面上。你可以根据需要修改按钮的样式和计数器的初始值。
相关问题
简单点赞效果html,js实现点赞效果
好的,以下是一个简单的点赞效果的HTML和JS实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点赞效果</title>
<style>
.like-btn {
display: inline-block;
padding: 5px 10px;
background-color: #eaeaea;
border-radius: 5px;
cursor: pointer;
}
.liked {
background-color: pink;
}
</style>
</head>
<body>
<div class="like-btn">点赞</div>
<script>
var likeBtn = document.querySelector('.like-btn');
var isLiked = false;
likeBtn.addEventListener('click', function() {
if (!isLiked) {
likeBtn.classList.add('liked');
likeBtn.innerHTML = '取消点赞';
} else {
likeBtn.classList.remove('liked');
likeBtn.innerHTML = '点赞';
}
isLiked = !isLiked;
});
</script>
</body>
</html>
```
这段代码实现了一个简单的点赞效果,当用户点击“点赞”按钮时,按钮的背景颜色会变成粉色,文字会变成“取消点赞”,再次点击时则会恢复原状。
写一个微信小程序的点赞动画代码
### 回答1:
可以使用Animate.css的CSS3动画实现,参考代码如下: <style>
.heart {
animation:heartbeat 1s ease;
transform-origin:50% 50%;
}@keyframes heartbeat {
0% {transform:scale(1);}
20% {transform:scale(1.2);}
40% {transform:scale(1);}
60% {transform:scale(1.2);}
80% {transform:scale(1);}
100% {transform:scale(1);}
}
</style><div class="heart"></div>
### 回答2:
下面是一个用300字回答的微信小程序点赞动画的代码:
首先,在小程序的wxml文件中定义一个按钮控件来触发点赞动画,如下所示:
```
<button bindtap="like" class="like-button">
<image src="{{liked ? '/images/like_filled.png' : '/images/like.png'}}" class="like-icon" />
<text class="like-text">{{liked ? '已赞' : '点赞'}}</text>
</button>
```
然后,在wxss文件中定义按钮和动画效果的样式,如下所示:
```css
.like-button {
display: flex;
align-items: center;
justify-content: center;
}
.like-icon {
width: 20px;
height: 20px;
margin-right: 5px;
}
.like-text {
font-size: 14px;
}
@keyframes like-animation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.like-animation {
animation: like-animation 0.5s;
}
```
接下来,在小程序的js文件中定义按钮的点击事件和点赞动画的触发逻辑,如下所示:
```javascript
Page({
data: {
liked: false
},
like: function() {
this.setData({
liked: !this.data.liked
});
if (this.data.liked) {
wx.showToast({
title: '点赞成功',
icon: 'success'
});
}
this.triggerAnimation();
},
triggerAnimation: function() {
const animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease'
});
this.animation = animation;
this.animation.scale(1.2).step();
this.animation.scale(1).step();
this.setData({
animationData: animation.export()
});
}
})
```
最后,在小程序的json文件中添加对应的图片资源,如下所示:
```json
{
"navigationBarTitleText": "点赞动画",
"usingComponents": {}
}
```
这样,当用户点击“点赞”按钮时,按钮会执行点赞动画,并且同时显示点赞成功的toast提示。
### 回答3:
微信小程序的点赞动画代码可以使用动画组件和动画实例来实现。
首先,在页面的 wxml 文件中添加一个按钮和一个图片,用于触发点赞动画和显示点赞的图片:
```html
<view>
<button bindtap="startAnimation">点赞</button>
<image src="{{likeImageSrc}}" class="like-image {{likeAnimationClass}}"></image>
</view>
```
然后,在页面的 js 文件中定义点赞动画相关的数据和方法:
```javascript
Page({
data: {
likeImageSrc: "/images/like.png", // 点赞图片路径
likeAnimationClass: "" // 点赞动画的类名
},
startAnimation() {
// 创建动画实例
const animation = wx.createAnimation({
duration: 1000, // 动画时长为1秒
timingFunction: "ease" // 缓动函数为匀速
});
// 以旋转动画为例
animation.scale(1.5).rotateY(360).step(); // 缩放并旋转动画
this.setData({
likeAnimationClass: "like-animation" // 添加动画类名,触发动画效果
});
setTimeout(() => {
// 动画结束后,重置动画样式
this.setData({
likeAnimationClass: ""
});
}, 1000);
}
})
```
添加如下 CSS 样式,用于实现点赞动画效果:
```css
.like-animation {
animation: like-animation 1s ease-in-out infinite; // 使用 CSS 动画实现点赞效果
}
@keyframes like-animation {
from {
transform: scale(1) rotateY(0); // 起始动画样式
}
to {
transform: scale(1.5) rotateY(360deg); // 结束动画样式
}
}
```
最后,将点赞的图片资源放在项目的 images 目录下,命名为 like.png,代码中的路径需要根据实际路径进行修改。
经过以上代码的设置,当点击点赞按钮时,点击的同时点赞动画会开始播放,点赞图片会缩放并旋转,1秒钟后动画结束。