element编写环形倒计时条

最新推荐文章于 2024-05-12 14:14:52 发布

llzmgjzhy

最新推荐文章于 2024-05-12 14:14:52 发布

阅读量1.5k

点赞数 4

分类专栏： vue element 文章标签：前端

本文链接：https://blog.csdn.net/wgz52157/article/details/115918840

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

element

2 篇文章 0 订阅

订阅专栏

element编写环形倒计时条

VUE使用element框架编写可倒计时的环形进度条

因为最近在搭建网站，需要用到计时器的功能，找了网上的一些案例，发现并没有自己想要的，就查阅了一些资料，搭建了一个觉得比较美观的计时器

话不多说，直接放代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>MyProject</title>
  <!-- 引入组件库 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <el-progress type="circle" :percentage="percentage" :color="customColors" style="margin-left: 40%;margin-top:10%;">
    </el-progress>
    <!--启动倒计时的按钮,可根据需要更改-->
    <el-button @click="decrease" type="primary"></el-button>
  </div>


</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        percentage: 100, //初始百分比为100
        time: 360, //时间设定为360
        customColors: [{
            color: '#f56c6c',
            percentage: 20
          },
          {
            color: '#e6a23c',
            percentage: 40
          },
          {
            color: '#5cb87a',
            percentage: 60
          },
          {
            color: '#1989fa',
            percentage: 80
          },
          {
            color: '#6f7ad3',
            percentage: 100
          }
        ] //颜色随着百分比的变化而自动变化
      };
    },
    methods: {
      decrease() {
        let me = this;
        let interval = window.setInterval(function () {
          let str = Number((me.time / 360) * 100).toFixed(0); //取整数
          me.percentage = str;
          --me.time; //每隔0.1s时间减1
          if (me.time < 0) {
            me.percentage = 0;
            me.time = 0;
            window.clearInterval(interval);
          }
        }, 100);
      }
    }

  })
</script>

</html>

放上效果图

在这里插入图片描述

这是第一次写博客

之前没有写博客的习惯，既然现在开始写网站了，觉得通过这个来记录我的历程也是一个很好的选择，而且还可以将自己的想法分享出去，也希望得到大家的帮助

llzmgjzhy

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
element编写环形倒计时条

element编写环形倒计时条VUE使用element框架编写可倒计时的环形进度条因为最近在搭建网站，需要用到计时器的功能，找了网上的一些案例，发现并没有自己想要的，就查阅了一些资料，搭建了一个觉得比较美观的计时器话不多说，直接放代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>MyProject</title> <!-- 引入组件库
复制链接

扫一扫