javascript - Fitbit - 计时器 - 如何在应用程序中显示当前时间

Question

我正在尝试使用我的 fitbit 来帮助了解我更容易进入健身房的距离。使这更简单，因此解决方案更容易为人们提供帮助。
我正在使用 fitbit 和一些基本的 JS。
使用时钟 API，我可以创建一个计时器，但不能通过按钮触发。
即，这可以完成工作。

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";

import { display } from "display";

// Update the clock every minute
clock.granularity = "seconds";

// Get a handle on the <text> element
const ClockLabel = document.getElementById("timeLabel");
const Timer= document.getElementById("timerLabel");
const myButton = document.getElementById("button-1");
myButton.text = "button";

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  var Timing = 4*60*60
   let today = evt.date;
  var diff = Timing - ((today - start)/1000 |0);
  let hours  = (diff / 3600) | 0;
  let minutes = ((diff - (hours*3600)) / 60) | 0;
  let seconds = diff - (hours * 3600) - (minutes * 60)| 0;

  console.log("hours:"+hours+", minutes:"+minutes+", seconds:"+seconds);


  let hours = today.getHours();
  let minutes = today.getMinutes();
  let seconds = today.getSeconds();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  ClockLabel.text = `${hours}:${minutes}:${seconds}`;
}

但是，当从按钮触发时，它不起作用。

myButton.addEventListener("click", (evt) => {
  var start = Date.now()
//also this doesn't work let today = evt.date;

  myButton.text = "Started";
  
  
  var Timing = 4*60*60;
  var diff = Timing - ((Date.now() - start)/1000 |0);
  let hours  = (diff / 3600) | 0;
  let minutes = ((diff - (hours*3600)) / 60) | 0;
  let seconds = diff - (hours * 3600) - (minutes * 60)| 0;

  console.log("hours:"+hours+", minutes:"+minutes+", seconds:"+seconds);
    ClockLabel.text = `${hours}:${minutes}:${seconds}`;

});

这使我得出结论，使用此功能可能是更好的前进方式。

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
      'hours': (seconds / 3600)|0,
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};



export default CountDownTimer;

Answer 1

根据您的问题:如何在申请中显示当前时间？... 在大多数情况下，您的代码看起来不错。
获取当前时间，正常js date ref from FitBit
恕我直言，您有几个选择1 ) 使用 tick事件 API 或 2 ) 使用来自 Fitbit Studio 的示例时钟应用程序并使用您的代码对其进行自定义。
最后，我在最后添加了一些自定义代码来帮助您更新格式/显示/标签，请根据您的需要进行调整..

option 1 Tick Event Approach: For e.g. option with clock face to get the current time you need to use the date API or the the tick event which contains the date object as the picture, it also saves you battery life!

option 2 Modify Sample Approach: Take the sample getting started app and modify it ref sample to help you and the below sample

           1. Recommended: you can follow the sample https://dev.fitbit.com/getting-started/

           2. There are three files you can peek/update/play around 

           3. Move your crunching code here -> Apps>index.js

           4. Plan/put on the UI/Face   ->         Resource>index.gui

           5. Modify styles via css, font etc. here  -> Resource>styles.css


  let day = today.getDate(); // and the get the time from there. or tick event

现在你的格式你的时间问题

this below code also has some boilerplate to wire up and help you with the display please modify as per your needs

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";

//import { me as appbit } from "appbit";
import { display } from "display";
//import * as messaging from "messaging";

// Update/Display the text, get a handle on the <text> element
const timeLabel = document.getElementById("timeLabel");
const dateLabel = document.getElementById("dateLabel");

// just threw this in for your ** Medication.. you need to configure/add it
// const MedicationReminder = document.getElementById("MedicationLabel");


clock.granularity = "seconds";
// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();

if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}

let minutes = util.zeroPad(today.getMinutes());
let seconds = util.zeroPad(today.getSeconds());

let day = util.zeroPad(today.getDate());
let month = util.zeroPad(today.getMonth() + 1);
let year = today.getFullYear();

// update like so
timeLabel.text = `${hours}:${minutes}:${seconds}` ;


  function setDateDisplay(obj, d, m, y, format) {
  
  let date;
  if(format) {
    date = `${m}/${d}/${y}`;
  }
  else {
    date = `${d}/${m}/${y}`;
  }
  
  obj.text = date;
  settings.USDateFormat = format;
  }