小程序实现正计时和倒计时

1、正计时：

实现后的样式：

代码：

var timer; // 计时器Page({data: {seconds: 0,secondMax: 3599,timeMax:'60:00',maxTime:'60:00',actionMax:true,stopMaxTime:false,resetMax:false,time: '00:00',cost: 0,action:true,stopTime:false,reset:false,childName: [{ "name": '选项1', "active": true },{ "name": '选项2', "active": false },{ "name": "选项3", "active": false },{ "name": '选项4', "active": false }],active1:false,active2: true,active3: false,active4: true,active: 'Exercise-Program-choose-one'},cilckChild(e) {const that = this;let index = e.currentTarget.dataset.index;let childName = that.data.childName;for (let i = 0; i < childName.length; i++) {if (index == i) {childName[i].active = true;} else {childName[i].active = false;}}that.setData({ childName: childName })},onLoad: function (options) {},timing(e){this.setData({ action: !this.data.action, stopTime:false})timing(this)},stopTime(e) {console.log("现在的记录时间时长：" + this.data.seconds)this.setData({ stopTime: true, reset: true })},reset(e) {const that = this;if (!that.data.reset) {that.setData({ stopTime: true })} else {that.setData({ seconds: 0, action: !that.data.action })}},timingMax(e){this.setData({ actionMax: !this.data.actionMax, stopMaxTime: false })timingMax(this)},stopMaxTime(e){console.log("现在是记录的时间时长：",this.data.secondMax)this.setData({ stopMaxTime: true, resetMax: true })},resetMax(e) {const that = this;if (!that.data.resetMax) {that.setData({ stopMaxTime: true })} else {that.setData({ secondMax: 3600, actionMax: !that.data.actionMax })}},//正计时function timing(that) {var seconds = that.data.secondsif (seconds > 3600) {that.setData({time: '60:00'});return;}if (that.data.stopTime){if(!that.data.reset){that.setData({ seconds: 0, action: !that.data.action })return;}return;}setTimeout(function () {that.setData({seconds: seconds + 1});timing(that);}, 1000)formatSeconds(that)}function formatSeconds(that) {var mins = 0, hours = 0, seconds = that.data.seconds, time = ''if (seconds < 60) {} else if (seconds < 3600) {mins = parseInt(seconds / 60)seconds = seconds % 60} else {mins = parseInt(seconds / 60)seconds = seconds % 60hours = parseInt(mins / 60)mins = mins % 60}that.setData({// time: formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(seconds)time: formatTime(mins) + ':' + formatTime(seconds)});}function charging(that) {if (that.data.seconds < 600) {that.setData({cost : 1})}}

2、倒计时：

实现后的设计图：

代码片段：

var timer; // 计时器Page({data: {seconds: 0,secondMax: 3599,timeMax:'60:00',maxTime:'60:00',actionMax:true,stopMaxTime:false,resetMax:false,time: '00:00',cost: 0,action:true,stopTime:false,reset:false,childName: [{ "name": '选项1', "active": true },{ "name": '选项2', "active": false },{ "name": "选项3", "active": false },{ "name": '选项4', "active": false }],active1:false,active2: true,active3: false,active4: true,active: 'Exercise-Program-choose-one'},cilckChild(e) {const that = this;let index = e.currentTarget.dataset.index;let childName = that.data.childName;for (let i = 0; i < childName.length; i++) {if (index == i) {childName[i].active = true;} else {childName[i].active = false;}}that.setData({ childName: childName })},onLoad: function (options) {},timing(e){this.setData({ action: !this.data.action, stopTime:false})timing(this)},stopTime(e) {console.log("现在的记录时间时长：" + this.data.seconds)this.setData({ stopTime: true, reset: true })},reset(e) {const that = this;if (!that.data.reset) {that.setData({ stopTime: true })} else {that.setData({ seconds: 0, action: !that.data.action })}},timingMax(e){this.setData({ actionMax: !this.data.actionMax, stopMaxTime: false })timingMax(this)},stopMaxTime(e){console.log("现在是记录的时间时长：",this.data.secondMax)this.setData({ stopMaxTime: true, resetMax: true })},resetMax(e) {const that = this;if (!that.data.resetMax) {that.setData({ stopMaxTime: true })} else {that.setData({ secondMax: 3600, actionMax: !that.data.actionMax })}},
function timingMax(that) {var seconds = that.data.secondMaxif (seconds <= 0) {that.setData({timeMax: '00:00'});return;}if (that.data.stopMaxTime) {if (!that.data.resetMax) {that.setData({ secondMax: 3600, actionMax: !that.data.actionMax })return;}return;}setTimeout(function () {that.setData({secondMax: seconds - 1});timingMax(that);}, 1000)formatSecondsMax(that)}function formatSecondsMax(that) {var mins = 60, hours = 1, seconds = that.data.secondMax, timeMax = ''if (seconds < 60) {mins = parseInt(mins%60)} else if (seconds <= 3600) {mins = parseInt(seconds / 60)seconds = seconds % 60} else {mins = parseInt(seconds / 60)seconds = seconds % 60hours = parseInt(mins / 60)mins = mins % 60}console.log(formatTime(mins))console.log(formatTime(seconds))that.setData({// time: formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(seconds)timeMax: formatTime(mins) + ':' + formatTime(seconds)});}function formatTime(num) {if (num < 10)return '0' + numelsereturn num + ''}

小程序实现正计时和倒计时相关推荐

小程序iView Weapp实现一个倒计时
昨天把组件库 iView Weapp研究了一下,里面确实有很多不错的组件,对于组件的使用,也写了一下笔记:五分钟上手-微信小程序组件库 iView Weapp https://www.jianshu. ...
【Unity3D日常开发】Unity3D中实现计时器工具类-正计时、倒计时、暂停计时、加速计时
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
小程序列表多个批量倒计时
修复更新-----2019-11-22 订单列表中倒计时-wxml <view wx:for="{{wearList.datetime}}" wx:for-item=&quo ...
微信小程序样式点击开始倒计时（正则规则验证）手机号验证
今天在开发的小程序过程中,遇到了一个发送验证码的需求,嗯嗯,大体的ui效果图如下所示! 点击号码的时候,我们点击获取验证码,开始倒计时的功能,首先我们申请一个变量check=true, tochang ...
微信小程序（手机登录60S倒计时+微信登录页面+限制时间次数频率）
1.这是效果图(js代码没有优化,封装一个request请求) 下面直接上代码 2.wxml代码 <view class="login-container"><v ...
微信小程序发送验证码60秒倒计时
wxml <view class="li-send" bindtap="onSend" wx:if="{{send}}">发送验 ...
微信小程序之验证码短信倒计时
最近做的一个项目里有一个收验证码的倒计时需求,mark出来~希望对小伙伴们有帮助 wxml <view class="checkPhone-box"><view ...
微信小程序使用canvas画圆形倒计时动画
参考文档:https://www.cnblogs.com/quietxin/p/9418813.html 效果: wxml页面 <view class="container" ...
微信小程序实现一个简单的倒计时效果
WXML代码: <view class='countDown'>倒计时:<text style='color:red'>{{countDownNum}}</text> ...

小程序实现正计时和倒计时

1、正计时：

2、倒计时：

小程序实现正计时和倒计时相关推荐

最新文章

热门文章