javascript - 使用javascript进行页面转换的步骤进度条-6ren

javascript - 使用javascript进行页面转换的步骤进度条

转载作者：行者123 更新时间：2023-11-27 22:43:07

26

4

我已经创建了一个带有 css 的步骤进度条，我的目标是使用它来通过使用 javascript 进行页面转换。我正在考虑使用 iframe 来保存页面，但我不知道如何使用 javascript 控制转换。这是 HTML/CSS。

body {

  color: #01ab97;
}

.progress {
  margin: 100px auto;
  
}


ul {
  text-align: center;
}

ul li {
  display: inline-block;
  width: 100px;
  position: relative;
}

ul li .fa {
  background-color: #ccc;
  width: 18px;
  height: 18px;
  color: #fff;
  border-radius: 50%;
  padding: 5px;
}

ul li .fa::after {
  content: '';
  background-color: #ccc;
  height: 5px;
  width: 105px;
  display: block;
  position: absolute;
  left: 0;
  top: 63px;
  z-index: -1;
}

ul li:nth-child(3) .fa {
  background-color: #148e14;
}

ul li:nth-child(3) .fa::after {
  background-color: #148e14;
}

ul li:nth-child(1) .fa,
ul li:nth-child(2) .fa {
  background-color: #60aa97;
}

ul li:nth-child(1) .fa::after,
ul li:nth-child(2) .fa::after {
  background-color: #60aa97;
}

ul li:first-child .fa::after {
  width: 55px;
  left: 50px;
}

ul li:first-child .fa::after {
  width: 55px;
  left: 50px;
}

