一、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自带进度条&滑块的更多相关文章

  1. linux 复 带进度条

    rsync命令 #rsync -av --progress /mnt/yidong2/full20100526.tar.gz /mnt/yidong1/ 可以实现本机带进度条提示拷贝,可以实现不同机器 ...

  2. java进行文件上传,带进度条

    网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...

  3. 赞!带进度条的 jQuery 文件拖放上传插件

    jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果.作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 H ...

  4. Extjs 使用fileupload插件上传文件 带进度条显示

    一.首先我们看看官方给出的插件的解释: 一个文件上传表单项具有自定义的样式,并且可以控制按钮的文本和 像文本表单的空文本类似的其他特性. 它使用一个隐藏的文件输入元素,并在用户选择文件后 在form提 ...

  5. Android -- 自定义带进度条的按钮

    1. 实现了一个带进度条的按钮,完成后显示提示信息,并设置按钮为不可再次被点击

  6. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  7. 自定义带进度条的WebView , 增加获取web标题和url 回掉

    1.自定义ProgressWebView package com.app.android05; import android.content.Context; import android.graph ...

  8. C# WPF 解压缩7zip文件 带进度条 sevenzipsharp

      vs2013附件 :http://download.csdn.net/detail/u012663700/7427461 C# WPF 解压缩7zip文件 带进度条 sevenzipsharp W ...

  9. Qt带进度条的启动界面(继承QSplashScreen,然后使用定时器)

    通过继承QSplashScreen类,得到CMySplashScreen类,然后在CMySplashScreen中定义QProgressBar变量,该变量以CMySplashScreen为父类,这样就 ...

随机推荐

  1. MySQL快速创造百万测试数据

    CREATE TABLE `vote_record_memory` ( `id` INT (11) NOT NULL AUTO_INCREMENT, `user_id` VARCHAR (20) NO ...

  2. 【从零开始】【Java】【2】项目最开始都有什么鬼

    闲聊 刨其根知其底. 让我们从一开始就慢嚼细咽. 开始 先来看下项目都有什么: 项目结构图 pom文件图 项目结构 项目=核心代码+依赖管理文件+说明文件+IDE配套文件+外部依赖包: 核心代码:sr ...

  3. Java并发-J.U.C之AQS

    AQS(Abstract Queue Synchronizer)介绍 [死磕Java并发]—–J.U.C之AQS(一篇就够了) 下面讲解具体的Java并发工具类 1 CountDownLatch 参考 ...

  4. input[type=radio]选中的样式变化

    input[type=radio]:hover{ border: 2px solid #D0D0D0; } input[type=radio]:focus{ border: 2px solid #1B ...

  5. Redmine 甘特图导出 PDF 和 PNG 中文乱码问题

    Redmine使用了RMagick来处理图片,fpdf处理PDF,并在调用时设定了字体PDF中文字体 redmine 中关于PDF字体设置的代码 case pdf_encoding           ...

  6. 原生js模拟双色球

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  7. 计蒜客 宝藏 (状压DP)

    链接 : Here! 思路 : 状压DP. 开始想直接爆搜, T掉了, 然后就采用了状压DP的方法来做. 定义$f[S]$为集合$S$的最小代价, $dis[i]$则记录第$i$个点的"深度 ...

  8. Python JSON - 世界人口图

    世界人口图 从https://datahub.io/网站搜索population,下载世界人口json数据. from pygal.maps.world import COUNTRIES def ge ...

  9. HDU 2857 Mirror and Light

    /* hdu 2857 Mirror and Light 计算几何 镜面反射 */ #include<stdio.h> #include<string.h> #include& ...

  10. ibatis的批处理

    (1)spring模式:尽管spring已经配置了事务,但以下代码中还是要设置事务,不然batch不会起作用;另外这里虽然设了一下事务处理,但对全局事务并不会造成影响;注:不启用事务将建立多次连接,这 ...