国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

原生 js 實現一個有動畫效果的進度條插件 progress

用戶84 / 507人閱讀

摘要:效果圖項目地址效果體驗地址原理一個用于裝載進度條內容的且叫做。然后在里面動態生成三個元素,一個是做為背景的且叫做,一個是做為顯示進度的且叫做,還有一個是顯示文字的且叫做。的寬從逐漸增加到的值的過程比如,給這個過程添加一個逐漸加快的動畫。

效果圖:

項目地址:https://github.com/biaochenxuying/progress

效果體驗地址: https://biaochenxuying.github.io/progress/index.html

1. 原理

一個用于裝載進度條內容的 div (且叫做 container)。

然后在 container 里面動態生成三個元素,一個是做為背景的 div (且叫做 progress),一個是做為顯示進度的 div (且叫做 bar),還有一個是顯示文字的 span (且叫做 text)。

progress 的寬為 100%,bar 的寬根據傳入數值 target 的值來定( 默認為 0 ,全部占滿的值為 100 ),text 展示的文字為 bar 的寬占 progress 寬的百分比。

bar 的寬從 0 逐漸增加到的 target 值的過程( 比如: 0 > 80 ),給這個過程添加一個逐漸加快的動畫。

2. 代碼實現

具體的過程請看代碼:

/*
* author: https://github.com/biaochenxuying
*/

(function() {
  function Progress() {
    this.mountedId = null;
    this.target = 100;
    this.step = 1;
    this.color = "#333";
    this.fontSize = "18px";
    this.borderRadius = 0;
    this.backgroundColor = "#eee";
    this.barBackgroundColor = "#26a2ff";
  }

  Progress.prototype = {
    init: function(config) {
      if (!config.mountedId) {
        alert("請輸入掛載節點的 id");
        return;
      }

      this.mountedId = config.mountedId;
      this.target = config.target || this.target;
      this.step = config.step || this.step;
      this.fontSize = config.fontSize || this.fontSize;
      this.color = config.color || this.color;
      this.borderRadius = config.borderRadius || this.borderRadius;
      this.backgroundColor = config.backgroundColor || this.backgroundColor;
      this.barBackgroundColor =
        config.barBackgroundColor || this.barBackgroundColor;

      var box = document.querySelector(this.mountedId);
      var width = box.offsetWidth;
      var height = box.offsetHeight;
      var progress = document.createElement("div");
      progress.style.position = "absolute";
      progress.style.height = height + "px";
      progress.style.width = width + "px";
      progress.style.borderRadius = this.borderRadius;
      progress.style.backgroundColor = this.backgroundColor;

      var bar = document.createElement("div");
      bar.style.float = "left";
      bar.style.height = "100%";
      bar.style.width = "0";
      bar.style.lineHeight = height + "px";
      bar.style.textAlign = "center";
      bar.style.borderRadius = this.borderRadius;
      bar.style.backgroundColor = this.barBackgroundColor;

      var text = document.createElement("span");
      text.style.position = "absolute";
      text.style.top = "0";
      text.style.left = "0";
      text.style.height = height + "px";
      text.style.lineHeight = height + "px";
      text.style.fontSize = this.fontSize;
      text.style.color = this.color;

      progress.appendChild(bar);
      progress.appendChild(text);
      box.appendChild(progress);

      this.run(progress, bar, text, this.target, this.step);
    },
    /**
     * @name 執行動畫
     * @param progress 底部的 dom 對象
     * @param bar 占比的 dom 對象
     * @param text 文字的 dom 對象
     * @param target 目標值( Number )
     * @param step 動畫步長( Number )
     */
    run: function(progress, bar, text, target, step) {
      var self = this;
      ++step;
      var endRate = parseInt(target) - parseInt(bar.style.width);
      if (endRate <= step) {
        step = endRate;
      }
      var width = parseInt(bar.style.width);
      var endWidth = width + step + "%";
      bar.style.width = endWidth;
      text.innerHTML = endWidth;

      if (width >= 94) {
        text.style.left = "94%";
      } else {
        text.style.left = width + 1 + "%";
      }

      if (width === target) {
        clearTimeout(timeout);
        return;
      }
      var timeout = setTimeout(function() {
        self.run(progress, bar, text, target, step);
      }, 30);
    },
  };

  // 注冊到 window 全局
  window.Progress = Progress;
})();
3. 使用方法
  var config = {
    mountedId: "#bar",
    target: 8,
    step: 1,
    color: "green",
    fontSize: "20px",
    borderRadius: "5px",
    backgroundColor: "#eee",
    barBackgroundColor: "red",
  };
  var p = new Progress();
  p.init(config);
4. 最后

筆者的博客后花圓地址如下:

github :https://github.com/biaochenxuying/blog
個人網站 :http://biaochenxuying.cn/main.html

如果您覺得這篇文章不錯或者對你有所幫助,請給個贊唄,你的點贊就是對我最大的鼓勵,謝謝。

微信公眾號:BiaoChenXuYing
分享 前端、后端開發等相關的技術文章,熱點資源,隨想隨感,全棧程序員的成長之路。
關注公眾號并回復 福利 便免費送你視頻資源,絕對干貨。
福利詳情請點擊: 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScript

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102155.html

相關文章

  • 手把手教你實現一個 Vue 進度組件!

    摘要:添加的屬性進度條長度顯示和隱藏是否是成功的狀態有了這些屬性,這個進度條就要根據這些屬性的變化來自己動。大家可以自己動手實踐一下,起一個項目,使用的聲明周期鉤子,或者寫一個定時器模擬異步來測試一下。 showImg(https://segmentfault.com/img/bVbjDzm?w=900&h=383);最近在個人的項目中,想對頁面之間跳轉的過程進行優化,想到了很多文檔或 np...

    zgbgx 評論0 收藏0
  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:轉載來源包管理器管理著庫,并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想,使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源:https://github.com/jobbole/aw... 包管理器管理著 javascript 庫,并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    netmou 評論0 收藏0
  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要:轉載來源包管理器管理著庫,并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想,使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源:https://github.com/jobbole/aw... 包管理器管理著 javascript 庫,并提供讀取和打包它們的工具。?npm – npm 是 javasc...

    Hydrogen 評論0 收藏0
  • javascript功能插件大集合,寫前端親們記得收藏

    摘要:一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想,使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具,能在中識別和記錄模式。健壯的優雅且功能豐富的模板引擎。完整的經過充分測試和記錄數據結構的庫。 【導讀】:GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發起維護的 JS 資源列表...

    cfanr 評論0 收藏0

發表評論

0條評論

用戶84

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<