H5自带进度条&滑块
一、H5自带进度条
<div id="d1">
<p id="pgv">进度:0%</p>
<progress id="pg" max="100" value="0"></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 !== 100) {
pg.value++
pgv.innerHTML = '进度:' + pg.value + '%'
} else {
pgv.innerHTML = '加载完成'
clearInterval(timer)
}
}, 100)
}
最终效果如下:
这个显示效果是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: 2px solid black;
/* 进度条的内边框,注意跟outline区分 */
}
这里的样式全部是针对webkit内核的,其他的不支持~~~ 效果如下:
二、H5自带滑块
将input的type设置为range。但是这个属性不是所有浏览器都支持,如果不支持,会返回默认属性,就是<input type="text">
(详情参考https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
默认样式:
<div id="d3">
<p>H5可拖动滑块:</p>
<input type="range" name="points" min="0" max="100" id="h5pro"/>
</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="h5pro" 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="h5pro" list="tickmarks"/>
<datalist id="tickmarks">
<option value="" label="0%">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="" label="50%">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="" label="100%">
</datalist>
(5)、autofocus可以设置或返回滑块是否自动获得焦点,设置为true后,进入网页会自动锁定滑块,在键盘上按上下左右都可以控制
2、外观美化:
input[type=range] {
outline: none;
-webkit-appearance: none;
/* 去除系统默认appearance的样式,常用于IOS下移除原生样式 */
border-radius: 10px;
}
-webkit-appearance: none; 去除默认样式
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
border-radius: 10px;
box-shadow: 1px 1px #def3f8, inset .125em .125em #0d1112;
}
::-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: 25px;
width: 25px;
margin-top: -5px;
background:#7B05E0;
border-radius: %;
border: solid .125em rgba(, , , 0.5);
box-shadow: .125em .125em #3b4547;
}
::-webkit-slider-thumb 可以获取<input type="range">的轨道
H5自带进度条&滑块的更多相关文章
- linux 复 带进度条
rsync命令 #rsync -av --progress /mnt/yidong2/full20100526.tar.gz /mnt/yidong1/ 可以实现本机带进度条提示拷贝,可以实现不同机器 ...
- java进行文件上传,带进度条
网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...
- 赞!带进度条的 jQuery 文件拖放上传插件
jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...
- Extjs 使用fileupload插件上传文件 带进度条显示
一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...
- Android -- 自定义带进度条的按钮
1. 实现了一个带进度条的按钮,完成后显示提示信息,并设置按钮为不可再次被点击
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- 自定义带进度条的WebView , 增加获取web标题和url 回掉
1.自定义ProgressWebView package com.app.android05; import android.content.Context; import android.graph ...
- C# WPF 解压缩7zip文件 带进度条 sevenzipsharp
vs2013附件 :http://download.csdn.net/detail/u012663700/7427461 C# WPF 解压缩7zip文件 带进度条 sevenzipsharp W ...
- Qt带进度条的启动界面(继承QSplashScreen,然后使用定时器)
通过继承QSplashScreen类,得到CMySplashScreen类,然后在CMySplashScreen中定义QProgressBar变量,该变量以CMySplashScreen为父类,这样就 ...
随机推荐
- RawURL
Request.RawUrl表示当前页面, Response.Redirect重新打开页面. 意思就是重新打开当前页面. 和下面一样的 string url=Request.RawUrl: Respo ...
- 基于ACE的TAO开发---一个简单的入门实例-----VS2008(一)
万事开头难,不管做什么事最开始总是最困难的,一旦上手了就好了. 这也是我自己学习corba编程的一点经验和心得.下面的例子主要是保证读者跟着走能立马看到效果. 1.机器上的TAO是实现已经装好的开发版 ...
- ML:自然语言处理NLP面试题
自然语言处理的三个里程碑: http://blog.csdn.net/sddamoke/article/details/1419973 两个事实分别为: 一.短语结构语法不能有效地描写自然语言. 二. ...
- Rx (Reactive Extensions)
The Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using ...
- WEBGL学习【十一】光照模型
<!DOCTYPE HTML> <html lang="en"> <head> <title>Listing 7-3 and 7-4 ...
- linux vim 编辑文件时无法保存
操作ESC + : wq 无反应 那么我们操作SHFT按键,在操作Z按键,连续按两下Z按键即可(保存当前内容且退出)
- 执行目标文件引发的问题:syntax error: word unexpected (expe...
今天不小心把一个目标文件当成了可执行文件放到开发板上进行执行,结果出现了这样一个问题:./hello_qt: line 1: syntax error: word unexpected (expect ...
- Spring环境搭建及简单demo
1. Spring框架简介(以下这段话可用于面试求职) Spring为JavaEE开发提供了一个轻量级的解决方案,主要表现为, IOC(或者叫做DI)的核心机制,提供了bean工厂(Spring容器) ...
- 《黑白团团队》第八次团队作业:Alpha冲刺 第二天
项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第二天 日期:2019/6/16 成员 ...
- 使用sdk自带工具uiautomatorviewer查看app控件属性
双击打开即可 其只显示模拟器中的当前页面,所以需要在模拟器中打开你需要的页面,然后刷新