时间:2021-05-08
一、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{ background-color: orange; } ::-webkit-progress-value { background-color: rgb(, , ); } ::-webkit-progress-inner-element { border: px solid black; }这里的样式全部是针对webkit内核的,其他的不支持~~~ 效果如下:
二、H5自带滑块
将input的type设置为range。但是这个属性不是所有浏览器都支持,如果不支持,会返回默认属性,就是<input type="text">
(详情参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
默认样式:
<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:
<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 :
<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、外观美化:
-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实现自带进度条和滑块滑杆效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这是一款基于HTML5和JavaScript的进度条应用,这款进度条插件非常有特点,它在进度展示的时候呈现粒子的动画效果,也就是说,进度条在滑动的同时,会产生一
本文实例讲述了PHP使用Session实现上传进度功能。分享给大家供大家参考,具体如下:实现文件上传进度条基本是依靠JS插件或HTML5的FileAPI来完成,
在HTML5中,新增了progress和meter控件。progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装、文件的复制等场景的
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。解决方案首先用.wxml与.wmss代码实现进度条的效果,再通
项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条。所需插件:jquery.js,jquery.form.js。最近在做一个手机web项目,需要