html倒计时代码+微信可用,微信小程序动态显示项目倒计时效果
本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下
1、一般我们说的显示秒杀都是指的单条数据,循环我没做。
效果:
2、wxml代码:
剩余时间:已经截止
剩余时间:{{clock}}
3、.js文件代码:
function countdown(that) {
var EndTime = that.data.end_time || [];
var NowTime = new Date().getTime();
var total_micro_second = EndTime - NowTime || [];
console.log('剩余时间:' + total_micro_second);
// 渲染倒计时时钟
that.setData({
clock: dateformat(total_micro_second)
});
if (total_micro_second <= 0) {
that.setData({
clock: "已经截止"
});
//return;
}
setTimeout(function () {
total_micro_second -= 1000;
countdown(that);
}
, 1000)
}
// 时间格式化输出,如11:03 25:19 每1s都会调用一次
function dateformat(micro_second) {
// 总秒数
var second = Math.floor(micro_second / 1000);
// 天数
var day = Math.floor(second/3600/24);
// 小时
var hr = Math.floor(second/3600%24);
// 分钟
var min = Math.floor(second/60%60);
// 秒
var sec = Math.floor(second%60);
return day + "天" + hr + "小时" + min + "分钟" + sec+"秒";
}
Page({
/**
* 页面的初始数据
*/
data: {
id:'',
result:[],
end_time:'',
clock:''
},/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.request({
url: 'https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//不含富文本html
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/json'
},
success: function (res) {
that.setData({
common: res.data, //一维数组,全部数据
end_time: res.data.end_time //项目截止时间,时间戳,单位毫秒
})
console.log(that.data.common);
console.log('结束时间:' + that.data.end_time);
},
fail: function (res) { },
complete: function (res) { },
}),
//调用上面定义的递归函数,一秒一刷新时间
countdown(that);
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html倒计时代码+微信可用,微信小程序动态显示项目倒计时效果相关推荐
- 零基础微信落地页小程序实战项目
前言 微信小程序简单易上手,只要有一些编程基础,即可快速开发基本的项目. 本项目是常见的,商品广告落地页小程序.提供商品浏览,商品列表按钮,购买,微信授权,手机号绑定,验证码校验,用户协议,消息通知, ...
- 小熊洗护微信洗鞋小程序 开源项目
小熊洗护 微信小程序介绍 小熊洗鞋洗衣 介绍 一个 本地化洗鞋,洗衣服务的微信小程序,有加盟店,支持自送 或者快递,具有业务分销功能. 门户网站 地址 github 开源地址 gitee开源地址 软件 ...
- 微信小程序多个倒计时
wechatide://minicode/QUV0k2mG7R2Q 这是微信小程序的一个倒计时代码片段,但在苹果手机里,这个倒计时并不会显示!! 原因是在苹果手机里时间戳的转换问题!! 可兼容苹果安卓 ...
- python小程序代码50 到100行-Python代码不到四十行简单暴力,微信跳一跳小程序轻松过万...
群内不定时分享干货,包括最新的python企业案例学习资料和零基础入门教程,欢迎初学和进阶中的小伙伴入群学习交流 最近微信有个小程序,并不知道大家有没有被这个游戏给刷屏,这个游戏就是跳一跳 今天就用P ...
- php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 {{notice}} x data: ...
- 关于微信小程序上传,在微信公众平台|小程序中找不到上传的代码
2019/05/16 小程序小白入门 最开始的时候,我不知道该如何上传自己的代码.打开微信开发平台,找到"工具"选项,再点击"上传"就好了 ①找到"工 ...
- 微信限制 ChatGPT 小程序;美国禁止在政府设备上使用 TikTok;Gccrs 代码合并到 GCC 13 主支|极客头条
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹 出品 | CSDN(ID:CSDNnews ...
- 2023全新抖音快手微信取图小程序/壁纸小程序源码+代码全开源
正文: 全新抖音快手微信取图小程序 壁纸小程序源码 全开源 此版本并非最近网传版本,其他站的网传版本是没有数据库的,故此我直接花买下来的完整版本源码! 一款全新的抖音快手微信取图小程序全开源上线了.其 ...
- 前端 domparser未定义怎么解决_开源|wwto:小程序跨端迁移解决方案——微信转其他小程序...
开源项目专题系列 (二) 1.开源项目名称:wwto 2.github地址: https://github.com/wuba/wwto 3.简介:wwto是58同城推出的一种小程序跨端迁移解决方案,可 ...
最新文章
- 解决方案:__init__() got an unexpected keyword argument ‘kill_previous‘
- 百分点集团发布中国首个行业AI决策系统产品Deep Matrix
- 前端能读取压缩包内容吗?_解决前端多环境部署的痛点
- button点击后变色_汽车改色膜新潮流,2021年流行渐变色
- 醉了!用数据分析的方法帮你找到物美价廉的美酒 | 小长假放大招
- es6 __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()
- HC蓝牙模块测试AT指令搭建外部电路遇到的问题
- spring 动态代理_Spring中的两种动态代理
- hadoop(二)-hadoop原理及架构
- Ant-deign-vue入门:布局-官方文档踩坑
- Go函数和方法的区别
- 通过表面分析评估 Cu-CMP 工艺
- 文字排版--删除线(text-decoration:line-through)
- 【量化投资】03.量化工程abu学习之量化基础(1/3)
- GBase XDM使用场景
- python200行代码_200行Python代码实现2048
- 读书笔记软件调试之道 :从大局看调试-理想的调试环境
- SQL16 查找GPA最高值
- 让蔡徐坤来教你实现游戏中的帧动画(下)
- ffmpeg学习日记17-获取MP4视频流的帧率
热门文章
- Unable to start program bug解决方法
- 2D动画设计制作软件—“Reallusion Cartoon Animator”
- 计算机考英语一数学二,这所院校初试科目调整为数一英一!又有专业计划停招!这些信息21考研人一定要知道!...
- linux系统做成iso镜像文件,如何在Linux系统中制作可启动img/iso镜像文件
- UIWebView的用法
- Magento银联支付模块|Magento1.9 Unionpay中国银联支付插件|支持PC、手机移动端支付|2016最新Unionpay5.0.0支付接口...
- 远程桌面大师android,远程桌面大师iPad版
- 细粒度图像分析综述2019
- 浅谈在探索数分之路上的“数据思维”论述
- 宝妈刷单被骗125万元,我们该如何避免被骗?