一个简单倒计时的封装

本列用TImer 和TimerTask实现
首先新建BaseTimerTask 继承 TimerTask

package com.example.latte;

import com.example.latte.net.ITimerListener;

import java.util.TimerTask;

public class BaseTimerTask extends TimerTask {

    private ITimerListener listener;

    public BaseTimerTask(ITimerListener listener) {
        this.listener = listener;
    }

    @Override
    public void run() {
        if (listener!=null){
            listener.onTimer();
        }
    }
}

因为在run方法中我们不具体实现,所以我们新建一个接口ITimerListener然后传入到BaseTimerTask,让activity
实现接口 这就让具体的实现到了View中

package com.example.latte.net;

public interface ITimerListener {

    void onTimer();

}

最后是我们的activity:

package com.example.latte.details;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatTextView;

import com.example.latte.BaseTimerTask;
import com.example.latte.R;
import com.example.latte.net.ITimerListener;

import java.text.MessageFormat;
import java.util.Timer;

public class GoodsDetailsActivity  extends AppCompatActivity implements ITimerListener {
    //显示倒计时的TextView
    private AppCompatTextView textView=null;
    //倒计时时长
    private int mCount=10;
    private Timer mTimer=null;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_goods);
        textView=findViewById(R.id.tv_goods);
        initTimer();
    }

    private void initTimer() {
        mTimer=new Timer();
        BaseTimerTask task=new BaseTimerTask(this);
        mTimer.schedule(task,0,1000);
    }

    @Override
    public void onTimer() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (textView!=null){
                    textView.setText(MessageFormat.format("跳转\\{0}s",mCount));
                    mCount--;
                    if (mCount<0){
                        if (mTimer!=null){
                            mTimer.cancel();
                            mTimer=null;
                        }
                    }
                }
            }
        });
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
A:好的,以下是一个简单的vue3炫酷的时分秒倒计时组件的代码。你可以根据需要进行修改和扩展。 ``` <template> <div class="countdown"> <div class="countdown-item"> <div class="countdown-value">{{ days }}</div> <div class="countdown-label">天</div> </div> <div class="countdown-item"> <div class="countdown-value">{{ hours }}</div> <div class="countdown-label">小时</div> </div> <div class="countdown-item"> <div class="countdown-value">{{ minutes }}</div> <div class="countdown-label">分钟</div> </div> <div class="countdown-item"> <div class="countdown-value">{{ seconds }}</div> <div class="countdown-label">秒</div> </div> </div> </template> <script> import { ref, computed } from 'vue' export default { name: 'Countdown', props: { targetDate: { type: String, required: true } }, setup (props) { const targetTime = new Date(props.targetDate).getTime() const currentTime = ref(Date.now()) const remainingTime = computed(() => { return Math.max(targetTime - currentTime.value, 0) }) const days = computed(() => { return Math.floor(remainingTime.value / (1000 * 60 * 60 * 24)) }) const hours = computed(() => { return Math.floor((remainingTime.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)) }) const minutes = computed(() => { return Math.floor((remainingTime.value % (1000 * 60 * 60)) / (1000 * 60)) }) const seconds = computed(() => { return Math.floor((remainingTime.value % (1000 * 60)) / 1000) }) // 每一秒钟更新一次时间 setInterval(() => { currentTime.value = Date.now() }, 1000) return { days, hours, minutes, seconds } } } </script> <style scoped> .countdown { display: flex; justify-content: center; } .countdown-item { display: flex; flex-direction: column; align-items: center; font-size: 2em; margin: 0 1em; } .countdown-value { font-weight: bold; } .countdown-label { font-size: 0.5em; text-transform: uppercase; } </style> ``` 使用方式: ``` <template> <Countdown targetDate="2022-01-01T00:00:00Z" /> </template> <script> import Countdown from '@/components/Countdown.vue' export default { components: { Countdown } } </script> ``` 在这个例子中,我们使用了ref和computed来处理计时和剩余时间等变量。我们通过将每一次的当前时间设置为ref,并且在setInterval回调中更新这个ref来实时更新计时器的值。 最后,我们在模板中使用了这些计算属性来显示天,小时,分钟和秒的值。我们也通过scoped样式来为组件添加样式。这个样式在我的测试项目中使用了Tailwindcss库。 希望这能帮到你!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值