HTML滑动条自动滑动,HTML5新特性——自定义滑动条(input[type=range])
HTML 4.01 与 HTML5之间的差异
以下 input 的 type属性值是 HTML5 中新增的:
color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。
input的type属性
设置input的type="range"即可得到滑动条控件,如下:
const range = document.getElementById('range');
function changeV() {
console.log(range.value);
}
滑动条对应属性
max - 规定允许的最大值。
min - 规定允许的最小值。
step - 规定合法数字间隔。
value - 规定默认值。
下面我们来使用一下上面的各个属性(示例:通过滑动条控制元素大小):
const range = document.getElementById('range');
function changeV() {
const boxL = parseInt(range.value);
console.log(boxL);
const box = document.getElementsByClassName('box')[0];
box.style.width = boxL + 'px';
box.style.height = boxL + 'px';
}
示例中:
min - 0
max - 200
step - 1
value - 20
对应初始样式如下:
滑动滑动条后的gif图如下:
如何让滑动条控件更加好看
先看两个不同效果示例图:
上面两个红色框中的滑动条明显比默认样式好看很多,那么它们是如何实现的呢,接下来我们讲实现过程:
两个不同样式滑动条的实现过程
这里把对应滑动条的相关代码贴出来:
周期
速度
/* 这里不考虑浏览器的兼容性 */
#control input[type="range"] {
width: 100%;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background: -webkit-linear-gradient(#ffa200, #ffa200) no-repeat white;
background-size: 50% 100%; /* 因为周期默认value=0.50正好占50% */
}
/* -webkit-slider-thumb仅对谷歌浏览器有效 */
#control input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #aaa;
width: 8px;
height: 20px;
border-radius: 4px;
cursor: pointer;
}
#control input[type="range"]::-webkit-slider-thumb:hover {
background: #666;
}
/* 左侧渐变色的写法,默认滑块在最左侧所以下面white为0% */
#control #speed {
background: linear-gradient(to right, #ffa200, white 0%, white);
background-size: 100% 100%;
}
const duration = document.getElementById('dur');
const speed = document.getElementById('speed');
function changeV() {
durVal = parseFloat(duration.value);
spdVal = parseFloat(speed.value);
const durationPercent = parseFloat(durVal, 2) * 100
const speedPercent = parseFloat((spdVal / 5), 2) * 100
duration.style.backgroundSize = `${durationPercent}%, 100%`
speed.style.background = `linear-gradient(to right, #ffa200, white ${speedPercent}%, white`
};
相信大家结合代码可以清晰的掌握两种滑动条的实现方法,这里就不过多解释了
gif效果局部展示:
文章中用到的示例演示地址
写在最后
前端是一个庞大的体系,很多知识在没用到的时候也许我们根本不知道它多有用。就比如文中的滑动条,工作中很难碰到,一旦要用的时候我们还得去琢磨一番,这里通过自己的讲解相信可以让需要的人更好的使用滑动条功能,如果觉得本文对你有所帮助不妨点个赞再走吧,谢谢啦!
H5滑条(input type=range)
input[type=range] { -webkit-appearance: none; width: 230px; border-radius: 10px; /*这个属性设置使填充进度条时的图形为 ...
ajax利用html5新特性带进度条上传文件
http://blog.csdn.net/pkgray/article/details/27591283 http://www.matlus.com/html5-file-upload-with-pr ...
input type=range 进度条的自定义样式
/* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. 同时字符集声明也被简化了:
随机推荐
node.js cluster多进程、负载均衡和平滑重启
1 cluster多进程 cluster经过好几代的发展,现在已经比较好使了.利用cluster,可以自动完成子进程worker分配request的事情,就不再需要自己写代码在master进程中rob ...
集合框架学习笔记<;二>;
1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和ILis ...
Java [Leetcode 328]Odd Even Linked List
题目描述: Given a singly linked list, group all odd nodes together followed by the even nodes. Please no ...
Ubuntu 误改/etc/sudoers 文件权限
添加用户时不小心修改了/etc/sudoers 权限,结果不能sudo了,Ubuntu默认关闭root帐户,结果傻X了,无法改回了. 方法如下: 1.重启机器,开机按ESC,进入恢复模式 2.此时,磁 ...
【集合框架】JDK1.8源码分析之ArrayList详解(一)
[集合框架]JDK1.8源码分析之ArrayList详解(一) 一. 从ArrayList字表面推测 ArrayList类的命名是由Array和List单词组合而成,Array的中文意思是数组,Lis ...
翻译:group_concat()函数(已提交到MariaDB官方手册)
本文为mariadb官方手册:group_concat()函数的译文. 原文:https://mariadb.com/kb/en/group_concat/ 我提交到MariaDB官方手册的译文:ht ...
[Objective-C]编程艺术 笔记整理
看了,发现不少平时不注意的或注意但没有系统总结的东西,特此记录一下. 这次没有整理完,后续更新会结合手里的一些其他资料整理. 新博客wossone ...
【Teradata Utility】系统工具使用
List two ways in which a system utility can be started. Explain how to use the following utilities t ...
VS2015应用NuGet
一.什么是Nuget Nuget是 ASP .NET Gallery 的一员.NuGet 是免费.开源的包管理开发工具,专注于在 .NET 应用开发过程中,简单地合并第三方的组件库. 当需要分享开发的 ...
HTML滑动条自动滑动,HTML5新特性——自定义滑动条(input[type=range])相关推荐
- 让页面滑动流畅得飞起的新特性:Passive Event Listeners
声明:本文来自腾讯增值产品部官方公众号小时光茶社,为CSDN原创投稿,未经许可,禁止任何形式的转载. 作者:陈志兴,腾讯高级工程师,11年毕业后加入腾讯,期间主要负责过QQ文件传输质量优化.本地文件共 ...
- HTML5新特性知识点总结
一.HTML5特性 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他 ...
- Html5新特性归纳
Html5新特性 文章目录 Html5新特性 一.简介 二.十大新特性 1.语义化结构化标签 1.section 2.header 3.footer 4.nav 5.article 6.aside 7 ...
- HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签 基于菜鸟教程的个人向学习笔记 菜鸟教程 文章目录 ...
- HTML5新特性总结 1
文章目录 HTML5 HTML5 浏览器支持 HTML5新元素 HTML5 Canvas 浏览器支持 创建一个画布(Canvas) 使用 JavaScript 来绘制图像 画线.画圆.写字.渐变效果 ...
- HTML5新特性总结大全
一.HTML5概念: 1.什么是HTML5: (1)HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准: (2)HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 ...
- html5储存类型特点,避免踩雷!你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
- html5 svg特性,HTML5新特性——HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...
- Html5新特性总览
Html5新特性总览 1.HTML5 新元素 标签 描述 < article> 定义页面独立的内容区域. < aside> 定义页面的侧边栏内容. < bdi> 定 ...
最新文章
- HDU.4903.The only survival(组合 计数)
- linux4.19安装教程,树莓派4安装Ubuntu 19.10的教程详解
- PL/SQL Developer 和 instantclient客户端快速安装配置(图文)
- MySQL查询过程及Scheme设计与数据类型优化
- 【TensorFlow】——合并与分割(stack、concat、split)
- 由于没有远程桌面授权服务器可以提供许可证,远程会话被中断
- 【Mac】Mac下SSH免密登录localhost
- 大学计算机思维导图_【21计算机考研】改考408+1!上海电力大学翻倍扩招,仍考数据结构!...
- FastAPI + Vue 前后端分离 接口自动化测试工具 apiAutoTestWeb
- python密码字典库_python生成密码字典的方法
- oracle 下载 pb12.5,PowerBuilder 12.6
- 大学计算机应用基础教学设计,大学计算机应用基础电子教案设计.doc
- AndroidStudio升级到3.1+之后,出现Java.util.NoSuchElementException
- wnmp支持php文件,Windows下配置nginx+php(wnmp)
- ESPHome 和 Home Assistant传感器之TMT6000 环境光握手
- CSS绘制形状(三角形、四分之一圆、半圆、圆、梯形、球体、菱形)
- eye-in-hand手眼标定系统
- Cannot access memory at adress 0xbf9
- HDFS 细粒度锁优化,FusionInsight MRS有妙招
- LeetCode【每日一题】 1095. 山脉数组中查找目标值