小程序中如何显示倒计时

如何小程序js开发中在页面显示到某天(比如2018年9月1日)的倒计时,精确到秒而且每秒都会变动,请具体谢谢

3个回答

Page的onLoad事件用setInterval定时setData就行了,大概下面这样
wxml

 {{ticker}}
 Page({
  data: {
      ticker: ''
  },
  getTicker: function (totalSec) {
      var s = '';
      var v = Math.floor(totalSec / 24 / 60 / 60); if (v > 0) s += v + '天'; totalSec -= v * 24 * 60 * 60;
      v = Math.floor(totalSec / 60 / 60); if (v > 0) s += v + '小时'; totalSec -= v * 60 * 60;
      v = Math.floor(totalSec / 60); if (v > 0) s += v + '分钟'; totalSec -= v * 60;
      s += v + '秒';
      return s;
  },
  onLoad: function (options) {
      var d = new Date(), endDate = new Date('2018/9/1'), totalSec = (endDate.getTime() - d.getTime()) / 1000;
      endDate = '距离' + endDate.toLocaleDateString() + ':';
      setInterval(function () {
          totalSec--;
          this.setData({ticker:endDate+ this.getTicker(totalSec)})
      }.bind(this), 1000);
      this.setData({ ticker: endDate + this.getTicker(totalSec) })
  }
    }

showbo
支付宝加好友偷能量挖 回复weixin_41584177: s += v + '秒';这句改下,csdn9418已经说了。。==>s += totalSec + '秒';
一年多之前 回复
weixin_41584177
weixin_41584177 回复weixin_41584177: 另外这个getTicker是分和秒一起变动的
一年多之前 回复
weixin_41584177
weixin_41584177 这个显示的ticker不会变动怎么办?
一年多之前 回复
csdn9418
csdn941811 这句改下s += v + '秒';==>s += totalSec + '秒';
一年多之前 回复

Page({
data: {
ticker: ''
},
getTicker: function (totalSec) {
var s = '';
var v = Math.floor(totalSec / 24 / 60 / 60); if (v > 0) s += v + '天'; totalSec -= v * 24 * 60 * 60;
v = Math.floor(totalSec / 60 / 60); if (v > 0) s += v + '小时'; totalSec -= v * 60 * 60;
v = Math.floor(totalSec / 60); if (v > 0) s += v + '分钟'; totalSec -= v * 60;
s += v + '秒';
return s;
},
onLoad: function (options) {
var d = new Date(), endDate = new Date('2018/9/1'), totalSec = (endDate.getTime() - d.getTime()) / 1000;
endDate = '距离' + endDate.toLocaleDateString() + ':';
setInterval(function () {
totalSec--;
this.setData({ticker:endDate+ this.getTicker(totalSec)})
}.bind(this), 1000);
this.setData({ ticker: endDate + this.getTicker(totalSec) })
}
}

<!DOCTYPE html>




距离2018年1月1日还有 小时 分钟 秒

var show = document.getElementsByTagName('p')[0]; function getTime(){ //创建时间(现在) var nowDate = new Date(); //2018年时间对象 var nextDate = new Date(2018,0,1); //获取两个时间点 距离1970.0.1的时间(毫秒数) var nowTime = nowDate.getTime(); var nextTime = nextDate.getTime(); //根据差值可以计算出 现在距离2018年的毫秒数 进而计算出秒数(毫秒数/1000) var dSecond= parseInt((nextTime - nowTime) / 1000); //通过现在距离2018年的秒数求出天数(秒数/24*60*60) var dDay = parseInt(dSecond/(24*60*60)); //通过现在距离2018年的秒数取余 求出 去掉天数剩下的秒数 var reSecond = dSecond % (24*60*60); //通过计算完剩下的秒数 求出小时数 var dHour = parseInt(reSecond / 3600); console.log(dHour); //通过计算小时 剩下的秒数 求分钟数 var reSecond1 = reSecond % 3600; var dMinute = parseInt(reSecond1 / 60); console.log(dMinute); //通过计算分钟数 剩下的秒数 就是我们想要的描述 var nowSecond = reSecond1 % 60; show.innerHTML = '距离2018年1月1日还有' +dDay+ '天' +dHour+ '小时' +dMinute+ '分钟' +nowSecond+ '秒'; } getTime(); setInterval(function () { getTime(); },1000)

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python 做一个 小程序 , 显示 倒计时, 怎么计到最后 1秒才显示
-
qt设置倒计时,急用跪求
-
C++编程程序设计问题中倒计时
-
谁帮我用QT实现这个简单的程序,万分感激
-
移动端web页面倒计时 js 由于手机锁屏失效问题?
-
VS2010 图片定时显示并闪烁,点击后重新计时。
-
求教:一个类似淘宝秒杀的程序
-
谁能帮我设计一个89c51的一个八人抢答器的汇编程序,万分感谢!!!
-
关于基础C程序添加任务计划运行后窗口不显示问题
-
c#新手问题,求大神解决。
-
C语言编程打字训练程序。
-
求 Html 代码~~完整版
-
求模拟三辆火车调度系统得程序
-
求8086简单汇编代码(新手入坑)
-
一個關於51單片機涉及交通燈的匯編程序以及他的PROTUES仿真圖
-
windwos C 编写对话框时遇到问题了。
-
能帮我分析一个单片机程序吗?谢谢 新人上路 所以没有悬赏 各位见谅
-
java多线程问题,求解答!!!!
-
Linux文件操作高频使用命令
文章目录0.新建操作:1.查看操作2.删除操作3.复制操作4.移动操作:5.重命名操作:6.解压压缩操作 0.新建操作: mkdir abc #新建一个文件夹 touch abc.sh #新建一个文件 1.查看操作 查看目录: ll #显示目录文件详细信息 查看文件内容: cat|head|tail命令 cat abc.txt #查看abc的内容 head -5 abc.txt #...
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、算法 11、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
nginx学习,看这一篇就够了:下载、安装。使用:正向代理、反向代理、负载均衡。常用命令和配置文件
文章目录前言一、nginx简介1. 什么是 nginx 和可以做什么事情2.Nginx 作为 web 服务器3. 正向代理4. 反向代理5. 动静分离6.动静分离二、Nginx 的安装三、 Nginx 的常用命令和配置文件四、 Nginx 配置实例 1 反向代理五、 Nginx 配置实例 2 负载均衡六、 Nginx 配置实例 3 动静分离七、 Nginx 的高可用集群 前言 一、nginx简介...
【安全】Web渗透测试(全流程)
1 信息收集 1.1域名、IP、端口 域名信息查询:信息可用于后续渗透 IP信息查询:确认域名对应IP,确认IP是否真实,确认通信是否正常 端口信息查询:NMap扫描,确认开放端口 如果不会用Nmap,看这里:NMAP 基础教程(功能介绍,安装,使用) 发现:一共开放两个端口,80为web访问端口,3389为windows远程登陆端口,嘿嘿嘿,试一下 发现:是Window...
MySQL数据库—SQL汇总
一、准备 下文整理常见SQL语句的用法,使用MySQL5.7测试,参考了尚硅谷MySQL教程及用例。用例sql: 链接: https://pan.baidu.com/s/1tb3-12MRNFjV8drFlN6wzg&amp;shfl=sharepset 密码: fc2h 为了方便查阅可从右侧目录快速索引 二、DQL(Data Query Language)数据查询语言 1、语句顺序 书写顺序...
五款高效率黑科技神器工具,炸裂好用,省时间
loonggg读完需要4分钟速读仅需2分钟感觉我好久好久没有给大家分享高质量的软件和插件了。今天周末,难得在家休息一下,痛下决心,分享一些我认为的高效率工具软件给大家。废...
黑客入门,从HTB开始
Hack the box 是国外的一个靶机平台,里面的靶机包含多种系统类型,并且里面可以利用的漏洞类型多种多样,有很多靶机其实非常贴近实战情景。因此 HTB 是一个很好的学习渗透测试靶场。 之前在 HTB 也玩过一些机器。里面的机器难度有好几个档次,insane 难度的一般都是极其困难的,这种机器一般让我对着大神的 Writeup 我可能都没有办法复现出来。之前也有在公众号上分享过几篇 H...
动画:用动画给女朋友讲解 TCP 四次分手过程
作者 | 小鹿 来源 | 公众号:小鹿动画学编程 写在前边 大家好,我们又见面了,做为一个业余的动画师,上次的用动画的形式讲解 TCP 三次握手过程再各大平台收到了广大读者的喜爱,说文章有趣、有货、有内容,也受到了很多读者的关注。很多读者留言说什么时候用动画讲一讲 TCP 四次挥手的过程,为了应大家的要求,今天我们就生动有趣的用动画给大家分享 TCP 四次挥手(分手)过程。 动画:用动画给...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
SQL基本语法入门 看这里就够了
SQL执行顺序 第一步:执行FROM 第二步:WHERE条件过滤 第三步:GROUP BY 分组 第四步:执行SELECT 投影列 第五步:HAVING条件过滤 第六步:执行ORDER BY排序 一、创建、删除库 -- 创建新数据库 CREATE DATABASE 数据库名; -- 删除数据库 DROP DATABASE 数据库名; 二、增加 1、添加列名、设置主键、设...
面试最后一问:你有什么问题想问我吗?
尽管,我们之前分享了这么多关于面试的主题: 高薪必备的一些Spring Boot高级面试题 面试必问:设计模式遵循的面向对象设计原则! 面试必问:怎么保证缓存与数据库的双写一致性? 27道高频Spring面试题,你能答对几个? 唠唠面试常问的:面向对象六大原则 一文高效图解二叉树面试题 Java面试中最高频的那20%知识点是什么? 百度面试题:求数组最大值 ... 然而,最后这个90%可见...
python 程序员进阶之路:从新手到高手的100个模块
在知乎和CSDN的圈子里,经常看到、听到一些 python 初学者说,学完基础语法后,不知道该学什么,学了也不知道怎么用,一脸的茫然。近日,CSDN的公众号推送了一篇博客,题目叫做《迷思:Python 学到什么程度可以面试工作?》,真实反映了 python 程序员在成长过程中的一些困惑。
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
还在收集资料?我这里有个github汇总
原创:小姐姐味道(微信公众号ID:xjjdog),欢迎分享,转载请保留出处。国内程序员都喜欢收集资料,但是又不看,github是重灾区。更有莫名其妙fork的,让人不得要...
阿里编程规范(简化版)
阿里编程规范 及 阿里Java开发规约插件 Alibaba Java Coding Guidelines 统一规范标准将有助于提高行业编码规范化水平,帮助行业人员提高开发质量和效率、大大降低代码维护成本。 2017年年初,首次公开了《阿里巴巴Java开发手册》,自从第一个版本起,倍受业界关注。为了让开发者更加方便、快速的将规范推动并实行起来,阿里巴巴基于手册内容,研发了一套自动化的IDE检测插件(...
我们这类学生并不是一无是处
我们这类学生并不是一无是处,更何况,个别学生还很聪明,真的很聪明。 主观能动性在于自己,自己的人生自己把握。其实并不需要给自己那么大的压力,毕竟,你三年后拿到的录取通知书和你当前所处学校的环境及师资息息相关,换句话讲,你将来的大学录取通知书就是你当前学校的环境及师资的具体体现。千万不要夸大个人努力。个人努力固然重要,但我们都是平凡人,我们的先天环境都很一般,这就好比小学生在高考数学中取得高分...
2020年秋招后端面经
主要包含华为,网易互娱,广联达,科大讯飞,浦发,中兴,上海农商行这些已经拿offer的,还有京东(不小心把二面时间换了一下,等通知等三个月了),虾皮(一面挂),顺丰(sp专场一面之后没消息,秋招第一个面试),携程的一些面经 文章目录1.自我介绍2.项目介绍3.接口和抽象类的区别相同点:不同点:4.多态5.重载和覆盖6.spring1.动态代理基于接口基于继承2.AOP2.1AOP3.IOC5.SS...
Linux/C/C++ 不可错过的好书
来源:公众号【编程珠玑】 作者:守望先生 ID:shouwangxiansheng 前言 经常有读者让我推荐书籍,这次我就把我私藏的计算机书单分享给你们!不过由于时间匆忙,不会进行更加详细的介绍。 声明 由于每个人的情况不一样,推荐的书并不一定适合你,也不一定适合当前阶段的你,有的书籍可能存在内容重复,所以根据自己的阶段情况进行选择即可。虽说如此,以下书单中提单的书均为优质书籍。...
相关热词 c#多人合作开发项目策略 c# cad 坐标转换 c# 窗口内运行word c#线程睡眠 c# 静默打开打印机 c#获取当前路径的上一级 c# 去除线条 c# 取整倍数 c#窗体最大化控件不变 c# 程序更新程序案例

相似问题

3
小程序wxss靠底部居中的问题
4
开始考试时开始计时,点击提交答案按钮后,另一个考生进入考试后倒计时没有重新计时,怎么办?
1
基于java的游戏,添加倒计时,让倒计时随着游戏重新开始,重新计时
5
服务使用到期时间倒计时
8
js怎么实现一个倒计时,这个方法没有实现,该怎么在这个代码上修改
1
如何获取psensor两次距离变化的时间差然后取消倒计时
4
设计一款数字时钟,实时显示时间设置修改时间,有倒计时功能。求大神解答
4
python中如何一个程序运行两段代码块
2
Unity3D实现倒计时功能时报错NullReferenceException
1
在cocoscreator中使用typescript如何实现有 分和秒的倒计时
1
cocoscreator TS计时器
1
Python 做一个 小程序 , 显示 倒计时, 怎么计到最后 1秒才显示
6
假如有一个计时器程序,当CPU调度其他程序时,计时器程序是否还在计时?
2
javascript 和 jquery 的倒计时的问题。
0
c#异步通讯五子棋 双方倒计时怎么写
0
C语言编程打字训练程序。
2
想用js做个多时间段的倒计时插件,那个高人能否指点下,CB也行
1
把这个python程序定义为一个新的函数,并且带有3个参数,参数名单是海绵宝宝,派大星,章鱼哥
4
我想获得倒计时5小时的效果,现在只是指定了一个时间,求各位大神帮帮忙,是真的没有C币了
0
我这个倒计时的时间是后台在数据库获得的,所以刷新也不会重置,各位大神能不能帮我提升一下?