vue中多个倒计时实现代码实例

2024-10-16 02:31:48

下面给出一个效果图，我今天要说的就是实现下图这种多个倒计时

很多时候我们做只有一个倒计时的情况比较多，比较简单只需要一个定时器setInterval，算出来赋赋值就好，

但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了

拿我自己的vue项目举个例

 <!-- template -->
 <div v-for="(item,index) in list" :key="index" class="act_item">
 <h1>{{ item.title }}</h1>
 <img :src="item.pic" alt="">
 <div class="act_info">
  <h2><span>{{ item.count }}</span>个视频</h2>
  <div class="time">倒计时：{{ item.djs }}</div>
  <div class="clear"></div>
 </div>
 </div>

<script>
function InitTime(endtime){
 var dd,hh,mm,ss = null;
 var time = parseInt(endtime) - new Date().getTime();
 if(time<=0){
 return '结束'
 }else{
 dd = Math.floor(time / 60 / 60 / 24);
 hh = Math.floor((time / 60 / 60) % 24);
 mm = Math.floor((time / 60) % 60);
 ss = Math.floor(time % 60);
 var str = dd+"天"+hh+"小时"+mm+"分"+ss+"秒";
 return str;
 }
}
export default {
 data () {
	return {
  active: 'tab-container1',
  pinkFont:true,
  // 上拉刷新、下拉加载
  allLoaded: false, //如果为true,禁止上拉刷新
  autoFill: false, //取消自动填充，
  list: [],
 	}
 },
 created() {
 var ssss = [
  {"title": "小心愿，大梦想","pic":"../../assets/img/new/act1.jpg","count":"34","time":"1525293470350"},
  {"title": "杭州国际时装周童模招募","pic":"../../assets/img/new/act2.jpg","count":"36","time":"1525293470350"},
  {"title": "怪兽bobo全线代言火爆杭城的联名秀招募童模啦！","pic":"../../assets/img/new/act3.jpg","count":"74","time":"1529253270350"},
  {"title": "汉风唐韵 、别","pic":"../../assets/img/new/act2.jpg","count":"266","time":"1525753270350"},
  {"title": "听说你们想和明星超模同台“PK”？","pic":"../../assets/img/new/act1.jpg","count":"97","time":"1525253270450"},
 ];
 ssss.map( (obj,index)=>{
  this.$set(
  obj,"djs",InitTime(obj.time)
  );
 })
 this.list = ssss;
 },
 mounted() {
 setInterval( ()=> {
  for (var key in this.list) {
  var aaa = parseInt( this.list[key]["time"] );
  var bbb = new Date().getTime();
  var rightTime = aaa - bbb;
  if (rightTime > 0) {
   var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
   var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
   var mm = Math.floor((rightTime / 1000 / 60) % 60);
   var ss = Math.floor((rightTime / 1000) % 60);
  }
  this.list[key]["djs"] = dd + "天" + hh + "小时" + mm + "分" + ss + "秒";
  }
 }, 1000);

 },
 methods: {

 }
}
</script>

需要注意的是this.$set(obj,"djs",InitTime(obj.time)代码，在一个对象已经有了的情况下，假如此时object里没有djs这个元素，直接object.djs = "要赋的值"这样的做法是不正确的，可能会赋值成功，但是会出现很多奇怪的问题，推荐用

this.$set(object,'djs','要赋的值');

以上所述是小编给大家介绍的vue中多个倒计时实现详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue设计一个倒计时秒杀的组件详解

简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路: 1.时间不能是本地客户端的时间必须是服务器的时间这里用一个settimeout代替以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是
vue2.0实现倒计时的插件(时间戳刷新跳转都不影响)

我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码如下是组件代码: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <sc
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给定合理的帧数,不断的清除画布,再重绘图形,即呈现出动画效果. 让我们先看下效果说明:此gif清晰度很低,因为转成gif图的时候,质量受损,帧数减少,所以倒计时转到红色时候看起来变的很模糊.但是实际在浏览器上效果全程都是很清晰和连贯的使用 npm npm install vue-canvas-co
vue中倒计时组件的实例代码

子组件: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <script> export default { data(){ return { content: ''
基于vue2.0的活动倒计时组件countdown(附源码下载)

这是一款基于vue2.0的活动倒计时组件,可以使用服务端时间作为当前时间,在倒计时开始和结束时可以自定义回调函数. 查看演示下载源码安装 npm install vue2-countdown --save 使用组件首先在模板部分添加: <template> <div> <count-down v-on:start_callback="countDownS_cb(1)" v-on:end_callback="countDown
简单实现vue验证码60秒倒计时功能

本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''
基于vue的短信验证码倒计时demo

最近做了一个小的demo,分享给大家,在很多地方都能用到. 一般获取短信验证码的时候会用到这个demo: button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span
Vue验证码60秒倒计时功能简单实例代码

template <template> <div class='login'> <div class="loginHeader"> <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" /> <input type="tel" class="codeBtn&q
vue中多个倒计时实现代码实例

下面给出一个效果图,我今天要说的就是实现下图这种多个倒计时很多时候我们做只有一个倒计时的情况比较多,比较简单只需要一个定时器setInterval,算出来赋赋值就好, 但是需要多个倒计时的时候我们就要考虑把倒计时封装成通用的方法了拿我自己的vue项目举个例  <div v-for="(item,index) in list" :key="index" class="act_item">
vue中for循环更改数据的实例代码(数据变化但页面数据未变）

废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tabl
vue中的面包屑导航组件实例代码

vue的面包屑导航组件用来将其放到navbar中: Breadcrumb/index.vue <template> <el-breadcrumb class="app-breadcrumb" separator="/"> <transition-group> <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.pat
Vue中的组件及路由使用实例代码详解

1.组件是什么组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用全局组件 <body> <div id="app">  <myzujian></myzujian> </div> </body> <script>
详解vue中使用transition和animation的实例代码

以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的.最近做活动页面,要求页面比较酷炫,终于有机会认真了解了. transition:英文过渡的意思,作用是过渡效果:animation:英文活泼.生气.激励,动画片就是animation film,作用是动画效果. transition在w3school的实例: //将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px: div { width:10
Vue中使用webpack别名的方法实例详解

在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么
在Vue中使用antv的示例代码

一,在vue原型中使用 1.首先安装antv/g2 yarn add @antv/g2 --save 2.在main.js中挂在到vue原型实例中 const G2 = require('@antv/g2') Vue.prototype.$G2 = G2 3.在vue文件中可以直接在mounted生命周期中直接使用 <template> <div> <div id="c1"></div> </div> </templat
java中stack(栈)的使用代码实例

java中stack类继承于vector,其特性为后进先出(lastinfirstout). 入栈和出栈实例图: 实例图的java代码实例: package com.lanhuigu.java.ListTest; import java.util.Stack; public class StackTest { public static void main(String[] args) { Stack<String> staffs = new Stack<String>(); //
Java中io流解析及代码实例

IO流 Java中IO流分为两种,字节流和字符流,顾名思义字节流就是按照字节来读取和写入的,字符刘是按照字符来存取的:常用的文件读取用的就是字符流,在网络通信里面用的就是字节流下面这张图是Java中IO流的总体框架: 字节流 Java中字节流一般都是以stream结尾的,输入的字节流叫InputStream,输出字节流叫OutputStream;InputStream和OutputStream是表示自己输入/输出的所有类的超类,是抽象类(abstract) 常用的字节流有: 1.FileInp

vue中多个倒计时实现代码实例

相关推荐

随机推荐