原生js 或vue实现60分钟倒计时案例

使用场景类似于订单倒计时,或答题倒计时,代码如下
在Vue中封装了如下的方法

data () {return {countdownTxt:'',//要显示的倒计时文案};},
// 定义一个方法 方便调用
methods: {// @diffTime 传入秒数countdownFun(diffTime) {if (diffTime > 0) {this.countdownTime = setInterval(() => {let diffM =Math.floor(diffTime / 60) > 9? Math.floor(diffTime / 60): `0${Math.floor(diffTime / 60)}`;let diffS =Math.floor(diffTime % 60) > 9? Math.floor(diffTime % 60): `0${Math.floor(diffTime % 60)}`;this.countdownTxt = `${diffM}分${diffS}秒`;// console.log(this.countdownTxt,'qqqqqwwwwwwwww')diffTime--;if (diffTime < 0) {clearInterval(this.countdownTime);return;}}, 1000);},}

原生js 和上面相差不大,修改相应的参数

原生js 或vue实现60分钟倒计时案例相关推荐

简单实现vue验证码60秒倒计时功能
简单实现vue验证码60秒倒计时功能 <span v-if="codeShow" @click="getPhoneCode">点击获取验证码< ...
star评星点亮星星原生js评星 vue评星
类似于淘宝订单交易成功后,会进行评价. 项目结构如下: 一:原生js进行评星 <!DOCTYPE html><html lang="en"><head ...
原生JS实现vue中data值的修改与渲染
前言砖搬多了就得想想怎么造砖,Vue使用多了,也得想想Vue是咋实现,Vue用着确实舒服,仔细了解一下,背后做的操作也太多了吧,但是再多的操作也是一个一个积累起来的吧! 先记录一下怎么实现data中 ...
使用原生JS在Vue实例中动态插入元素
说明:项目需要,这里使用到的是Ant Design框架中的modal模态框组件. 完整代码: 经供参考,根据自己的业务需求适当修改!
vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门
Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的 ...
Vue.js——60分钟快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
Vue.js—60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
Vue.js——60分钟browserify项目模板快速入门
概述在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

原生js 或vue实现60分钟倒计时案例

原生js 或vue实现60分钟倒计时案例相关推荐

最新文章

热门文章