扣丁学堂HTML5培训简述HTML5如何实现自带进度条

2019-07-24 14:10:40 2365浏览

对HTML5开发技术感兴趣的小伙伴是否知道HTML5如何实现自带进度条呢?不知道的小伙伴也没有关系，本篇文章扣丁学堂HTML5培训小编就给读者们分享一下HTML5如何实现自带进度条，感兴趣的小伙伴就随小编来了解一下吧，希望对小伙伴们有帮助。

扣丁学堂HTML5培训简述HTML5如何实现自带进度条和滑块滑杆效果

一、H5自带进度条

 <div id="d">
   <p id="pgv">进度：%</p>
   <progress id="pg" max="" value=""></progress>
 </div>

运用progress标签，设置好min和max数值就好。可以用value获取其中的进度值

  function staticProgress () {
    var pg = document.getElementById('pg')
    var pgv = document.getElementById('pgv')
    var timer = setInterval(function () {
      if (pg.value !== ) {
        pg.value++
        pgv.innerHTML = '进度：' + pg.value + '%'
      } else {
        pgv.innerHTML = '加载完成'
       clearInterval(timer)
     }
   }, )
 }

最终效果如下：

这个显示效果是chrome浏览器的，IE和FireFox的是另外的样式！

样式更改：

 progress{
      -webkit-appearance: none;
  }
  ::-webkit-progress-bar{
      /* 获取progress */
      background-color: orange;
      /* 进度条未被填充的背景颜色 */
  }
  ::-webkit-progress-value {
     background-color: rgb(, , );
     /* 进度条被填充部分的背景颜色 */
 }
 ::-webkit-progress-inner-element {
     border: px solid black;
     /* 进度条的内边框，注意跟outline区分 */
 }

这里的样式全部是针对webkit内核的，其他的不支持，效果如下：

想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

【扫码进入HTML5VIP免费公开课】

【关注微信公众号获取更多学习资料】【扫码进入HTML5前端开发VIP免费公开课】

查看更多关于“HTML5开发技术资讯”的相关文章>>

标签: HTML5培训 HTML5视频教程 HTML5学习视频 HTML5在线视频 HTML5培训班微信小程序

上一篇扣丁学堂HTML5培训之谈谈ES6语法(汇总中篇) 下一篇千锋扣丁学堂HTML5培训之H5开发工程师面试题及答案

扣丁学堂HTML5培训简述HTML5如何实现自带进度条

热门专区

课程推荐