*初级小白*~ 2023-03-27 18:45 采纳率: 97.9%
浏览 39
已结题

关于#javascript#的问题:表格中的倒计时,如何结束时间endTime减去现在时间

表格中的倒计时,如何结束时间endTime减去现在时间,得出还剩几天几时几分钟几秒


<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'name'">
        <a>{{ text }}</a>
      </template>
      <template v-if="column.dataIndex === 'time'">
        <a>{{ text }}</a>
      </template>
    </template>
  </a-table>
</template>
<script>
import { defineComponent } from 'vue';
const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    time:'2023-4-1 00:00:00'
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    time:'2023-5-1 00:00:00'
  },
]

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title:'倒计时',
    dataIndex:'time',
    key:'time'
  }
]
export default defineComponent({
  setup() {
  
    return {
      dataSource,
      columns,
    };
  },
});
</script>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2023-03-27 20:55
    关注

    计时器定时更新

    <template>
        <a-table :columns="columns" :data-source="dataSource">
            <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'name'">
                    <a>{{ text }}</a>
                </template>
                <template v-if="column.dataIndex === 'time'">
                    <a>{{ getCountdownStr(text) }}</a>
                </template>
            </template>
        </a-table>
    </template>
    <script>
        import { defineComponent ,ref} from 'vue';
        const dataSource = [
            {
                key: '1',
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号',
                time: '2023-4-1 00:00:00'
            },
            {
                key: '2',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号',
                time: '2023-5-1 00:00:00'
            },
            {
                key: '2',
                name: '胡彦祖过期',
                age: 42,
                address: '西湖区湖底公园1号',
                time: '2023-3-1 00:00:00'
            }
        ]
    
    
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '住址',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '倒计时',
                dataIndex: 'time',
                key: 'time'
            }
        ]
        export default defineComponent({
            mounted() {
                setInterval(() => {
                    this.currentTime.cur = Date.now();
                }, 1000);
            },
            setup() {
                const currentTime = ref({ cur:  Date.now() });
               // const dataSource = ref(data);
                const getCountdownStr = (time) => {
                    time = new Date(time.replace(/-/g, '/'));
                    let sec = Math.ceil((time.getTime() - currentTime.value.cur) / 1000);
                    if (sec <= 0) return '0天0时0分钟0秒';
    
                    let day = Math.floor(sec / 24 / 3600);
                    sec -= day * 24 * 3600;
                    let hour = Math.floor(sec / 3600);
                    sec -= hour * 3600;
                    let minute = Math.floor(sec / 60);
                    sec -= minute * 60;
                    return `${day}${hour}${minute}${sec}秒`
                }
                return {
                    dataSource,
                    columns,
                    getCountdownStr,
                    currentTime
                };
            },
        });
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月6日
  • 已采纳回答 3月29日
  • 创建了问题 3月27日

悬赏问题

  • ¥15 wpf界面一直接收PLC给过来的信号,导致UI界面操作起来会卡顿
  • ¥15 init i2c:2 freq:100000[MAIXPY]: find ov2640[MAIXPY]: find ov sensor是main文件哪里有问题吗
  • ¥15 运动想象脑电信号数据集.vhdr
  • ¥15 三因素重复测量数据R语句编写,不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