小程序（倒计时的制作）

微信小程序如火如荼，今天我借教程做一篇倒计时效果的小程序页面.

这样的效果是怎样实现的呢

按以下步骤操作

wxml文件放个text:

<view><text>{{second}} 秒:{{micro_second}}</text>
</view>

然后在js文件下编写如下代码：

function countdown(that) {var second = that.data.second if (second == 0) {   // console.log("时间到...");that.setData({second: "Time Out..."}); return;} var time = setTimeout(function () {that.setData({second: second - 1});countdown(that);}, 1000)
}

在Page里面加入：

 second: 3,

在onLoad加载函数里面执行倒计时函数：

countdown(this);

最终效果如图：

加入毫秒demo

更改js代码：

function countdown(that) {var second = that.data.second if (second == 0) {that.setData({second: "时间到!",micro_second: " " ,s:0});clearTimeout(micro_timer);return;}var timer = setTimeout(function () {that.setData({second: second - 1});countdown(that);} , 1000)
}
/* 毫秒级倒计时 */
// 初始毫秒数，同时用作归零
var micro_second_init = 100;
// 当前毫秒数
var micro_second_current = micro_second_init;
// 毫秒计时器
var micro_timer;
function countdown4micro(that) { if (micro_second_current <= 0) {micro_second_current = micro_second_init;}
micro_timer = setTimeout(function () {that.setData({micro_second: micro_second_current - 1});micro_second_current--;countdown4micro(that);
}, 10)
}

在onload函数如加入上述的两个计时函数：

 countdown(this);countdown4micro(this);

最终效果：

小程序（倒计时的制作）相关推荐

【百度小程序模板】百度小程序模板怎么制作
[百度小程序模板]百度小程序模板怎么制作?百度小程序模板模板WXML提供模板(template),可以在百度小程序模板中定义代码片段,然后在不同的地方调用.定义百度小程序模板使用name属性,作为模板 ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
微信小程序：scroll-view制作横向滚动导航条特效
微信小程序:scroll-view制作横向滚动导航条特效一.scroll-view介绍微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x.scroll-y.scr ...
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力. 一.小程序 1. 创建小程序
微信小程序倒计时，购物车，向左滑删除左拉删除
微信小程序倒计时 :https://gitee.com/dotton/CountDown 微信小程序购物车功能,全选,价格叠加:https://www.cnblogs.com/linxin/p/683 ...
线上拍卖商城小程序源码制作开发
随着互联网时代的到来,网络购物渠道日趋完善,同时也吸引了越来越多的消费群体:其中,针对传统拍卖模式开发在线拍卖应用系统,可以整合电子商务渠道的优势和用户对拍卖的认知.为不同需求的商品提供一站式高效服务 ...
微信小程序倒计时实现
微信小程序倒计时实现 a.wxml <view class="daojishi"><text>{{day}}</text>天<text&g ...

小程序（倒计时的制作）

小程序（倒计时的制作）

小程序（倒计时的制作）相关推荐

最新文章

热门文章