uni-app:实现时钟自走(动态时钟效果)

这篇具有很好参考价值的文章主要介绍了uni-app:实现时钟自走(动态时钟效果)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果

uni-app:实现时钟自走(动态时钟效果),uni-app,uni-app

核心代码

  • 使用钩子函数 mounted(),设置定时器,是指每秒都要去执行时间的获取,以至于实现时间自走的效果

 mounted() {
    this.updateTime(); // 初始化时间
    setInterval(this.updateTime, 1000); // 每秒更新时间
  },

  •  自定义方法updateTime去获取当前时间,并设置数据

updateTime() {
      const date = new Date();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      this.currentTime = `${hours}:${minutes}:${seconds}`; 
 }

完整代码

<template>
  <view class="time-container">
    <view>{{ currentTime }}</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentTime: '' // 当前时间
    };
  },
  mounted() {
    this.updateTime(); // 初始化时间
    setInterval(this.updateTime, 1000); // 每秒更新时间
  },
  methods: {
    updateTime() {
      const date = new Date();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      this.currentTime = `${hours}:${minutes}:${seconds}`; 
    }
  }
};
</script>
<style>
.time-container {
  text-align: center;
  font-size: 24px;
}

</style>

 文章来源地址https://www.toymoban.com/news/detail-721294.html

到了这里,关于uni-app:实现时钟自走(动态时钟效果)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app使用uview-ui实现动态更改底部tabbar

    需求:根据不同的权限(用户 0, 物业 1)展示不同的tabbar 这里使用的是uview-ui@1.8.4 tabbar 在utils文件夹下新建一个tabbar.js文件,来存储不同权限下的底部导航数据 在page.json文件里,把tabbar里的几个页面去重放进去tabBar。 使用vuex 新建store 文件夹存储相关数据 在入口文件 mai

    2024年02月12日
    浏览(56)
  • uni-app中实现弹幕的滚动效果

    在uni-app中实现弹幕的滚动效果,可以通过以下步骤实现: 在页面中创建一个容器,用于显示弹幕内容。可以使用 view 标签或者其他适合的标签作为容器。 使用CSS样式设置容器的位置和样式,例如设置 position: fixed 使其固定在页面上的某个位置,设置 overflow: hidden 隐藏超出容

    2024年01月21日
    浏览(49)
  • 使用 v-for 指令和数组来实现在 Uni-app 中动态增减表单项并渲染多个数据

    在 data 中定义一个数组,用于存储表单项的数据: 在模板中使用 v-for 指令渲染表单项: 在 methods 中定义添加和删除表单项的方法: 这样,每点击一次 “添加表单项” 按钮,就会新增一个表单项,并且你可以通过输入框的 v-model 来动态修改表单项的值。点击对应的 “删除”

    2024年02月10日
    浏览(39)
  • uni-app小程序中做页面滚动底部或顶部加载效果

    在移动应用开发中,无限滚动加载是一个常见的功能,用户可以通过滑动屏幕来加载更多的内容,从而提高应用的用户体验。本文将介绍如何使用Uniapp实现无限滚动加载的功能。 概述 我们需要实现的无限滚动加载功能的具体效果如下: 当用户滑动到底部时,自动加载更多的

    2024年02月08日
    浏览(76)
  • uni-app动态修改导航栏标题

    对导航栏标题进行修改,直接使用就可以 动态修改标题名称,数据可能是从上一个页面传递过来的,直接在 onLoad 页面周期函数中使用 ⚠️可能会出现在网页中切换标题正常,但是在真机中没有效果,通过查看官网看到这么一句话 如果需要在页面进入时设置标题,可以在

    2024年02月05日
    浏览(61)
  • 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2023年04月18日
    浏览(77)
  • 【第四趴】uni-app页面导航栏配置(掌握页面导航栏背景颜色、文字等效果配置)

    聚沙成塔——每天进步一点点,大家好我是几何心凉,不难发现越来越多的前端招聘JD中都加入了uni-app 这一项,它也已经成为前端开发者不可或缺的一项技能了,所以凉哥为大家推出 聚沙成塔【45天玩转uni-app】 专栏,帮助大家对 uni-app 进行学习和理解,uni-app可以通过一套代

    2024年02月01日
    浏览(38)
  • uni-app自定义多环境配置,动态修改appid

    在企业级项目开发中,一般都会分为开发、测试、预发布、生产等多个环境,在工程化中使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题,比如接口请求地址,不同环境的请求路径前缀都是不同的。在使用 uni-app 开发项目时,一般都是选择使用

    2024年02月12日
    浏览(40)
  • uni-app动态tabBar,根据不同用户展示不同的tabBar

    因为我们用的是uni-app框架开发,所以在创建项目的时候直接创建uni-ui的项目即可,这个项目模板中自带了uni的一些好用的组件和api。 起初我想着这个效果不难实现,因为官方也有api可以直接使用,所以我最开始尝试就是使用uni的api完成,也就是这个 :uni.setTabBarItem(options) 我

    2024年02月09日
    浏览(51)
  • 【uni-app】uni-app实现聊天页面功能——功能篇(上)

    上一篇讲到了如何布局,这一篇将讲一下如何用uni-app实现小程序聊天页面的最主要的功能——发消息后页面滚动到最底部(参考过很多文章最后找到比较适合的方法)。 其他的功能(参考微信),之后的文章会讲述到具体实现方法 点击聊天框的时候,聊天框随键盘抬起且聊

    2024年02月11日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包