Vue.js implements simple timer function

Vue.js implements simple timer function

This article example shares the specific code of vue.js to implement a simple timer function for your reference. The specific content is as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Leg Raise Counter</title>
  <script src="/static/vue/vue.js"></script>
  <script src="/static/vue/index.js"></script>
  <script src="/static/vue/vue-resource.min.js"></script>
  <link rel="stylesheet" href="/static/vue/index.css" >
</head>
<style type="text/css">
  .el-container {
    margin:100px 30px 30px 30px ;
    height:1800px;
    background-color: #B3C0D1;
  }
  .el-button{
    height:1800px;
    width:100%;
    font-size:300px;
  }
</style>
<body>
  <div id="app">
    <el-container>
      <el-button type="primary" :disabled="!canclick" @click="add">
        {{ num }} <el-divider></el-divider> {{ content }}
      </el-button>
    </el-container>
    <video ref="notify">
      <source src="countdown.m4a" />
    </video>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: function () {
        return {
          num:0,
          canclick:true,
          content:"Counter",
          count:10
        }
      },
      mounted(){
        this.getnum() //Get all options},
      methods:{
        getnum:function(){
          this.$http.get('/api/count/count.php').then(function(res){
            this.num=res.data 
          },function(){
            console.log('Request failed processing')
          });
        },
        add:function(){
          this.canclick=false
          this.$refs.notify.play()
          this.content = this.count + 's after the end'
          let clock = setInterval(()=>{
            this.count--
            this.content = this.count + 's after the end'
            if(this.count==0){
              this.content="Counter"
              clearInterval(clock)
              this.canclick=true
              this.count = 10
            }
          },850);
          this.$http.get('/api/count/add.php?num='+this.num).then(function(res){
            this.num=res.data
          },function(){
            console.log('Request failed processing')
          });
        }
      }
    })
  </script>
</body>
</html>

The effect is as follows

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Implementing a simple timer in JavaScript
  • JS implements a stopwatch timer
  • JS uses setInterval timer to implement the 10-second challenge
  • JavaScript implements a good-looking stopwatch timer
  • JavaScript setInterval() vs setTimeout() Timers
  • js implements built-in timer
  • Detailed explanation of JavaScript timer and button effect settings

<<:  Detailed explanation of Svn one-click installation shell script under linxu

>>:  Detailed tutorial on installing MYSQL under WINDOWS

Recommend

The design process of Alibaba's Mid-Autumn Festival logo combined with the website

<br />First think of the idea, then draw a s...

How to understand semantic HTML structure

I believe everyone knows HTML and CSS, knows the ...

Mini Program implements list countdown function

This article example shares the specific code for...

Implementation of two-way binding of parent-child component data in front-end framework Vue

Table of contents 1. One-way value transfer betwe...

Solution to the problem of web page flash animation not displaying

<br />The solution steps are as follows: Sta...

Real-time refresh of long connection on Vue+WebSocket page

Recently, the Vue project needs to refresh the da...

MySQL 8.0.15 installation and configuration method graphic tutorial (Windows 10 X64)

What I have been learning recently involves knowl...

Detailed explanation of docker version es, milvus, minio startup commands

1. es startup command: docker run -itd -e TAKE_FI...

How to use docker to deploy Django technology stack project

With the popularity and maturity of Docker, it ha...

Mini Program to Implement Simple List Function

This article example shares the specific code of ...

Tomcat exception solution (Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986)

1. Scenario display The tomcat log occasionally r...

Some tips on using the HTML title attribute correctly

If you want to hide content from users of phones, ...

How to view the IP address of Linux in VMware virtual machine

1. First, double-click the vmware icon on the com...

In html table, set different colors and widths for each cell

It is recommended that you do not set the width, h...

Detailed process of configuring Https certificate under Nginx

1. The difference between Http and Https HTTP: It...