首页 > 编程知识 正文

js进度条真实进度,如何制作动态进度条

时间:2023-05-04 00:13:36 阅读:212100 作者:141

JS动态进度条

下面我们使用Visual Studio这个软件来写一个JS的代码,我们可以用JS的代码写一个简单的方法,就是实现一个JS的动态进度条的效果。
那么这个代码要怎么写呢,首先我们需要先在界面上写一下的Html的代码,我们来看一下界面的代码是什么,看以下截图:

在截图中我们可以看到界面的代码就是,先用一个属性为H3的标签文字嵌套一个Loading…然后用一个div里面嵌套着一个div给他们都弄一个类为Kuang和JinDuTiao的名字,然后我们就需要去给他设置一下他的一些属性效果,接下来看一下属性代码的截图:

定义好界面的属性代码我们接着就需要写一下JS的代码。然后实现出动态进度条滚动的JS代码的内容,见截图:

我们通过第45行。先声明width等于0,然后声明一下timer,他这个没有等于0的意思就是声明变量为默认值,默认值就是undefined。然后setInterval的方法就是可以按照指定的周期来调用函数或者计算表达式。然后接着就是宽度每次+等于5,然后判断width>150的话就执行getElementsByClassName的方法让他返回文档中所有指定类名的元素集合,接着给他style属性颜色改为#cd4c49,然后接着也是一样判断他width大于350,当他达到350的时候就更改背景颜色,然后当width大于等于490的时候就不改变颜色了。直接+px。最后给他一个定时器时间的效果。接下来看一下他实现的结果:

这样就可以实现出动态滚动条的一个实现效果了。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。