精华内容
下载资源
问答
  • 因项目中的订单页需要一个...项目里还有其他倒计时类型,比如年月日,天之类的, 先上一个工具类: //时间格式化,根据总秒数转换为对应的 hh:mm:ss 格式 static String constructTime(int seconds) { int day = ...

    因项目中的订单页需要一个定时器,比如下单后需要进行倒计时,等倒计时完后,订单状态自动关闭。

    如图:
    在这里插入图片描述

    这里显示等17分25秒就是我们所需要做的功能。

    项目里还有其他倒计时类型,比如年月日,天之类的,

    先上一个工具类:

    //时间格式化,根据总秒数转换为对应的 hh:mm:ss 格式
      static String constructTime(int seconds) {
        int day = seconds ~/3600 ~/24;
        int hour = seconds ~/ 3600;
        int minute = seconds % 3600 ~/ 60;
        int second = seconds % 60;
        if(day != 0){
          return '$day天$hour小时$minute分$second秒后自动取消';
        }else if(hour != 0){
          return '$hour小时$minute分$second秒后自动取消';
        }else if(minute !=0){
          return '$minute分$second秒后自动取消';
        }else if(second!=0){
          return '$second秒后自动取消';
        }else {
          return '';
        }
    //    return formatTime(day)+'天'+formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒后自动取消';
      }
    
      static String constructVipTime(int seconds) {
        int day = seconds ~/3600 ~/ 24;
        int hour = seconds ~/ 3600;
        int minute = seconds % 3600 ~/ 60;
        int second = seconds % 60;
        if(day!= 0){
          return '剩$day天$hour小时$minute分';
        }else if(hour!= 0){
          return '剩$hour小时$minute分';
        }else if(minute!=0){
          return '剩$minute分';
        }else {
          return '';
        }
    //    return formatTime(day)+'天'+formatTime(hour) + "小时" + formatTime(minute) + "分" + formatTime(second)+'秒后自动取消';
      }
      //数字格式化,将 0~9 的时间转换为 00~09
      static String formatTime(int timeNum) {
        return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
      }
    
    

    再看一下如何使用:

    
    class OrderPageState extends State<OrderPage> {
    
      String countContent ; // 倒计时内容
    
      Timer _timer;
      int seconds = 0;
    
      ///.......
    
       @override
      Widget build(BuildContext context) {
    
        countContent = Util.constructTime(seconds);
    
        return new Scaffold(
            appBar: HeadTitleBar(
              text: '订单详情',
              rightShow: true,
              rightIcPath: ImageConstant.icon_talk_black,
              callback: (){
                RouteUtil.jump2ChatPage(context);
              },),
            body: _buildRoot());
      }
    
      
        void cancelTimer() {
        if (_timer != null) {
          _timer.cancel();
          _timer = null;
        }
      }
    
      void startTimer() {
        //设置 1 秒回调一次
        const period = const Duration(seconds: 1);
        _timer = Timer.periodic(period, (timer) {
    
          //更新界面
          setState(() {
            //秒数减一,因为一秒回调一次
            seconds --;
    //        print('我在更新界面>>>>>>>>>>>>>> $seconds');
          });
          if (seconds == 0) {
            //倒计时秒数为0,取消定时器
            print('我被取消了  ');
            cancelTimer();
            getData();
          }
        });
      }
    
        void getData() async{
    
        await DioUtil.request("xxx",
          method: DioUtil.GET,
          ).then((res) {
            var time = res.orderExprieTime;
            if(time !=null){
              try{
                var _diffDate = DateTime.parse(time.toString());
                //获取当期时间
                var now = DateTime.now();
                var twoHours = _diffDate.difference(now);
                //获取总秒数,2 分钟为 120 秒
                seconds = twoHours.inSeconds;
                startTimer();
              }catch(e){
                seconds = 0;
              }
            }
          }
          loading = true;
          if(!mounted)return;
          setState(() {
          });
        }).catchError((e){
        });
      }
      
     @override
      void dispose() {
        super.dispose();
        cancelTimer();
      }
    }
    

    注意:一定要在dispose方法中销毁该定时器,不然会一只走下去的,其中countContent可以写在具体的text中,大概就是这样。

    更多文章查看个人主页:

    Github搭建个人博客(2019最新版,亲测)

    展开全文
  • jquery 实现年月日的倒计时,很简单,有需要的欢迎下载
  • //倒计时的小时 var sMin = ""; //倒计时的分钟 var sSec = ""; //倒计时的秒数 var sMsec = ""; //毫秒数 //通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零 function setDi
  • $(function(){var tYear = ""; //输入的年份var tMonth = ""; //输入的月份var tDate = ""; //输入的日期var iRemain = ""; //开始和结束之间相差的... //倒计时的小时var sMin = ""; //倒计时的分钟var sSec = "";...

    $(function(){

    var tYear = ""; //输入的年份

    var tMonth = ""; //输入的月份

    var tDate = ""; //输入的日期

    var iRemain = ""; //开始和结束之间相差的毫秒数

    var sDate = ""; //倒计的天数

    var sHour = ""; //倒计时的小时

    var sMin = ""; //倒计时的分钟

    var sSec = ""; //倒计时的秒数

    var sMsec = ""; //毫秒数

    //通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零

    function setDig(num,n){

    var str = ""+num;

    while(str.length

    str="0"+str

    }

    return str;

    }

    //获得相差的天,小时,分钟,秒

    function getdate(){

    //创建开始时间和结束时间的日期对象

    var oStartDate = new Date();

    var oEndDate = new Date();

    //获取文本框的值

    tYear = $("#tyear").val();

    tMonth = $("#tmonth").val();

    tDate = $("#tdate").val();

    //设置结束时间

    oEndDate.setFullYear(parseInt(tYear));

    oEndDate.setMonth(parseInt(tMonth)-1);

    oEndDate.setDate(parseInt(tDate));

    oEndDate.setHours(0);

    oEndDate.setMinutes(0);

    oEndDate.setSeconds(0);

    //求出开始和结束时间的秒数(除以1000)

    iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;

    //总的秒数除以一天的秒数,再取出整数部分,就得出有多少天。

    sDate = setDig(parseInt(iRemain/(60*60*24)),3);

    //总的秒数除以一天的秒数,然后取其中的余数,就是把整数天扣除之后,剩下的总秒数。

    iRemain %= 60*60*24;

    //剩下的总秒数除以一个小时的秒数,再取整数部分,就是有多少小时。

    sHour = setDig(parseInt(iRemain/(60*60)),2)

    //剩下的总秒数除以一个小时的秒数,再取其余数,这个余数,就是扣除小时这后,剩下的总秒数。

    iRemain %= 60*60;

    //剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。

    sMin = setDig(parseInt(iRemain/60),2)

    //剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。

    iRemain%=60;

    //剩下的秒数

    sSec = setDig(iRemain,2);

    //毫秒数

    sMsec = sSec*100;

    }

    //更改显示的时间

    function updateShow(){

    $(".showdate span").text(tYear+"-"+tMonth+"-"+tDate);

    $(".count span").each(function(index, element) {

    if(index==0){

    $(this).text(sDate);

    }else if(index==1){

    $(this).text(sHour);

    }else if(index == 2){

    $(this).text(sMin);

    }else if(index == 3){

    $(this).text(sSec);

    }else if(index == 4){

    $(this).text(sMsec);

    }

    });

    }

    //每一秒执行一次时间更新

    function autoTime(){

    getdate();

    //如果小于零,清除调用自己,并且返回

    if(iRemain<0){

    clearTimeout(setT);

    return;

    }

    updateShow();

    var setT = setTimeout(autoTime,1000);

    }

    //点击按钮开始计时

    $("button").click(function(){

    autoTime();

    })

    })

    昨天看了“妙味课堂”的倒计时视频,自己学着写了下。

    记录需要注意的地方:

    1.取模运算:

    iRemain %= 60*60*24;

    就是返回余数,在这个实例中的余数,就是把整数拿走后,剩下的秒数。

    2.工具函数 setDig(num,n)

    可以根据传入的参数,自动在传入的数字前加零

    DEMO(案例)下载:http://xiazai.jb51.net/yuanma/mydaojishi(jb51.net).rar

    以上就是本文的全部内容,希望对大家有所帮助,谢谢对聚米学院的支持!

    展开全文
  • js输入年月倒计时

    2021-02-20 18:06:50
    js输入年月倒计时 <html> <head> <meta charset="utf-8"> <title>js输入年月倒计时title> head> <body> 年"> 月"> 日"> 计时开始" onclick="leftTimer()"> <div id="timer">div> ...function leftTimer(year,month,...

    js输入年月日倒计时

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>js输入年月日倒计时</title>
    </head>
    <body>
    
    <input type="text" value="2021" id="year" placeholder="">
    <input type="text" value="" id="month" placeholder="">
    <input type="text" value="" id="day" placeholder="">
    <input type="button" value="计时开始" onclick="leftTimer()">
    <div id="timer"></div> 
    
    <script type="text/javascript">
    
    function leftTimer(year,month,day,hour,minute,second){ 
    			var Time = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数 
    			var days = parseInt(Time / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
    			var hours = parseInt(Time / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
    			var minutes = parseInt(Time / 1000 / 60 % 60, 10);//计算剩余的分钟 
    			var seconds = parseInt(Time / 1000 % 60, 10);//计算剩余的秒数 
    			days = checkTime(days); 
    			hours = checkTime(hours); 
    			minutes = checkTime(minutes); 
    			seconds = checkTime(seconds); 
    			var year=document.getElementById('year').value;
    			var month=document.getElementById('month').value;
    			var day=document.getElementById('day').value;
    			setInterval("leftTimer("+year+","+month+","+day+",00,00,00)",1000); //到00,00,00还剩多少时间
    			document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";  
    		} 
    		function checkTime(i){ //将0-9的数字前面加上0,例1变为01 
    			if(i<10) 
    			  { 
    			    i = "0" + i; 
    			  } 
    			  return i; 
    		}
    </script>
    </html>
    

    在这里插入图片描述

    以上为学习期间的学习笔记

    展开全文
  • 带剩余天数的年月倒计时,可应用在重大事件计时牌。 主控芯片是AT89C52
  • //年月日时分秒之差 public class MyDateTime { // private int year; // private int month; // private int day; private MyDate date; // private int hour; // private int minute; // private int second; ...

    1、

    //年月日时分秒之差
    public class MyDateTime {
    //    private int year;
    //    private int month;
    //    private int day;
        private MyDate date;
    //    private int hour;
    //    private int minute;
    //    private int second;
        private MyTime time;
    
        public MyDateTime(MyDateTime dateTime){
    
            this.date=new MyDate(dateTime.date);//深拷贝
            this.time=new MyTime(dateTime.time);
        }
    
        public MyDateTime(int year,int month,int day,int hour,int minute,int second){
            this.date=new MyDate(year,month,day);
            this.time=new MyTime(hour, minute, second);
        }
        //部分构造,只传年月日,时分秒默认设置成0时0分0秒
        public MyDateTime(int year,int month,int day){
            this(year,month,day,0,0,0);
        }
        public MyDateTime(MyDate date){
            this.date=new MyDate(date);
            this.time=new MyTime(0,0,0);
        }
    
        @Override
        public String toString() {
            return String.format("%s %s",date,time);
        }
    
        //向后走一秒
        public void nextSecond(){
            if (time.nextSecond()){
                date.nextDay();
            }
        }
        //向前走一秒
        public void preSecond(){
            if (time.preSecond()){
                date.preDay();
            }
        }
    }
    

    2、顺计时

    mport java.util.concurrent.TimeUnit;
    
    public class Test {
        public static void main(String[] args) throws InterruptedException {
            MyDateTime dateTime=new MyDateTime(2021,12,31,23,59,58);
            while (true){
                System.out.println(dateTime);
                dateTime.nextSecond();
                TimeUnit.SECONDS.sleep(1);
            }
        }
    }
    

    运行结果
    在这里插入图片描述
    3、倒计时

    import java.util.concurrent.TimeUnit;
    
    public class Test {
        public static void main(String[] args) throws InterruptedException {
            MyDateTime dateTime=new MyDateTime(2021,3,1,0,0,3);
    
    
            while (true){
                System.out.println(dateTime);
                dateTime.preSecond();
                TimeUnit.SECONDS.sleep(1);
            }
        }
    }
    

    运行结果
    在这里插入图片描述

    展开全文
  • React年月日时分秒倒计时实现

    千次阅读 2019-02-20 16:27:51
    //组件卸载取消倒计时 componentWillUnmount() { clearInterval(this.timer); } countFun = (time) => { let end_time = new Date(time).getTime(), sys_second = (end_time - new Date().getTime()); this...
  • jquery精确到年月日秒的动态倒计时插件downCount.js下载地址
  • 时间倒计时年月日 时分秒)

    千次阅读 2019-09-20 11:04:44
    <span id="year"></span> <script> realSysTime(year); function realSysTime(showyear) { var now = new Date(); //获取当前时间 var year = now.getFullYear();... var month =...
  • 闹钟、秒表、倒计时年月日(闰年自动计算)、星期 1602显示 4键
  • 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用。(用的是张鑫旭写的一个倒计时,稍作修改了下,原文:http://www.zhangxinxu.com/wordpress/?p=987) 用法: <div class="timer"> <....
  • 写个倒计时 年月日时分秒 private static long day = 0; private static long hour = 0; private static long minute = 0; private static long second = 0; private static boolean dayNotAlready = false; ...
  • 功能介绍:调用函数传入参数,返回 倒计时时间。 由于项目没有涉及年月,如有需要可进行扩展(直接复制看效果,时间获取的网络时间), 通用商城限时抢购,一级活动倒计时功能。 使用时,直接PourMeter(); 就ok了。...
  • 一、实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <body> <script> //获取当前时间距离截止时间的倒计时 ...
  • downtime.js /*!   * jQuery downtime plugin   * version 0.2   * Author: Rob Griffiths &lt;rob@bytespider.eu&gt; http://github.com/bytespider/downtime ... ...
  • 一个朋友提到这个问题,就随手写了一个,本以为很容易,却写了差不多半个小时,关键是年月的判断,现把代码贴出来供需要的朋友参考,也希望能看到大家的计算方法,先在WinForm窗体上放一个label控件(ID为lblShow) ...
  • 倒计时测试</title> </head> <body> <SCRIPT type="text/javascript"> <!-- var target=[] var time_id=[] function show_date_time_0(){ setTimeout("show_date_time_0()", 1000); for (var i=0,j=target...
  • 倒计时器-源码

    2021-02-16 00:18:41
    使用React和Moment.js的倒数计时器 该项目显示了两个倒数计时器示例-香草JS中的一个简单倒计时计时器,借助Moment.js库( ),更高级的计时器显示了剩余的年月。 观看现场演示: :
  • js倒计时(年月天小时分秒)

    千次阅读 2010-11-03 16:57:00
      <script type="text/javascript">  startclock()   var timerID = null;   var timerRunning = false;   function showtime() {  ... var endtime = "2010/...
  • 下面代码,只是实现了计时的效果,倒计时根据下面的代码轻微的改动即可 ... * Description TODO 实现年月日时分秒倒计时 * Created by BAI * Data 2017-07-12. */ public class TimeCountDownUtils { int yea...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 139
精华内容 55
关键字:

年月倒计时