vue 手写倒计时,样式需要自己调。( 亲测可用,就是没有样式 )
先写一个 js 文件,这个文件是工具类文件,需要单独开一个js
// 计算出时间戳的具体数据:比如将85400转化为 n天n时n分n秒
export function formateTimeStamp(timeStamp) {
var day;
var hour;
var min;
var seconds; day = parseInt(timeStamp / (24 * 60 * 60)) // 计算整数天数
var afterDay = timeStamp - day * 24 * 60 * 60 // 取得算出天数后剩余的秒数
hour = parseInt(afterDay / (60 * 60)) // 计算整数小时数
var afterHour = timeStamp - day * 24 * 60 * 60 - hour * 60 * 60 // 取得算出小时数后剩余的秒数
min = parseInt(afterHour / 60) // 计算整数分
seconds = parseInt(timeStamp - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60) // 取得算出分后剩余的秒数 if (day < 10) {
day = '0' + day;
} if (hour < 10) {
hour = '0' + hour
}; if (min < 10) {
min = '0' + min;
} if (seconds < 10) {
seconds = '0' + seconds;
} const restStamp = {
day: day,
hour: hour,
min: min,
seconds: seconds
}
return restStamp
}
template 部分,就一行代码
//获取时间并转换成秒
getTime(time){
var date = new Date(time)
this.startTime = date.getTime() / 1000 ;
}, getTime1(time){
this.endTime = '' //将分钟转换成 天 - 小时 - 分
var day1 = parseInt(time/60/24);
var hour1 = parseInt(time/60%24);
var min1 = parseInt(time % 60) var date = new Date()
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); day = day + day1
hour = hour + hour1 minute = minute + min1 if(minute > 60 ){
hour = hour + 1
minute = minute - 60
} if(hour > 24){
day = day + 1
hour = hour - 24
} var currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
var date2 = new Date(currentTime)
this.endTime = date2.getTime() / 1000 ; }, // 获得距离活动开始还剩余的时间
mistiming () { // var timeStamp = this.infos.activity.end_at - this.infos.activity.start_at;
// 本地时间转换成秒 - 减去传进来的时间转换成秒
var timeStamp = this.endTime - this.startTime ;
this.times = formateTimeStamp(timeStamp);
const str = `<span>${this.times.day}</span>天<span>${this.times.hour}</span>时<span>${this.times.min}</span>分<span>${this.times.seconds}</span>秒`
this.countTxt = str;
var TimeDown = setInterval(() => {
if (timeStamp > 0) {
timeStamp--;
const newTime = formateTimeStamp(timeStamp);
const str = `<span>${newTime.hour}</span>时<span>${newTime.min}</span>分<span>${newTime.seconds}</span>秒`
this.countTxt = str;
} else {
this.countTxt = '考试已结束'
this.$message.success("考试已结束,试卷自动提交。")
clearInterval(TimeDown);
}
}, 1000)
},
// 找个方法 或者 和后端请求回来的时间 放在一起
var date = new Date() // 时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear()
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '')
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); this.froms.startTime = Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s; this.getTime( this.froms.startTime )
this.getTime1( this.form.time )
this.mistiming(); // 注: this.froms.startTime this.form.time 这俩个变量需要自己创建
vue 手写倒计时,样式需要自己调。( 亲测可用,就是没有样式 )的更多相关文章
- google vue开发调试插件,简便安装,亲测可用
前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...
- dataTable 加了竖向滚动条导致列头样式错位的问题 / 亲测可用,不好用你打我,用好了记得点推荐
tab在没有显示之前,容器是没有高度宽度的,而dt在自动计算高度和宽度时是获取的外部容器的高度和宽度,当切换tab时,dt获取不到这个高度宽度,导致列头都挤在一起,是用下面代码解决此问题 $('a[d ...
- vue图片上传及java存储图片(亲测可用)
1.前言 在使用elementui的upload组件时,我一直无法做到上传的图片和其他数据一起提交.单纯的上传文件,java的存储图片的方式也有局限性. 我知道的后端保存图片有两种方式:一种是直接存储 ...
- 阿里云服务器centos7,docker部署mysql+Redis+vue+springboot+Nginx+fastdfs,亲测可用
一.购买云服务器 我是今年双十一期间在阿里云购买的服务器, 简单配置2核_4G_40G_3M,三年用了不到800块,不过当时我记得腾讯云更便宜,个人感觉,阿里的云服务器更加的稳定, 毕竟身经百战, 经 ...
- 基于vue手写tree插件那点事
目录 iview提供的控件 手写控件 手写控件扩展 手写控件总结 # 加入战队 微信公众号 主题 Tree树形控件在前端开发中必不可少,对于数据的展示现在网站大都采取树形展示.因为大数据全部展示出来对 ...
- vue手写的轮播图片,解决已经修改data中的值,页面标签已绑定,但页面没效果
1.效果 2.index.html <!DOCTYPE html> <html lang="en"> <link> <meta chars ...
- vue手写轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 手写组件 集合
Num.1 : 链接 向右滑动, 显示删除按钮, 根据touchStart touchEnd 的 clientX 差距 > 30; 说明是向左滑动, 显示; 改变 e.currentTarg ...
- 基于Vue手写一个下拉刷新
当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具 ...
随机推荐
- 用postman进行web端自动化测试
概括说一下,web接口自动化测试就是模拟人的操作来进行功能自动化,主要用来跑通业务流程. 主要有两种请求方式:post和get,get请求一般用来查看网页信息:post请求一般用来更改请求参数,查看结 ...
- 🔥 LeetCode 热题 HOT 100(1-10)
1. 两数之和 思路一:暴力遍历所有组合 class Solution { public int[] twoSum(int[] nums, int target) { for (int i = 0; ...
- js 调用json
url = "/plus/API/"; try { // 此处是可能产生例外的语句 } catch(error) { // 此处是负责例外处理的语句 } finally { // ...
- 如何给html元素的onclick事件传递参数即如何获取html标签的data
某些非text元素,如a.button等用于触发时间的标签可已将要传的数据放在一个属性中,如data,这个属性必须是不影响样式的,可以使用任意非html定义的名字命名属性,然后将数据传到属性中, &l ...
- Java进阶 | 从整体上观察面向对象
一.面向对象 面向对象是Java编程中最核心的思想,基本特征:继承.封装.多态. 1.特征之封装 将结构.数据.操作封装在对象实体中,使用时可以不关注对象内部结构,只能访问开放权限的功能入口,从而降低 ...
- BUU八月份水题记录
目录 [BJDCTF 2nd]fake google(SSTI) [BJDCTF2020]Easy MD5(md5注入) [ZJCTF 2019]NiZhuanSiWei(反序列化) [BJDCTF ...
- Bugku-web-秋名山老司机
计算式子的值然后使用post方法传值.直接脚本跑. import requestsimport reurl = "http://123.206.87.240:8002/qiumingshan ...
- 网安日记④之搭建域环境(domain)并且配置域
搭建域环境(domain)并且配置域 什么是域 域就是将多台计算机在逻辑上组织到一起,进行集中管理,也就是创建在域控制器上的组,将组的账户信息保存在活动目录中.域组可以用来控制域内任何一台计算机资源的 ...
- 深入理解SPI机制
一.什么是SPI SPI ,全称为 Service Provider Interface,是一种服务发现机制.它通过在ClassPath路径下的META-INF/services文件夹查找文件,自动加 ...
- SpringCloud升级之路2020.0.x版-14.UnderTow AccessLog 配置介绍
本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford server: u ...