简单的滚动效果

TimeredCounter 提供了下列组件，他们用于滚动不同类型的数据：

timered-counter-number：number，bigint
timered-counter-datetime-duration：Date
timered-counter-string：string

仅使用默认的配置，即可获得一个看起来不错的滚动效果。

TIP

点击按钮，观察数值的改变。

使数字滚动

想像一下，现实生活中的水表，它会不断地滚动，显示当前的用水量。TimeredCounter 可以帮助你实现这样的效果。

使数字滚动

点击查看代码

HTMLJSAll

html

<div class="text-center">
  <timered-counter-number id="basic-number-counter" initial-value="114511" />
</div>
<hr />
<div class="flex gap-4">
  <input class="border border-solid p-1" v-model="number" />
  <button class="border border-solid px-2 py-1" @click="switchNumber">🔄</button>
</div>

import {onMounted, ref, watch} from "vue";

const number = ref(114514);
function switchNumber() {
  number.value = Math.floor(Math.random() * 1000000);
}

onMounted(() => watch([number], update, { immediate: true }));
function update() {
  const _number = number.value;

  const counter = document.getElementById('basic-number-counter');
  counter.value = _number;
}

vue

<script setup>
// #region js
import {onMounted, ref, watch} from "vue";

const number = ref(114514);
function switchNumber() {
  number.value = Math.floor(Math.random() * 1000000);
}

onMounted(() => watch([number], update, { immediate: true }));
function update() {
  const _number = number.value;

  const counter = document.getElementById('basic-number-counter');
  counter.value = _number;
}
// #endregion js
</script>

<template>
<!-- #region html -->
  <div class="text-center">
    <timered-counter-number id="basic-number-counter" initial-value="114511" />
  </div>
  <hr />
  <div class="flex gap-4">
    <input class="border border-solid p-1" v-model="number" />
    <button class="border border-solid px-2 py-1" @click="switchNumber">🔄</button>
  </div>
<!-- #endregion html -->
</template>

<style scoped></style>

倒计时效果

我相信你已经见过很多的倒计时，但大部分的变化是生硬的，没有过渡。TimeredCounter 可以让你的倒计时效果更加平滑。

倒计时效果

时间范围精度 ~

点击查看代码

HTMLJSAll

html

<div class="text-center">
  <timered-counter-datetime-duration id="basic-datetime-duration-counter" />
</div>
<hr />
<div class="flex gap-4">
  <div>
    <input
      class="border border-solid p-1"
      v-model="from"
      type="datetime-local"
    />
    ~
    <input
      class="border border-solid p-1"
      v-model="to"
      type="datetime-local"
    />
  </div>
</div>
<div class="flex gap-4 mt-4">
  <label>
    时间范围精度
    <select
      class="border border-solid p-1 appearance-auto"
      v-model="precision[0]"
    >
      <option
        v-for="partType in durationPartTypes"
        :key="partType"
        :value="partType"
      >
        {{ partType }}
      </option>
    </select>
    ~
    <select
      class="border border-solid p-1 appearance-auto"
      v-model="precision[1]"
    >
      <option
        v-for="partType in durationPartTypes.filter(
          (part) =>
            DurationPartMillisecond[part] >=
            DurationPartMillisecond[precision[0]]
        )"
        :key="partType"
        :value="partType"
      >
        {{ partType }}
      </option>
    </select>
  </label>
</div>

import {onMounted, ref, watch} from "vue";
import { DurationPartType, DurationPartMillisecond } from "timered-counter";

const from = ref("2024-12-01T00:00:00");
const to = ref("2024-12-31T00:05:30");

const precision = ref([DurationPartType.Second, DurationPartType.Day]);
const durationPartTypes = ref([
  DurationPartType.Year,
  DurationPartType.Quarter,
  DurationPartType.Month,
  DurationPartType.Week,
  DurationPartType.Day,
  DurationPartType.Hour,
  DurationPartType.Minute,
  DurationPartType.Second,
]);

onMounted(() => watch([from, to, precision], update, { immediate: true }));
function update() {
  const _from = from.value;
  const _to = to.value;
  const _precision = precision.value;

  const counter = document.getElementById('basic-datetime-duration-counter');
  counter.value = [_from, _to];
  counter.precision = [..._precision];
}

vue

<script setup>
// #region js
import {onMounted, ref, watch} from "vue";
import { DurationPartType, DurationPartMillisecond } from "timered-counter";

const from = ref("2024-12-01T00:00:00");
const to = ref("2024-12-31T00:05:30");

const precision = ref([DurationPartType.Second, DurationPartType.Day]);
const durationPartTypes = ref([
  DurationPartType.Year,
  DurationPartType.Quarter,
  DurationPartType.Month,
  DurationPartType.Week,
  DurationPartType.Day,
  DurationPartType.Hour,
  DurationPartType.Minute,
  DurationPartType.Second,
]);

