博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现进度条效果
阅读量:6965 次
发布时间:2019-06-27

本文共 673 字,大约阅读时间需要 2 分钟。

需求分析:

  最近学习javascript客户端脚本语言,学到了两个定时器函数setInterval()和setTimeout(),回想起以前在网页上看到的进度条效果可以使用定时器来实现,所以完成了进度条的设计。

编写思路:

  定义一个div作为进度条总体边框,span作为里面的内容,初始时span宽度为0,随着定时器的间隔不断增加span的宽度,直到与进度条总体宽度相同。

  1.匀速推进的进度条:进度条推进的速度为定值

  2.速度随机推进的进度条(为了模仿网页加载过程中加载速度的不稳定变化):进度条推进速度随机

效果演示:

具体实现:

  setInterval()实现代码:

  setTimeout实现代码:

设计实现中出现的问题的问题及解决方法:

  问题:setInterval()函数  可以放在window.onload(){}中,直接放在head中 。setTimeout()函数  放在window.onload(){}中不起作用。

  解决办法:通过网上查找,找到了出错原因。function n(){}被定义在了window.onload的处理方法里,成了一个内部函数,并没有暴露在window对象下,而setTimeout()的运行时环境是在window下的,会找不到这个方法,这个跟冲突没关系。 当你去掉window.onload之后,funciton n(){}就暴露在window下了,就可以找到了。

转载于:https://www.cnblogs.com/pujianguo/p/5300301.html

你可能感兴趣的文章
和技术无关的习惯
查看>>
不常用但是挺有用的css
查看>>
vue的首页优化小记
查看>>
前后端分离的优缺点
查看>>
为您揭秘当今直播源码为何如此火爆
查看>>
maven配置环境变量
查看>>
python学习三:列表、元组、字典、集合
查看>>
Netty 框架总结「ChannelHandler 及 EventLoop」
查看>>
Linux 下启动 Tomcat 抛出Can't connect to X11 window server 问题的解决方法
查看>>
Hexo博客NexT主题美化之显示当前浏览进度
查看>>
java版b2b2c社交电商spring cloud分布式微服务(七)springboot开启声明式事务
查看>>
品质生活正式开启,欧普照明&华为智选再创智能家居里程碑式突破
查看>>
【本人秃顶程序员】分库分表怎么才能无限扩容,看这篇文章就对了
查看>>
迁移潮来袭!数十个项目宣布即将停止支持 Python 2
查看>>
Javascrip—装饰器(7)
查看>>
Java 11 已发布,String 还能这样玩!
查看>>
(一)java版电子商务spring cloud分布式微服务b2b2c社交电商-服务的注册与发现(Eureka)...
查看>>
java版spring cloud+spring boot+redis多租户社交电子商务平台
查看>>
使用DataV制作实时销售数据可视化大屏
查看>>
Hello Juejin
查看>>