首页 技术 正文
技术 2022年11月16日
0 收藏 900 点赞 4,079 浏览 1790 个字
<!--index.wxml-->
<view class="container">
<view class="container_content"> <view class="content_time">{{time}}S</view> <view class="content_btn">
<button class="btn_start" bindtap="startTap">开始</button>
<button class="btn_stop" bindtap="stopTap">停止</button>
<button class="btn_restart" bindtap="restartTap">重新开始</button>
</view> </view>
</view>
/**index.wxss**/
.container {
height: 100%;
width: 100%;
padding:;
margin:;
}
.container_content {
height: 100%;
width: 100%;
margin-top:40%;
text-align: center;
}.content_time {
color: forestgreen;
font-size: 50rpx;
}.btn_start {
width: 30%;
text-align: center;
background-color: green;
}.btn_stop {
width: 30%;
text-align: center;
background-color: red;
}.btn_restart {
width: 30%;
text-align: center;
background-color: darkcyan;
}
//index.jsPage({
data: {
time: 60, //初始时间
interval: "" //定时器
}, /**
* 开始倒计时
*/
startTap:function () {
var that = this;
that.init(that); //这步很重要,没有这步,重复点击会出现多个定时器
var time = that.data.time;
console.log("倒计时开始")
var interval = setInterval(function () {
time--;
that.setData({
time: time
})
if (time==0){ //归0时回到60
that.restartTap();
}
},100) that.setData({
interval:interval
})
}, /**
* 暂停倒计时
*/
stopTap:function () {
var that = this;
console.log("倒计时暂停")
that.clearTimeInterval(that)
}, /**
* 重新倒计时
*/
restartTap:function () {
var that = this;
that.init(that);
console.log("倒计时重新开始")
that.startTap()
}, /**
* 初始化数据
*/
init: function (that) {
var time = 60;
var interval = ""
that.clearTimeInterval(that)
that.setData({
time: time,
interval: interval,
})
}, /**
* 清除interval
* @param that
*/
clearTimeInterval: function (that) {
var interval = that.data.interval;
clearInterval(interval)
}, /**
* 生命周期函数--监听页面卸载
* 退出本页面时停止计时器
*/
onUnload:function () {
var that = this;
that.clearTimeInterval(that)
}, /**
* 生命周期函数--监听页面隐藏
* 在后台运行时停止计时器
*/
onHide:function () {
var that = this;
that.clearTimeInterval(that)
}})

———————
作者:平凡V之路
来源:CSDN
原文:https://blog.csdn.net/qq_36221503/article/details/79732381
版权声明:本文为博主原创文章,转载请附上博文链接!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,910
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,435
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,250
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,061
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,693
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,731