用php做动态时钟,vue实现动态时钟以及日期

最近一直在做大屏幕软件的开发工作，发现这个时钟这个需求经常用到，虽然也不难，但为了以后再遇到这种需求不重复造轮子，所以写在博客记录一下，下次再遇到，嘿嘿，直接复制就完事了。其实实现动态时钟简单的来说应该是写一个定时器，每秒去获取系统时间，然后再更新，就达到了时间一直在走的效果了。

上面就是我需要用到这种需求的场景，也就是实时更新时间嘛。

export default{

data(){

return{

date: '',

time: '',

}

mounted() {

this.getdate();

this.timer = setInterval(() => {

this.getdate();

}, 3000)

methods:{

getdate: function() {

let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

let time = new Date();

let year = time.getFullYear();

let month = time.getMonth() + 1;

let day = time.getDate();

let week = weeks[time.getDay()];

this.getTime();

this.date = year + '/' + month + '/' + day + " " + week;

getTime: function() {

let time = new Date();

let hour = time.getHours();

let minutes = time.getMinutes();

if(minutes<10){

minutes='0'+minutes

}

this.time = hour + "：" + minutes

}

从代码可以很简单的看出有两个变量，time代表时间；date代表日期。

用php做动态时钟,vue实现动态时钟以及日期相关推荐

vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性
vue基础-动态class.动态style.vue过滤器.vue计算属性文章目录 vue基础-动态class.动态style.vue过滤器.vue计算属性 vue基础-动态class vue基础-动 ...
vue将每个路由打包成html,Ant Design Vue pro 动态路由的实现和打包
Ant Design Vue pro 动态路由的实现和打包 Ant Design Vue pro 动态路由的实现和打包配置路由权限在config文件夹下router.config.js中配置路由权 ...
Vue之如何动态渲染.vue文件
动态渲染.vue文件其实存在于很多地方,例如近期做的表单设计器就是其中一个,生成vue代码后,应用在其它地方.要求下载完vue文件在其它项目中引入即可使用.那么动态渲染.vue项目如何去做呢? 1. ...
辉光管电子时钟DIY记录-动态扫描驱动方式
辉光管电子时钟DIY记录-动态扫描驱动方式以下内容是辉光管扫盲知识(备注:来源于百度百科),了解的可以跳过. 简介辉光放电管,亦称"冷阴极离子管"或"冷阴极充气管&q ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
后盾网lavarel视频项目---vue实现动态添加和删除板块
后盾网lavarel视频项目---vue实现动态添加和删除板块一.总结一句话总结: 原理就是:列表时根据vue中的videos变量中的元素来遍历的,初始时videos:[{title:'',pat ...
vue require动态路径图片报错_Vue 动态生成路由结构
通常我们比较常用的vue组件加载方式就是通过import引入文件,如:路由懒加载 .静态的import. 一般情况下还是推荐使用import方式引入的,因为这更容易从Tree_shaking 及一些分 ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
Vue.js 动态为img的src赋值
在vue中动态给src赋值绑定图片会显示不出来动态添加src被当做静态资源处理了,没有进行编译解决方法: 1.用网络地址把图片放在cdn或自己的服务器上,把网络地址存在imgUrl里,然后直接& ...
[vue] 动态给vue的data添加一个新的属性时会发生什么？怎样解决？
[vue] 动态给vue的data添加一个新的属性时会发生什么?怎样解决? 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如果想要使添加的值做到响应式,应当使用$set()来添加对象. ...

用php做动态时钟,vue实现动态时钟以及日期

用php做动态时钟,vue实现动态时钟以及日期相关推荐

最新文章

热门文章