问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue做30s倒计时，在最后10s倒数的时候有个放大的效果

头像
alert
    2611520

    题目描述

    vue做30s倒计时，在最后10s的时候有个放大的效果

    题目来源及自己的思路

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）
    <template>
    <div>

    <p>{{second}}</p>

    </div>

    </template>

    <script >
    export default {

    data () {
  return {
    seconds: 30
  }
},
mounted () {
  this.add()
},
methods: {
  num: function (n) {
    return n < 10 ? '0' + n : '' + n
  },
  add: function () {
    var _this = this
    var time = window.setInterval(function () {
      if (_this.seconds === 0 ) {
        _this.seconds = 0
      } else if ( _this.seconds === 0) {
        _this.seconds = 0
        window.clearInterval(time)
      } else {
        _this.seconds -= 1
      }
    }, 1000)
  }
},
computed: {
  second: function () {
    return this.num(this.seconds)
  },
}

    }
    </script>

    你期待的结果是什么？实际看到的错误信息又是什么？

    希望大神给出方法

    csshtml5
    阅读 4.2k
    2 个回答
    得票最新
    头像
    shushushu
      55115
      ✓ 已被采纳

      html

      <p :class="{ zoom: isZoom }">{{second}}</p>

      js

      data () {
    return {
        seconds: 30,
        isZoom: false
    }
},
      
methods: {
    num: function (n) {
        this.isZoom = n <= 10 && n > 0;
        return n < 10 ? '0' + n : '' + n
    },
    ...
}

      css

      .zoom {
    animation: test 1s infinite;
}
@keyframes test {
    from {
        font-size: 14px;
    }
    to {
        font-size: 24px;
    }
}
      头像头饰
      luozz
        5.8k3629
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #app {
            text-align: center;
            padding: 100px;
        }
        #app p {
            font-size: 16px;
            transition: all 1s ease;
        }
        #app p.large {
            animation: changeSize 1s infinite;
            -webkit-animation: changeSize 1s infinite; /* Safari 与 Chrome */
        }
        #app p.zero {
            font-size: 22px;
        }
        @keyframes changeSize {
            0% {
                font-size: 16px;
            }
            50% {
                font-size: 22px;
            }
            100% {
                font-size: 16px;
            }
        }
        @-webkit-keyframes changeSize {
            0% {
                font-size: 16px;
            }
            50% {
                font-size: 22px;
            }
            100% {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <p :class="[second < 10 && second > 0 ? 'large' : '', second == 0 ? 'zero' : '']">{{second < 10 ? '0' + second : second}}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    second: 15,
                    timer: null
                }
            },
            methods:{
                setTimer() {
                    this.timer = window.setInterval(() => {
                        if(this.second <= 0) {
                            window.clearInterval(this.timer)
                            return false;
                        }
                        this.second--;
                    }, 1000)
                }
            },
            mounted() {
                this.setTimer();
            },
            beforeDestroy() {
                if(this.timer){
                    window.clearInterval(this.timer)
                }
            },
        })

        
    </script>
</body>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题