您现在的位置是：网站首页> 编程资料编程资料
HTML5实现自带进度条和滑块滑杆效果html svg生成环形进度条的实现方法HTML5超炫酷粒子效果的进度条的实现示例HTML5触摸事件实现移动端简易进度条的实现方法网页加载进度条详解（推荐）HTML页面缩小后显示滚动条的示例代码
2021-08-31
1359人已围观
简介 本文给大家介绍了HTML5实现自带进度条和滑块滑杆效果，运用progress标签，设置好min和max数值就好，可以用value获取其中的进度值。具体实现代码大家参考下本文
一、H5自带进度条
进度：%
运用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内核的，其他的不支持~~~ 效果如下：
二、H5自带滑块
将input的type设置为range。但是这个属性不是所有浏览器都支持，如果不支持，会返回默认属性，就是
（详情参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range）
默认样式：
H可拖动滑块:
1、自带属性：
(1)、defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2；
默认值 = （设置最大值 < 设置最小值）？设置最小值 : 设置最小值 + ( 设置最大值 - 设置最小值 ) / 2 ———————— 其实就是取中间值
我们可以用value="7"设置滑块的值。
(2)、
min: 设置最小值； max: 设置最大值
(3)、
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：
b) label ：
(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伪类元素，不是所有浏览器都支持。可以获取的轨道
详情参考：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 可以获取的轨道
总结
以上所述是小编给大家介绍的HTML5实现自带进度条和滑块滑杆效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
相关内容
- 使用HTML5 Geolocation实现一个距离追踪器Html5 Geolocation获取地理位置信息实例HTML5的Geolocation地理位置定位API使用教程html5指南-4.使用Geolocation实现定位功能html5指南-7.geolocation结合google maps开发一个小的应用HTML5 Geolocation API的正确使用方法
- 详解canvas绘图时遇到的跨域问题详解如何解决canvas图片getImageData,toDataURL跨域问题
- canvas 下载二维码和图片加水印的方法前端水印的简单实现代码示例前端canvas水印快速制作（附完整代码)手摸手教你用canvas实现给图片添加平铺水印的实现html5 canvas实现给图片添加平铺水印前端使用canvas生成盲水印的加密解密的实现
- 快速创建 HTML5 Canvas 电信网络拓扑图的示例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5调用app分享功能示例（WebViewJavascriptBridge）微信端html5页面调用分享接口示例HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能Html5页面二次分享的实现
- 浅谈html5与APP混合开发遇到的问题总结Html5 APP中监听返回事件处理的方法示例使用html5新特性轻松监听任何App自带返回键的示例HTML5页面中尝试调起APP功能HTML5 Plus 实现手机APP拍照或相册选择图片上传功能HTML5打开本地app应用的方法html5调用app分享功能示例（WebViewJavascriptBridge）
- 在canvas上实现元素图片镜像翻转动画效果的方法HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
- HTML5 新表单类型示例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 浅谈基于Canvas的手绘风格图形库Rough.jshtml5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 基于HTML5 WebGL的3D机房的示例html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
