<template>
<div class="countDownBox">
<div class="row resetStyle">
<div class="col col-xs-6 resetStyle height58">
<p style="line-height:29px;text-align:left;text-indent:20px;">Conference</p>
<p style="line-height:29px;text-align:left;text-indent:20px;">starts in</p>
</div>
<div class="col col-xs-6 resetStyle height58">
<span class="bigFont" style="font-size:50px;font-weight:bold;color:#ff8e44;">{{time.D}}</span>
<span style="color:#ff8e44;">&nbsp;days</span>
</div>
</div>
<div class="row resetStyle">
<div class="col col-xs-4 resetStyle height58">
<span class="bigFont">{{time.h}}</span>&nbsp;hrs
</div>
<div class="col col-xs-4 resetStyle height58">
<span class="bigFont">{{time.m}}</span>&nbsp;mins
</div>
<div class="col col-xs-4 resetStyle height58">
<span class="bigFont">{{time.s}}</span>&nbsp;secs
</div>
</div>
</div>
</template> <script>
export default {
data(){
return{
isEnd:false,//倒计时是否结束
endTime:'2022-09-21 00:00:00',//应为接口获取到的结束时间
time:{D:"0",h:"0",m:"0",s:"0"},//时间
}
},
created(){
var self=this;
self.setEndTime();
},
mounted(){ },
methods:{
setEndTime(){
var that = this;
       that.endTime=that.endTime.replace(/\-/g, "/"); //加这一行代码是为了兼容safari浏览器 因为safari浏览器根据字符串转换日期的时候支持"2016/05/31 08:00"这种格式 不支持"2016-05-31 08:00"这种格式
var interval = setInterval(function timestampToTime(){
var date = (new Date(that.endTime)) - (new Date()); //计算剩余的毫秒数
if(date <= 0){
that.isEnd = true;
clearInterval(interval)
}else{
that.time.D = parseInt(date / 1000 / 60 / 60 / 24 , 10);
that.time.h = parseInt(date / 1000 / 60 / 60 % 24 , 10);
if(that.time.h < 10){
that.time.h = "0" + that.time.h
}
that.time.m = parseInt(date / 1000 / 60 % 60, 10);//计算剩余的分钟
if(that.time.m < 10){
that.time.m = "0" + that.time.m
}
that.time.s = parseInt(date / 1000 % 60, 10);//计算剩余的秒数
if(that.time.s < 10){
that.time.s = "0" + that.time.s
}
that.time=Object.assign({},that.time)
return that.time;
}
},1000);
},
}
}
</script> <style scoped>
.countDownBox{
width:290px;
height:116px;
float: right;
margin-top:74px;
}
@media screen and (max-width: 990px) {
.countDownBox{
display: none;
}
}
@media screen and (min-width: 900px) { }
.resetStyle{
margin:0;
padding:0;
}
.height58{
height:58px;
line-height:58px;
text-align: center;
color:#34704c;
font-size:16px;
font-family: 'Courier New', Courier, monospace;
font-weight:600;
}
.bigFont{
font-size:40px;
}
</style>

vue中封装一个倒计时的更多相关文章

  1. vue中封装一个全局的弹窗js

    /** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...

  2. IOS中封装一个View的思路

    一.封装一个View的思路 1.将View内部的业务逻辑(显示内容)封装到View中 2.一般情况下,View的位置应该由父控件来决定,也就是位置不应该固定死在View内部 3.至于View的宽高,根 ...

  3. 项目开发中封装一个BarButtonItem类别-很实用

    Encapsulates a TabBarItem--封装一个BarButtonItem类 在我们程序的导航栏的左边或右边一般都会有这样的BarButtonItem,用来界面之间的跳转 如果我们有很多 ...

  4. vue中methods一个方法调用另外一个方法

    转自http://blog.csdn.net/zhangjing1019/article/details/77942923 vue在同一个组件内: methods中的一个方法调用methods中的另外 ...

  5. 使用vue.js封装一个包含图片的跑马灯组件

    初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...

  6. 使用better-scroll在vue中封装自己的Scroll组件

    1. better-scroll 原理 用一张图感受: 绿色部分为 wrapper,也就是父容器,它会有固定的高度.黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高 ...

  7. 在Lua中封装一个调试日志(附lua时间格式)

    --自己封装一个Debug调试日志 Debug={} Info={} local function writeMsgToFile(filepath,msg) end function Debug.Lo ...

  8. 在vue中写一个跟着鼠标跑的div,div里面动态显示数据

    1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...

  9. js中封装一个自己的简单数学对象

    封装一个数学对象求最大值最小值 <script> var myMath={ PI:3.1415926, max:function(){ var max=arguments[0];//注意a ...

随机推荐

  1. JS ES6中export和import详解

    1.Export 模块是独立的文件,该文件内部的所有的变量外部都无法获取.如果希望获取某个变量,必须通过export输出, // profile.js export var firstName = ' ...

  2. AJAX 调用WebService 、WebApi 增删改查

    WebService 页面: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3 ...

  3. Neo4J之标签类型

    Neo4J的标签可以理解一个类,在创建一个节点时可以设置一个或多个标签: 1. 标签名为中文(可以) CRATE(节点名:标签1:标签2{属性1:34} 创建了一个节点名为“节点名”的节点(不可以用节 ...

  4. 等保测评中与oracle有关的工作

    等保2.0包含硬件.存储.中间件.数据库各方面的安全规范,现把与Oracle数据库有关的内容整理如下,供参考: 一.安全计算环境 1.身份鉴别: a,应对登陆的用户进行身份标识和鉴别,身份标识具有唯一 ...

  5. 小程序npm构建

    npm initnpm install --productionnpm i  第三方组件名称  -S --production //重要

  6. SQL SERVER-JOB搬迁脚本

    选中JOB,按F7打开对象游览器: 选中相应的JOB,生成脚本. 搬迁JOB,新实例上要有相应的DB和操作员. 脚本中有2个@enabled,一个是job enable,一个是schedule是否生效 ...

  7. Android笔记(二十六) Android中的广播——BroadcastReceiver

    为了方便进行系统级别的消息通知,Android有一套类似广播的消息机制,每个应用程序都可以对自己感兴趣的广播进行注册,这样该程序就只会接收自己所关心的广播内容,这些广播可能是来自于系统,也可能是来自于 ...

  8. 15 Windows编程——系统内置窗口子类型之button

    button子类型BS_3STATE.BS_AUTO3STATE.BS_AUTOCHECKBOX 源码 #include<Windows.h> #include<Windowsx.h ...

  9. 美化WebApi,使其统一返回Json格式

    博客部分代码来自其他博主,暂时找不到你的博文连接,如果您觉得我的代码中引入了您的代码或者文章,可在下方把您的博客文章写在下面,谢谢!!! WebApi有两种返回数据格式,一种是XML,一种是Json, ...

  10. python中redis

    一.简介 二.redis的安装和使用 三.python操作readis之安装和支持存储类型 四.python操作redis值普通链接 五.python操作redis值连接池 六.操作之String操作 ...