Timers and other features for Heroes of the Storm
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 
 

64 lignes
1.5 KiB

  1. <template>
  2. <div class="timer">
  3. <span v-if="displayHours">{{ hours }}:</span><span v-if="displayMinutes">{{ minutes }}</span><span>:{{ seconds }}</span>
  4. </div>
  5. </template>
  6. <script>
  7. 'use strict'
  8. export default {
  9. name: 'Timer',
  10. data () {
  11. return {
  12. currentTime: this.$attrs.initialTime,
  13. timerIntervalId: null
  14. }
  15. },
  16. methods: {
  17. startTimer: function () {
  18. this.stopTimer()
  19. this.timerIntervalId = setInterval(() => {
  20. if (this.currentTime === 0) {
  21. this.stopTimer()
  22. } else {
  23. this.currentTime--
  24. }
  25. }, 1000)
  26. },
  27. stopTimer: function () {
  28. clearInterval(this.timerIntervalId)
  29. },
  30. setTime: function (time) {
  31. this.currentTime = time
  32. }
  33. },
  34. computed: {
  35. seconds: function () {
  36. return (this.currentTime % 60).toLocaleString('en', {minimumIntegerDigits: 2})
  37. },
  38. minutes: function () {
  39. let minutes = Math.floor(this.currentTime / 60) % 60
  40. return this.displayHours > 0
  41. ? minutes.toLocaleString('en', {minimumIntegerDigits: 2})
  42. : minutes
  43. },
  44. hours: function () {
  45. return (Math.floor(this.currentTime / 3600) % 24)
  46. },
  47. displayMinutes: function () {
  48. return this.minutes > 0 || this.hours > 0
  49. },
  50. displayHours: function () {
  51. return this.hours > 0
  52. }
  53. },
  54. mounted () {
  55. this.startTimer()
  56. }
  57. }
  58. </script>
  59. <style scoped>
  60. </style>