vue倒计时时间实现圆形进度条_Vue实现列表倒计时效果_vue.js教程,AngularJS教程_我爱模板网 - 提供下载各种免费建站资源,免费网站模板,免费网页特效,让你爱上建站!...

news/2024/5/9 8:54:04/文章来源:https://blog.csdn.net/weixin_39883462/article/details/114009103

我爱模板网要实现下面的效果:

b899cf9b77619796c1a2ede8ec8e07e0.png

即从后台获取数据,然后根据返回的时间,如“2019-12-17 23:59:59”,做成倒计时效果。

第一步、布局:

{{item.storeName}}
{{item.storeDistance}}
{{item.storeIndustryName}}

{{item.countDownHours}}
:
{{item.countDownMinutes}}
:
{{item.countDownSeconds}}
还需{{item.beHelpNum}}人助力

第二步、获取数据,造出时分秒字段,同时数据获取完,启动定时器:

getList:function(fn){

var that = this;

func.api(apiConfig.userCouponList(),{

page : that.pageNum,

limit : that.pageSize,

longitude : that.longitude,

latitude : that.latitude

},function(r){

if(r.status !== 200){

func.msg(r.message);

}else{

//增加倒计时的时分秒,r.data.rows即获取的数据列表,getShiChaTime是计算时间,返回时分秒

r.data.rows.map(function(item,index){

item.countDownHours = that.getShiChaTime(item.helpEndTime).hours;

item.countDownMinutes = that.getShiChaTime(item.helpEndTime).minutes;

item.countDownSeconds = that.getShiChaTime(item.helpEndTime).seconds;

})

if(that.pageNum === 1){

that.list = r.data.rows;

}else{

that.list = that.list.concat(r.data.rows);

}

if(that.list.length

that.pageNum++;

that.hasMore = true;

}else{

that.hasMore = false;

}

//启动倒计时

that.interval();

}

})

},

第三步、倒计时inerval逻辑

interval:function(){

var that = this;

setInterval(function(){

item.countDownHours = that.getShiChaTime(item.helpEndTime).hours;

item.countDownMinutes = that.getShiChaTime(item.helpEndTime).minutes;

item.countDownSeconds = that.getShiChaTime(item.helpEndTime).seconds;

that.$forceUpdate();

},1000)

},

第四步、getShiChaTime逻辑

//获取时差中的时分秒

getShiChaTime:function(str){

var oldTime = new Date(str).getTime();

var nowTime = new Date().getTime();

var shicha = oldTime-nowTime;

var hours = parseInt(shicha / 1000 / 60 / 60);

var minutes = parseInt((shicha % (1000 * 60 * 60)) / (1000 * 60));

var seconds = parseInt((shicha % (1000 * 60)) / 1000);

return {

hours:hours,

minutes:minutes,

seconds:seconds

};

},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_818842.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用Minify加速 优化网站性能教程

Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Se…

保护水资源公益网站html,保护水资源公益海报世界水日宣传海报

保护水资源公益海报世界水日宣传海报是一篇世界水日地球日环境保护矢量公益海报模板,内容制作比较精美,水是生命之源公益海报,水是我们的生命之源,保护水资源是我们每个人的共同责任,不浪费任何一滴水,需要这样的一篇节水主题宣传海报素材的朋…

登录网站后自动退出需重新登录_微博自动关注陌生人?你的账号有可能被“劫持”了!...

近期,北京市举报中心接到网民举报称,他的新浪微博账号经常自动关注陌生人,其中大多是营销账号,自己并不感兴趣,真正想看的内容却找不到了,影响使用体验。北京市举报中心依法依规交由网站处置,在…

虚拟服务器调优不包括,使用虚拟主机会对SEO优化有影响吗?

想做一个网站除了需要有域名之外,还需要一个源码承载工具,那就是服务器或者虚拟主机,服务器固然是好的,那么使用虚拟主机会不会对聊城SEO优化有影响呢?一、虚拟主机是什么?如果要了解虚拟主机对聊城SEO优化…

java程序挑战_某网站的编程挑战题目 Java版本的 strToInt

题目详情输入一个表示整数的字符串,把该字符串转换成整数并输出,例如输入字符串"345",则输出整数345。请完成函数StrToInt,实现字符串转换成整数的功能。友情提醒:提交代码之前,请复查下你的程序…

php网站首页打开的慢,最近解决客户网站首页打开慢的体会

最近解决客户网站首页打开慢的体会首先打开客户网站首页,在index.php页面执行断点测试,测试出一条SQL语句执行缓慢:然后复制这个SQL语句到数据库里执行了一下,发现整整用了30多秒,用测试命令测试出结果如下&#xff1a…

esp8266 rtos 开发环境 ubuntu_写个网站 - Ubuntu开发环境搭建

下班回家的路上想着要不写个网站,然后,要不把做网站的过程写下来吧,然后,回来后,折腾折腾,坐到电脑前,开始打字。服务器原来腾讯云上有一个Ubuntu服务器,现在全部重新开始。基于安全考虑&#x…

linux discuz 目录权限设置,Linux下 网站目录读写权限的设置

Linux下 网站目录读写权限的设置作者:admin 发布于:2017-4-25 9:39 Tuesday网站目录文件权限的设置对网站的安全至关重要,下面简单介绍网站目录文件权限的基本设定。我们假设http服务器运行的用户和用户组是www-data,网站用户为ww…

怎样用sourceTree将自己本地的项目上传到github网站上

前言:GitHub 是基于 Git 的一个代码托管网站。开发者可以将代码在 GitHub 上开源,可以浏览其它项目的代码。 准备工作:1、github网站账号。2、sourceTree软件。 一、在github网站上新建一个仓库 方法很简单,你可以参考官网给出的教…

宝塔linux怎么安装asp网站,宝塔面板创建网站:宝塔linux面板添加网站详细教程...

如何利利用宝塔面板来创建网站?其实,宝塔面板操作还是比较简单的,宝塔windows面板和Linux面板添加网站的步骤是差不多的,不过为了让第一次接触宝塔Linux面板的站长更容易理解和学习,所以就分享一下Linux面板创建站点添…

数据访问之注册审核(重点是审核!!!)常用于企业、公司、医院等网站---2017-05-04...

关于审核,如发表文章的审核、员工请假的审核、药品申请的审核等等,代码大同小异。下面来看一下代码是怎么写的: 用到的数据库:hw_0408 用到的表:users 首先,实现注册功能(zhece.php chuli.php&#xff…

访问Oracle em https https://localhost:1158/em 报访问网页提示此网站的安全证书有问题解决方法

访问Oracle em https https://localhost:1158/em 报访问网页提示此网站的安全证书有问题 因为ie10、ie11等对不安全的链接,管理更加严格,低安全级别,不能解决问题, 解决办法: 1、采用google 浏览器,Chrom…

思科模拟器企业网站服务器配置,cisco模拟器配置域名web服务器

cisco模拟器配置域名web服务器 内容精选换一换防护域名开启WEB基础防护之后,访问网站如果出现500,502,504等报错,并且显示Web应用防火墙和网站连接失败,如图1所示。可能的原因比较多,如防火墙拦截、源站配置…

建站手册-语义网:语义网实例

ylbtech-建站手册-语义网:语义网实例1.返回顶部 1、http://www.w3school.com.cn/semweb/semantic_example.asp2、2.返回顶部1、语义网。一个简单的应用实例。 购买和出售二手车 假设某个语义网系统用于通过因特网管理二手车的销售和购买。 该系统可能包括两个主要的…

后台填充_如何才能填充发布好一个网站?

我们知道 网站做完之后 需要进行内容的填充,丰富的、高质量的网站内容会提高网站的搜索引擎排名,增加点击量,从而给企业带来很好品牌宣传效果和可观的经济收益。那么我们填充时应该注意哪些?这里来列举几点1、上传图片时要按照设计…

ercharts一个页面能放几个_网站搜索排名,为什么需要高点击率页面?

在做SEO的过程中,我们经常会遇到这样的情况: ①有关键词排名,网站流量非常少。 ②页面关键词排名,长期停滞不前。 ③整站权重很难得到有效的提升,即使你有大量关键词排名。 面对这样的情况,你可能会想尽各种…

java做一个数据库网站,用javaSwing和mysql数据库做的一个登录页面

用javaSwing和mysql数据库做的一个登录页面用javaSwing和mysql数据库做的一个登录页面一:首先在eclipse中新建一个java工程二:然后新建一个包,并且在包中新建两个类:一个事登录用的界面(Login)类,一个事连接数据库的(j…

win10 iis6写php接口,小编介绍win10 IIS 6.0安装和网站架设的方法图文教程

最近有些朋友反馈小编问win10 IIS 6.0安装和网站架设的方法是什么。IIS 6.0 和 Windows Server 2003在网络应用服务器的管理、可用性、可靠性、安全性、性能与可扩展性方面提供了许多新的功能。IIS 6.0同样增强了网络应用的开发与国际性支持。那么接下来小编就为大家说说 IIS 6…

linux个人网站发布,51CTO博客-专业IT技术博客创作平台-技术成就梦想

发布个人站点1.创建个人用户和站点[rootlocalhost ~]# useradd baidu[rootlocalhost ~]# passwd baiduChanging password for user baidu[rootlocalhost ~]# su - baidu[baidulocalhost ~]$ mkdir public_html[baidulocalhost ~]$ cd public_html/[baidulocalhost p…

GitHub+Hexo 搭建个人网站

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发、Nodejs、Python、Linux、IT资讯等板块. 一、创建GitHub Pages站点 GitHub Pages是一种静态站点托管服务,旨在直接从GitHub仓库托管您的个人,组织或项目页…