微信小程序实现阅读知情同意书倒计时五秒

山茶Ava

已于 2024-11-18 16:08:45 修改

阅读量229

点赞数 2

文章标签：微信小程序小程序 javascript 倒计时

于 2024-11-18 16:07:05 首次发布

本文链接：https://blog.youkuaiyun.com/hjj_flowers/article/details/143859681

版权

1、html中

<view class="containter">
  <text wx:for="{{list}}" wx:key="index">{{item}}</text>
  <button >我已阅读（{{countdown}}s）</button>
</view>

2、js文件里

Page({

	  /**
	   * 页面的初始数据
	   */
	  data: {
	    list:[
	     " 您同意承担包括但不限于如下违反相关法律法规或违反平台规则情形造成的全部责任： ",
	      "（1） 提供信息不完整、不真实、不准确，产生误导影响；", 
	      "（2） 未按要求披露过敏史等；",
	      "（4） 以任何形式侵犯他人名誉权等行为。",
	      "本免责条款中如有任何约定与中华人民共和国法律相抵触，则这条约定将完全按法律规定重新解释，而其它条款依旧具有法律效力。我们保留随时更改上述免责条款的权利。以任何方式登录本平台或直接、间接使用本平台资料者，视为自愿接受本网站免责条款的约束。",
	    ],//知情同意书
	     timeInterval:null,
	    time:5,//倒计时秒数
	    countdown:'',//显示倒计时秒数
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad: function(options) {
	    this.countdown();//调用倒计时方法
	  },
	  // 倒计时
	  countdown(){
	    let second=this.data.time  % 60;
	    if(second>0){
	      this.setData({
	        countdown: second,
	        time:this.data.time-1
	    })
	    }else{
	      this.setData({
	        countdown: 0
	    })
	      clearTimeout(this.data.timeInterval); //清除定时器
	    }
	    const timeInterval = setTimeout(this.countdown, 1000);
	    this.setData({
	      timeInterval,
	    })
	},
})