原生JavaScript实现进度条

下面是“原生JavaScript实现进度条”的完整攻略,包括实现过程、代码示例和具体讲解。

1. 实现过程

1.1 顶部进度条

实现顶部进度条的关键是获取当前页面的加载进度,并将其转化为进度条的宽度并实时更新,下面是代码示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>原生JavaScript实现进度条 - 顶部进度条</title>
  <style>
    .progressbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background-color: #29d;
      transition: width .3s ease;
    }
  </style>
</head>
<body>
  <div class="progressbar"></div>
  <script>
    window.addEventListener('load', function() {
      var progressbar = document.querySelector('.progressbar');
      progressbar.style.width = '100%';
      setTimeout(function() {
        progressbar.style.opacity = '0';
        setTimeout(function() {
          progressbar.style.display = 'none';
        }, 300);
      }, 1000);
    });
  </script>
</body>
</html>

在页面加载完成后,我们使用window.addEventListener('load', callback)的方式监听页面加载事件。在callback函数中,首先获取到进度条的DOM元素,然后将其宽度设置为100%,使其充满屏幕。

接下来,我们使用setTimeout方法给进度条添加一个淡出效果,并在淡出完成后隐藏进度条。

1.2 页面中的进度条

实现页面中的进度条比较麻烦,需要通过监听XHR请求的状态来实现进度条的更新和控制。下面是代码示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>原生JavaScript实现进度条 - 页面中的进度条</title>
  <style>
    .progressbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background-color: #29d;
      transition: width .3s ease;
    }
    .loading {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="progressbar"></div>
  <div class="loading">加载中...</div>
  <script>
    var progressbar = document.querySelector('.progressbar');
    var loading = document.querySelector('.loading');
    var totalTime = 0;
    var startTime = 0;

    function startLoading() {
      loading.style.display = 'block';
      startTime = Date.now();
    }

    function finishLoading() {
      loading.style.opacity = '0';
      setTimeout(function() {
        loading.style.display = 'none';
      }, 300);
    }

    function updateProgress() {
      var currentTime = Date.now();
      var progress = Math.min((currentTime - startTime) / totalTime, 1);
      progressbar.style.width = progress * 100 + '%';
      if (progress < 1) {
        requestAnimationFrame(updateProgress);
      }
    }

    function hookXHR() {
      var open = XMLHttpRequest.prototype.open;
      var send = XMLHttpRequest.prototype.send;
      var isXHRInitializing = true;

      XMLHttpRequest.prototype.open = function() {
        this.startTime = Date.now();
        open.apply(this, arguments);
      }

      XMLHttpRequest.prototype.send = function() {
        totalTime = this.timeout || 5000;
        if (isXHRInitializing) {
          isXHRInitializing = false;
          hookXHR();
          startLoading();
          requestAnimationFrame(updateProgress);
        }
        send.apply(this, arguments);
        var self = this;
        this.addEventListener('loadend', function() {
          finishLoading();
          isXHRInitializing = true;
        })
      }
    }

    hookXHR();
  </script>
</body>
</html>

首先,我们通过XMLHttpRequest的原型方法opensend来监听XHR请求的状态。在open方法中,我们获取到请求开始的时间戳,并在send方法中计算请求的总耗时,并将其保存到全局变量totalTime中。

在第一次XHR请求时,我们开始显示加载中的提示,并使用requestAnimationFrame方法来不断更新进度条的宽度。在每次更新时,我们计算当前进度的百分比,然后根据百分比设置进度条的宽度。

在XHR请求完成时,我们将加载中的提示淡出,并在淡出完成时隐藏。

2. 总结

通过以上代码示例和实现过程的讲解,我们可以知道实现进度条的关键在于监听XHR请求的状态,并将请求的耗时转化为进度条的宽度并进行实时更新。此外,我们还需要注意淡入淡出效果的实现,以及在进度条更新时如何避免浏览器卡顿的问题。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JavaScript实现进度条 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 前端页面文件拖拽上传模块js代码示例

    前端页面文件拖拽上传模块是一种比较常见的交互方式,能够让用户通过将本地文件拖拽上传到页面而不必使用传统的文件选择框。下面我们将为大家介绍一份完整的前端页面文件拖拽上传模块js代码示例。 常见的前端拖拽上传模块 前端拖拽上传模块比较常见的有两种方式: 方式1:使用JS原生API实现 使用JS原生API实现文件的拖拽上传,步骤如下: 通过getElementBy…

    css 2023年6月10日
    00
  • css 相对浏览器动态居中永远保持在屏幕正中

    要实现CSS相对浏览器动态居中,需要注意以下几点: 1.要居中的元素必须是块级元素,并且设置宽度。因为只有块级元素才能够设置宽度,设置宽度是为了让元素有一定的大小,方便元素进行居中。 2.要让元素水平居中,需要使用margin属性。可以通过margin-left和margin-right设置左右的空白间距,使得元素水平居中。当使用具体数值的时候,需要注意居中…

    css 2023年6月9日
    00
  • jquery validate表单验证插件

    下面是关于jquery validate表单验证插件的完整攻略,内容分为以下几部分: 什么是jquery validate表单验证插件 jquery validate是一个基于jQuery的表单验证插件,它可以实现非常全面的表单验证功能,包括表单必填、表单格式验证、自定义验证规则等,能帮助我们轻松实现表单验证,提高用户体验。 如何引入jquery valid…

    css 2023年6月9日
    00
  • vue中checkbox如何修改为圆形样式

    对于”vue中checkbox如何修改为圆形样式”的问题,我们可以通过以下步骤进行修改: 引入正确的css文件 应该引入一个能够提供样式的css库或文件,并且这个文件中应该提供了相应的checkbox圆形样式。比较常用的库包括Bootstrap、Tailwind CSS、Bulma等,可以根据自己的需求选择其中一个,然后在Vue组件中进行引入。 示例1:使用…

    css 2023年6月11日
    00
  • jQuery 3.0十大新特性最终版发布

    jQuery 3.0十大新特性最终版发布:完整攻略 jQuery 3.0是目前最新版本的jQuery,相比于旧版本,它引入了许多新特性。下面是jQuery 3.0的十大新特性: 1. 遵循ES2015规范 jQuery 3.0遵循了ES2015规范,实现了许多旧版jQuery没有的功能,比如使用let和const关键字来声明变量。 2. 支持Promises…

    css 2023年6月9日
    00
  • UI自动化定位常用实现方法代码示例

    下面是关于“UI自动化定位常用实现方法代码示例”的完整攻略: 理解UI自动化定位 在进行UI自动化测试时,定位元素是非常关键的一步,因为测试脚本需要通过定位元素才能进行后续的操作和断言。常用的元素定位方式包括:id、name、class、tag、xpath等。在实现元素定位时,还需要考虑定位的准确性、稳定性和代码的可维护性。 常用的UI自动化定位方法 1. …

    css 2023年6月9日
    00
  • uni-app学习之nvue使用教程

    一、nvue简介及使用场景 nvue是uni-app框架的新型组件化方案,它是一种基于webview(也就是小程序内嵌的webview)的组件开发方案,可以使用vue语法编写,主要用于实现小程序内拥有原生乃至更高的性能与动画效果。 nvue的特点: 相较于weex等其他方案,nvue的兼容性更好,可以兼容所有支持webview的小程序和app平台,如微信小程…

    css 2023年6月10日
    00
  • HTML中的表单Form实现居中效果

    下面就来详细讲解一下HTML中的表单Form实现居中效果的完整攻略。 1. 使用CSS实现表单居中 表单元素默认是不会居中的,但是我们可以借助CSS来实现表单的居中效果。具体步骤如下: 创建一个包含表单的容器元素,并设置容器元素的宽度以及 margin 属性来实现居中效果。 <div class="form-container"&g…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部