Question

我正在开发一个为音乐会提供信息的网站。

我想为每场音乐会添加一个进度条。

我对如何组合MomentJS功能感兴趣。

我的第一个模板代码尝试如下：

var button;
var paragraph;
var score = 0
function incrementScore() {
score++
}
function setup() {

  createCanvas(100, 100);
  background(0);
  button = createButton('click me');
  button.position(19, 19);
  paragraph = createP(score)
  button.mousePressed(incrementScore);

}

如何实施此进度条？

Answer 1

我可以给你一个没有moment.js的解决方案。它使用js Date（）对象的数值来计算进度条宽度：

new Vue({
  el: '#app',
  data: {
    progressWidth: 0, // initial width = 0
    duration: 1 * 1000, // concert duration, ms
    start: (new Date()).valueOf() // valueOf returns number of ms -> easy calculations
  },
  computed: {
    end: function() { // when event finishes
      return this.start + this.duration;
    }
  },
  methods: {
    startEvent: function(start, end) {
      const int = setInterval(() => { // calculate width periodically
        const now = (new Date()).valueOf();
        if (now >= end) { // if finished
          this.progressWidth = 100;
          clearInterval(int); return;
        };
        this.progressWidth = ((now - start)/(end - start)) * 100;
      }, 10)
    }
  },
  mounted() {
    this.startEvent(this.start, this.end) // start event
  }
});

#progress-container {
  width: 500px;
  border: 1px solid black;
  height: 20px;
}

#progress {
  height: 100%;
  width: 0%;
  background-color: green
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div id="progress-container">
    <div id="progress" :style="{width: progressWidth + '%'}"></div>
  </div>
</div>

此处start应设置为new Date(Date.parse('Jun 18 2017 12:30:00'))。我相信moment.js中应该有相应的值，但我不确定你可以使用哪些值。

VueJS + MomentJS：如何确定时间进度

1 个答案: