我们可以发现，在线直播源码的直播间中，在右下角会有给主播点赞的按钮，点赞越多，对主播来说好处越多，那么在线直播源码是怎么实现点赞功能的呢？

• 实现在线直播源码观众的点赞功能。

• 功能描述：最后一次点赞三秒后，在线直播源码把观众点赞的数目提交到后台服务器。

话不多说，上代码：

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <div id="app">         <button @click="dianzan">点赞</button>         <div>点赞数：{{likeNum}}</div>     </div> </body> <style>   *{       margin: 0;       padding: 0;       font-size: 30px;   }       button{       padding: 5px 10px;   } </style> <script> new Vue({     el: '#app',     data: function() {         return {              liveId:'001',//直播间ID             myLikeNum: 0,//记录当前观众每次点赞的数量             likeNum: 0,//页面上显示的点赞数量             TimeArr: [],//存放时间戳的数组         }     },     methods: {         dianzan(){//点赞               this.myLikeNum++;             this.likeNum++; //点赞之后，页面要立刻有反馈             this.TimeArr.push(new Date().valueOf());             let that = this;             setTimeout(function(){                 if(new Date().valueOf() - that.TimeArr[that.TimeArr.length-1] >= 3000){                     console.log("3秒后，调用点赞服务");                     console.log(that.myLikeNum);                    // that.dianzanService();                    //dianzanService方法中的路径、token都没填写，运行会出错，所以注释掉了。                 }else{                     console.log("3秒内！不调用");                 }             },3000);         },         dianzanService(){//点赞服务             //点赞数目提交到服务器，             //在成功的回调方法里把myLikeNum、TimeArr置空。             //路径我用xxx代替了，             putAction('/xxx/xxx/xxx?Id='+this.liveId+'&likeNum='+this.myLikeNum,'这里是token的值').then(res=>{                         if(res.success && res.code == 0){                     //调用方法更新token                     this.myLikeNum = 0;//提交成功之后点赞数重置为0;                     this.TimeArr = [];                 }else{//错误处理                     this.$message({                         message: res.message,                         type: 'warning',                         offset: 460                     });                 }             });                         },     } }) </script> </html>

在线直播源码页面最开始：

开始点赞：隔一秒，点一次，点五次：

控制台输出：

注意：

本例中在线直播源码调用点赞服务dianzanService成功后，并没有在页面中更新 likeNum的值。likeNum的值应该另写一个监听去获取服务器返回来的点赞数目。

声明：本文由云豹科技转发自五花漏博客，如有侵权请联系作者删除