onMounted(() => watch([from, to, precision], update, { immediate: true }));
function update() {
  const _from = from.value;
  const _to = to.value;
  const _precision = precision.value;

  const counter = document.getElementById('basic-datetime-duration-counter');
  counter.value = [_from, _to];
  counter.precision = [..._precision];
}
// #endregion js
</script>

<template>
<!-- #region html -->
  <div class="text-center">
    <timered-counter-datetime-duration id="basic-datetime-duration-counter" />
  </div>
  <hr />
  <div class="flex gap-4">
    <div>
      <input
        class="border border-solid p-1"
        v-model="from"
        type="datetime-local"
      />
      ~
      <input
        class="border border-solid p-1"
        v-model="to"
        type="datetime-local"
      />
    </div>
  </div>
  <div class="flex gap-4 mt-4">
    <label>
      时间范围精度
      <select
        class="border border-solid p-1 appearance-auto"
        v-model="precision[0]"
      >
        <option
          v-for="partType in durationPartTypes"
          :key="partType"
          :value="partType"
        >
          {{ partType }}
        </option>
      </select>
      ~
      <select
        class="border border-solid p-1 appearance-auto"
        v-model="precision[1]"
      >
        <option
          v-for="partType in durationPartTypes.filter(
            (part) =>
              DurationPartMillisecond[part] >=
              DurationPartMillisecond[precision[0]]
          )"
          :key="partType"
          :value="partType"
        >
          {{ partType }}
        </option>
      </select>
    </label>
  </div>
<!-- #endregion html -->
</template>

<style scoped></style>

字符串也可以滚动

看到首页上那个会动的标题了吗？在静态网页上，这样的效果会让你的页面更加生动。

TIP

请注意，默认配置下最长支持 14～15 个字符。如果你需要更多的字符长度，请参阅如何解除字符长度限制。

字符串滚动

点击查看代码

HTMLJSAll

html

<div class="text-center">
  <timered-counter-string id="basic-string-counter" value="Hello, World!"  />
</div>
<hr />
<div class="flex gap-4">
  <input class="border border-solid p-1" v-model="string" />
  <button class="border border-solid px-2 py-1" @click="switchString">🔄</button>
</div>

import {onMounted, ref, watch} from "vue";

const string = ref("Hello, World!");

const strings = [
  "Hello, World!",
  "你好，世界！",
  "こんにちは、世界！",
  "안녕하세요, 세계!",
  // 太长了
  // "Bonjour, le monde!",
  "Hallo, Welt!",
  "Ciao, mondo!",
  "Olá, mundo!",
  "Привет, мир!",
  "¡Hola, mundo!",
  "Hej, världen!",
  "Merhaba, Dünya!",
  "مرحبا بالعالم!",
  "שלום, עולם!",
  "नमस्ते, दुनिया!",
  "سلام دنیا!",
];

let stringIndex = 0;
function switchString() {
  stringIndex = (stringIndex + 1) % strings.length;
  string.value = strings[stringIndex];
}

onMounted(() => watch([string], update, { immediate: true }));
function update() {
  const _string = string.value;

  const counter = document.getElementById('basic-string-counter');
  counter.value = _string;
}

vue

<script setup>
// #region js
import {onMounted, ref, watch} from "vue";

const string = ref("Hello, World!");

const strings = [
  "Hello, World!",
  "你好，世界！",
  "こんにちは、世界！",
  "안녕하세요, 세계!",
  // 太长了
  // "Bonjour, le monde!",
  "Hallo, Welt!",
  "Ciao, mondo!",
  "Olá, mundo!",
  "Привет, мир!",
  "¡Hola, mundo!",
  "Hej, världen!",
  "Merhaba, Dünya!",
  "مرحبا بالعالم!",
  "שלום, עולם!",
  "नमस्ते, दुनिया!",
  "سلام دنیا!",
];

let stringIndex = 0;
function switchString() {
  stringIndex = (stringIndex + 1) % strings.length;
  string.value = strings[stringIndex];
}

onMounted(() => watch([string], update, { immediate: true }));
function update() {
  const _string = string.value;

  const counter = document.getElementById('basic-string-counter');
  counter.value = _string;
}

// #endregion js
</script>

<template>
<!-- #region html -->
  <div class="text-center">
    <timered-counter-string id="basic-string-counter" value="Hello, World!"  />
  </div>
  <hr />
  <div class="flex gap-4">
    <input class="border border-solid p-1" v-model="string" />
    <button class="border border-solid px-2 py-1" @click="switchString">🔄</button>
  </div>
<!-- #endregion html -->
</template>

<style scoped></style>

下一步

要了解如何设置语言敏感的数字格式，日期和时间格式，请查看本地化。
如果想自定义组件外观或过渡动画，请查看自定义样式和自定义动画。

简单的滚动效果 ​

使数字滚动 ​

倒计时效果 ​

字符串也可以滚动 ​

下一步 ​

简单的滚动效果

使数字滚动

倒计时效果

字符串也可以滚动

下一步