ul li:last-child .fa::after {
  width: 55px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>STEPS PROGRESS BAR</title>
    <link rel="shortcut icon" href="">
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="progress">
        <ul>
            <li>
                <p>Page 1</p>
                <i class="fa fa-check"></i> 
            </li>
            <li>
                <p>Page 2</p>
                <i class="fa fa-check"></i>   
            </li>
            <li>
                <p>Page 3</p>
                <i class="fa fa-refresh"></i>
            </li>
            <li>
                <p>Page 4</p> 
                <i class="fa fa-times"></i> 
            </li>
            <li>
                <p>Page 5</p>
                <i class="fa fa-times"></i>    
            </li>
        </ul>
    </div>
</body>
</html>

我会很感激任何想法

最佳答案

如果您需要从服务器获取数据，您可以使用异步方法，只需使用javascript 将数据放入div。如果您的页面完全是文本，我认为您可以伪造进度条，如果有 Assets ，您可以使用它

https://andreupifarre.github.io/preload-it/docs/index.html

因此，例如，您可以首先解析您的页面以搜索 Assets ，将其用于进度条(使用预加载)，完成后，将其放入容器，执行转换，任务完成

关于javascript - 使用javascript进行页面转换的步骤进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59736192/

26

4

0

文章推荐： javascript - 从 JSON 轻松填充 HTML 表单

文章推荐： css - ">"(大于号)CSS 选择器是什么意思？

文章推荐： html - 如何在 HTML5 中创建具有平面的多边形形状？

python - 了解fit_generator(steps_per_epoch)、validation_steps、evaluate_generator(步骤)和predict_generator(步骤)
我是在项目中使用 keras 的新手。我一直在我的模型中使用generator。我真的很困惑我应该输入什么值 1) In fit_generator : steps_per_epoch & vali
算法在一个组的成员内完成许多事务至少没有。步骤
假设我们有如下情况: A has to give $10 to B. B has to give $20 to C. C has to give $10 to D. 现在这种情况可以简化为: A lo
excel - 相对引用 - 步骤
我正在尝试对特定列(在工作表“OA”中)进行相对引用，我需要在 110 的步骤中检索新工作表中的单元格内容例如， =OA!$AB217 =OA!$AB327 =OA!$AB437 与其在每个单元格中
修复启动缓慢的 PowerShell 步骤
我的 PowerShell 控制台启动时间很慢(总是等待超过 5 秒)，并且希望获得有关故障排除步骤的建议，以找出瓶颈可能在哪里？我已经阅读了关于运行脚本的内容，-NoProfile防止模块等加载很
NativeScript slider 步骤
我在 NativeScript 应用程序中使用 slider 小部件，我想知道是否有步骤属性。在我的例子中，小部件代表金钱，我希望以 5 美元的增量滑动。我查看了文档，但找不到任何对这种情况有帮助的
NativeScript slider 步骤
我在 NativeScript 应用程序中使用 slider 小部件，我想知道是否有步骤属性。在我的例子中，小部件代表金钱，我希望以 5 美元的增量滑动。我查看了文档，但找不到任何对这种情况有帮助的
jquery - 如何减少 "each"步骤？
这是我的code : &n
java - 重载方法调用的参数匹配期间的详细过程(步骤)
为什么 (2) c.ERR(模棱两可)？第一个方法参数 - char ('a') 被扩展为 float => 匹配。如果找到匹配项，是否无需继续执行第 2 步(装箱/拆箱)或第 3 步(尝试可变参数
C# .net For() 步骤？
我有一个函数，它处理一个包含 6100 个列表项的列表。当列表只有 300 个项目时，该代码可以正常工作。但是立即与 6100 崩溃。有没有一种方法可以遍历这 6100 个项目，一次说 30 个，然后
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
1.制作PHP安装程序的原理其实PHP程序的安装原理无非就是将数据库结构和内容导入到相应的数据库中，从这个过程中重新配置连接数据库的参数和文件，为了保证不被别人恶意使用安装文件，当安装
angular - 动态对话框中的 PrimeNG 步骤
我创建了一个类似于 primeNG page 的步骤组件我想把他放在一个 dynamic dialog 里面但在应用它之后，“第 1 步”和“第 2 步”不会呈现。查看代码，我发现关键部分是我们打开
math - 误解 MixColumns 步骤
我在理解描述的 MixColumns 步骤时遇到问题 here . 我知道扩散，这一切都是有道理的，因为它指出每列都被视为多项式并乘以 GF(2^8) 的模。但是..乘以GF(2 ^ 8)。尽管域仍
build - 在构建失败条件下需要跳过 TeamCity 步骤
根据我对 TeamCity 工作原理的观察，我注意到在所有步骤执行完毕后评估构建失败条件。这很烦人，因为如果满足任何构建失败条件，我不能有一个不会执行的步骤。我不是指常见的构建失败条件，例如“至少一
Jenkins CopyArtifact 步骤 - 无法找到工件复制的项目
基于这篇试图在我的环境中测试管道代码的帖子。但它给出了以下错误消息。如何修复他的管道代码？ ERROR: Unable to find project for artifact copy: test
sql - 用于混淆/清除生产数据的简单工具/步骤
我参与了一个项目，需要向我的一位同事提供生产数据的子集（日期范围），以进行故障排除。我想将经过清理的生产数据子集插入新的数据库表中我的同事可以访问。请提出实现此目标的最佳方法。最佳答案最简单的方法
cucumber - 如何跳过 cucumber 步骤？
我有这样的场景: 鉴于我去这个页面当我输入 cucumber 时然后我点击然后我应该看到文字我不应该看到这条线如果我运行这个场景，它将执行所有 5 个步骤。但是我想跳过第4步(然后我应该看到
matlab - 避免情节/步骤/...输出
是否有任何功能可以避免 m 文件的绘图输出？我的意思是我在文件的开头放置了一个函数(如 clc)，然后所有绘图函数都被阻止。最佳答案您可以使用自己的(嵌套在您的函数内或同一目录中)重载内置绘图函
cucumber - 是否可以在多行上写一个小 cucumber 步骤？
我是小 cucumber 语言的新手，这在我看来是非常基本的问题，但我找不到答案。我知道可以在 Gherking 中编写多行步骤参数，如下所示: Given a blog post named "R
cucumber - 失败后继续运行 cucumber 步骤
即使其中一个步骤失败，有没有办法继续执行 Cucumber Steps。在我当前的设置中，当一个步骤失败时， cucumber 会跳过剩余的步骤......我想知道是否有某种方法可以设置 cucumb
optimization - 如何计算开始-步骤-停止编码方案的最佳参数？
start-step-stop 码是一种数据压缩技术，用于压缩相对较小的数字。该代码的工作原理如下:它具有三个参数，start、step 和 stop。 Start 确定用于计算前几个数字的位数。

首页

博学

6Ren·AI

商城

javascript - 使用javascript进行页面转换的步骤进度条