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.
 
 
 
 
 

67 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. props: {
  11. initialTime: Number
  12. },
  13. data () {
  14. return {
  15. currentTime: this.initialTime,
  16. timerIntervalId: null
  17. }
  18. },
  19. methods: {
  20. startTimer: function () {
  21. this.stopTimer()
  22. this.timerIntervalId = setInterval(() => {
  23. if (this.currentTime === 0) {
  24. this.stopTimer()
  25. } else {
  26. this.currentTime--
  27. }
  28. }, 1000)
  29. },
  30. stopTimer: function () {
  31. clearInterval(this.timerIntervalId)
  32. },
  33. setTime: function (time) {
  34. this.currentTime = time
  35. }
  36. },
  37. computed: {
  38. seconds: function () {
  39. return (this.currentTime % 60).toLocaleString('en', {minimumIntegerDigits: 2})
  40. },
  41. minutes: function () {
  42. let minutes = Math.floor(this.currentTime / 60) % 60
  43. return this.displayHours > 0
  44. ? minutes.toLocaleString('en', {minimumIntegerDigits: 2})
  45. : minutes
  46. },
  47. hours: function () {
  48. return (Math.floor(this.currentTime / 3600) % 24)
  49. },
  50. displayMinutes: function () {
  51. return this.minutes > 0 || this.hours > 0
  52. },
  53. displayHours: function () {
  54. return this.hours > 0
  55. }
  56. },
  57. mounted () {
  58. this.startTimer()
  59. }
  60. }
  61. </script>
  62. <style scoped>
  63. </style>