HTML5实现自带进度条和滑块滑杆效果


Posted in HTML / CSS onApril 17, 2018

一、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)
     }
   }, )
 }

最终效果如下:

HTML5实现自带进度条和滑块滑杆效果

这个显示效果是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实现自带进度条和滑块滑杆效果

二、H5自带滑块

将input的type设置为range。但是这个属性不是所有浏览器都支持,如果不支持,会返回默认属性,就是<input type="text">

(详情参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

默认样式:

HTML5实现自带进度条和滑块滑杆效果

<div id="d">
   <p>H可拖动滑块:</p>
   <input type="range" name="points" min="" max="" id="hpro"/>
 </div>

1、自带属性:

(1)、defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

默认值 = (设置最大值 < 设置最小值)?设置最小值 : 设置最小值 + ( 设置最大值 - 设置最小值 ) / 2     ———————— 其实就是取中间值

我们可以用value="7"设置滑块的值。

(2)、<input type="range" min="-10" max="10">

min: 设置最小值; max: 设置最大值

(3)、<input type="range" min="5" max="10" step="0.01">

step: 设置步进值,默认是1。如果min或者max设置了小数点,比如:max="3.14",这个小数点就取不到了,那么可以将step设置为: step="any"。

(4)、hash marks和label:

注意:目前没有哪个浏览器完全支持hash marks和label这两个属性,比如Firefox两个都不支持,Chrome支持hash marks但是不支持label.

a) hash marks:

HTML5实现自带进度条和滑块滑杆效果

<input type="range" name="points" min="" max="" step="any" id="hpro"  list="tickmarks"/>
  <datalist id="tickmarks">
      <option value="">
      <option value="">
      <option value="">
      <option value="">
      <option value="">
      <option value="">
      <option value="">
     <option value="">
     <option value="">
     <option value="">
     <option value="">
 </datalist>

b) label :

HTML5实现自带进度条和滑块滑杆效果

<input type="range" name="points" min="" max="" step="any" id="hpro"  list="tickmarks"/>
  <datalist id="tickmarks">
      <option value="" label="%">
      <option value="">
      <option value="">
      <option value="">
      <option value="">
      <option value="" label="%">
      <option value="">
     <option value="">
     <option value="">
     <option value="">
     <option value="" label="%">
 </datalist>

(5)、autofocus可以设置或返回滑块是否自动获得焦点,设置为true后,进入网页会自动锁定滑块,在键盘上按上下左右都可以控制

2、外观美化:
 

input[type=range] {
     outline: none;
     -webkit-appearance: none;
     /* 去除系统默认appearance的样式,常用于IOS下移除原生样式 */
     border-radius: px;
 }

-webkit-appearance: none; 去除默认样式

input[type=range]::-webkit-slider-runnable-track {
  height: px;
  border-radius: px;
  box-shadow:  px px #deff, inset  .em .em #d;
 }

::-webkit-slider-runnable-track 是个CSS伪类元素,不是所有浏览器都支持。可以获取<input type="range">的轨道

详情参考:https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none; /* 去除滑块的默认样式 */
   height: px;
   width: px;
   margin-top: -px;
   background:#BE;
   border-radius: %;
   border: solid .em rgba(, , , .);
   box-shadow:  .em .em #b;
 }

::-webkit-slider-thumb 可以获取<input type="range">的轨道

总结

以上所述是小编给大家介绍的HTML5实现自带进度条和滑块滑杆效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 #HTML / CSS
canvas线条的属性详解
Mar 27 #HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 #HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 #HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 #HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 #HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 #HTML / CSS
You might like
PHP中读写文件实现代码
2011/10/20 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
python 删除非空文件夹的实例
2018/04/26 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
Python常用的json标准库
2019/02/19 Python
Python 使用多属性来进行排序
2019/09/01 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
keras的三种模型实现与区别说明
2020/07/03 Python
python实现按日期归档文件
2021/01/30 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
大专生简历的自我评价
2013/11/26 职场文书
办公室文员工作职责
2014/01/31 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
奉献演讲稿范文
2014/05/21 职场文书
综合实践活动报告
2015/02/05 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript