html5实现进度条效果动态进度条的实现代码展示
首先我们来了解一下html5实现简单动态进度条效果的原理。
强大的html5为我们提供了一种新的标签<progress>,这个标签可以实现一个静态的进度条效果(如下图),再通过添加简单的js代码,我们就可以实现进度条滚动的效果。
下面我们通过简单的代码示例来介绍html5实现动态进度条的方法。
html5代码:
<progress max="100" value="0" id="pg"></progress>
<progress>标签的使用很简单,意义很明确,并且属性只有以上两个,max表示需要完成的任务量,value是目前完成的任务量(样式看上图)。
js代码:
var pg=document.getElementById('pg');
setInterval(function(e){
if(pg.value!=100) pg.value ;
else pg.value=0;
},100);
效果图:
以上的实现方式不仅更加简单、更加的语义化,同时也极大的简化了我们的代码,灵活性更高了,所以熟练的使用html5是非常有必要的!
不过html5标签的浏览器支持度也是我们需要考虑的一个问题,下面我们来看看<progress>标签的浏览器支持情况。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfhfjj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24