js控制进度条到达100%跳转界面一

杜Amy 杜Amy     2022-08-01     327

关键词:

进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码:


 1 <style>
 2     * {
 3         margin: 0;
 4         padding: 0;
 5     }
 6 
 7     html, body {
 8         font-family: arial, "microsoft yahei";
 9         font-size: 14px;
10         background: #c2d7ac;
11     }
12 
13     .progress {
14         width: 300px;
15         height: 30px;
16         margin: auto;;
17         background: #70b4e5;
18         border-radius: 5px;
19         -webkit-box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
20         box-shadow: inset -2px 0px 2px #3189dd, inset 0px -2px 2px #d4edf9, inset 2px 0px 2px #d4edf9, inset 0px 2px 2px #3189dd;
21     }
22 
23     .progress_bar {
24         width: 0%;
25         height: 26px;
26         background: url("images/bar.jpg") repeat;
27         background-size: auto 100%;
28         border-radius: 5px;
29         position: relative;
30         left: 3px;
31         right: 3px;
32         top: 2px;
33     }
34 
35     p {
36         width: 300px;
37         text-align: center;
38         font-size: 14px;
39         color: #c20606;
40         position: absolute;
41         top: 98px;
42     }
43 </style>
<body onload="fakeProgress(0, load)">
<div style="height: 120px;"></div>
<div class="progress">
    <div id=load>
        <div class="progress_bar"></div>
        <p>0</p>
    </div>
</div>
 1 <script type="text/javascript">
 2     function setLOAD(v, el) {
 3         var read = (document.all && document.getElementsByTagName);
 4         if (read || document.readyState == "complete")
 5             valueEl = el.children[1];
 6         {
 7             filterEl = el.children[0];
 8             valueEl.innerText = v + "%";
 9             filterEl.style.width = v + "%";
10 
11         }
12     }
13     function fakeProgress(v, el) {
14         if (v > 100)
15             location.href = "begin.html";
16         else {
17             setLOAD(v, el);
18             window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 2000);
19         }
20     }
21 </script>

效果图:

uploadifive.js怎么去掉进度条

参考技术AUploadify中上传完毕会默认保留进度条并显示100%,前提设置removeCompleted为false,而UploadiFive中上传完毕后进度条自动消失 参考技术BUploadify中上传完毕会默认保留进度条并显示100%,前提设置removeCompleted为false,而UploadiFive... 查看详情

用js写一个网页进度条

一、基本思路为了让我们编写的网页进度条满足现有需求,又足够轻便,所以使用原生js写一个构造函数,为了见名知义,可以把该函数命名为”Loading”。该函数接收2个参数,分别为arr、callback。其中arr定义图片数组,callback定... 查看详情

css系列网页头部进度条方式一

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>头部进度条</title><styletype="text/css">.loading{width:100%;height:100%;position:fixed;top:0;z-index 查看详情

ffmpeg+qt视频进度条控制——点击跳转和拖动跳转(代码片段)

首先进度条采用Qslider,设置进度条主要有两点,一是当前视频总时长,二是当前播放时长,需要通过FFmpeg转码成mp4文件才能获取相应的时长数据;往期回顾:【Qt+FFmpeg】视频转码详细流程_logani的博客-CS... 查看详情

c#通过线程来控制进度条(转)--讲解多线程对界面的操作

//通过创建委托解决传递参数问题privatevoid_btnRun_Click(objectsender,System.EventArgse){RunTaskDelegaterunTask=newRunTaskDelegate(RunTask);//委托同步调用方式runTask(Convert.ToInt16(_txtSecond.Value));}//通过创建委托解决传递参数问题,通过委托的 查看详情

如何在vue项目中给路由跳转加上进度条(代码片段)

...当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示)。虽然实际用处不大,但是对用户来说,有个进度条会大大减轻用户的等待压力,提升用户体验。本篇文章就来教你如何... 查看详情

进度条,最大值并重置为 100%

】进度条,最大值并重置为100%【英文标题】:Progressbar,maxandreseton100%【发布时间】:2017-11-2813:47:47【问题描述】:我正在处理连接到sql中的XP和MAXXP的进度条。每次单击按钮时,您都会获得1xp,最大xp为10。我希望当用户达到100%XP... 查看详情

AngularJS - 进度条为 100% 后重新加载页面 5 秒

】AngularJS-进度条为100%后重新加载页面5秒【英文标题】:AngularJS-Reloadpage5secondsonceprogressbaris100%【发布时间】:2019-10-1801:38:26【问题描述】:我想在进度条达到100%后5秒后重新加载页面我的代码是:<!DOCTYPEHTML><!--/**jQueryFileUp... 查看详情

js应用例子——进度条

<styletype="text/css">*{margin:0pxauto;padding:0px;}#wai{width:100%;height:600px;}#jwk{width:200px;height:15px;margin-top:50px;border:1pxsolid#F00;}#nei{width:0px;height:15px;background-color:#F 查看详情

js中如何设置进度条满后自动跳转?

一个max为100的进度条(在div1中),如何设置当进度条读满的时候自动隐藏div1,显示div2?(点击按钮的实现方法我已经实现,但是不知道怎么自动更改),还有就是如果div2中也有一个进度条,如何设置跳转至div2后进度条自动开始前进... 查看详情

Swift Progress View 动画使进度条超过 100%

】SwiftProgressView动画使进度条超过100%【英文标题】:SwiftProgressViewanimationmakesthebargofurtherthan100%【发布时间】:2017-06-0618:52:18【问题描述】:当为ProgressView使用动画时,如果我让动画用完,它完全可以正常工作,但如果我在动画仍... 查看详情

如何用js获取audio标签的已播放时长并控制进度条的width

我在写一个网页MP3播放器,没有使用audio标签的控制条而是用css写了一个,但是在通过进度条显示并控制播放进度的时候出了点问题,我想通过修改CSS中的width值来控制进度条的进度,请问该如何写JS?图片中那个进度条的id是view... 查看详情

unity使用ugui实现王者荣耀ui界面加载页面(进度条)(代码片段)

...用UGUI实现王者荣耀UI界面(一)】加载页面(进度条)1.素材准备2.界面分析3.打开UnityHub创建项目4.开始搭建UI1.准备工作2.背景图片3.导入素材4.配置背景图片5.进度条显示UI搭建6.脚本编写7.演示5.打包结语【Unity使... 查看详情

unity使用ugui实现王者荣耀ui界面加载页面(进度条)(代码片段)

...用UGUI实现王者荣耀UI界面(一)】加载页面(进度条)1.素材准备2.界面分析3.打开UnityHub创建项目4.开始搭建UI1.准备工作2.背景图片3.导入素材4.配置背景图片5.进度条显示UI搭建6.脚本编写7.演示5.打包结语【Unity使... 查看详情

c#控制台console进度条(代码片段)

1说明笔者大多数的开发在Linux下,多处用到进度条的场景,但又无需用到图形化界面,所以就想着弄个console下的进度条显示。2步骤清行显示//清行处理操作intcurrentLineCursor=Console.CursorTop;//记录当前光标位置Console.SetCursorPosition(0,Co... 查看详情

控制台进度条

...理资料的时候,翻出多年前在网上看到的一篇帖子,一个控制台的进度条,非常酷炫,原文出处-传送门。   记得在刚开始接触编程的时候,用控制台写些小工具玩,也喜欢将信息打印到屏幕上,看着不断闪动的屏幕... 查看详情

vue项目页面跳转时候的,浏览器窗口上方的进度条显示(代码片段)

1.安装:cnpminstall--savenprogress2.在main.js中引入:1importNProgressfrom‘nprogress‘2import‘nprogress/nprogress.css‘3.在main.js中进行配置:1NProgress.configure(2easing:‘ease‘,//动画方式3speed:500,//递增进度条的速度4showSpinner 查看详情

flash网站加载太慢,如何加进度条

...flash过大,很久都打不开,页面程空白状,问:如何加入进度条,要自动跳转的,是用flash做还是代码做??求高手解救啊,不会吝啬分数的先用flash做一个加载界面,这个界面只包含加载背景和加载进度条,内容体积将后很小,... 查看详情