H5 用滑块控制进度条

最新推荐文章于 2024-03-10 13:55:43 发布
最新推荐文章于 2024-03-10 13:55:43 发布
阅读量444 收藏
点赞数
文章标签： 前端 javascript html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53166050/article/details/128156729
版权

监听 滑动条的变化然后控制进度条的进度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="range" max="100" min="0" step="1" value="0">
<progress value="0" max="100"></progress>
<script>
let sliderBar = document.querySelector('input');
let jdt = document.querySelector("progress");
// 监听 滑动条值的改变
sliderBar.addEventListener('input',function(e){
    jdt.value = e.target.value
})
</script>
</body>
</html>

 

金名臣己
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HTML5+CSS3+JS小实例：翻滚吧乔巴自定义滑块控件
艾恩小灰灰的博客
07-25 236
实例：翻滚吧乔巴自定义滑块控件。技术栈：HTML+CSS+JS。
html进度条选择进度,H5效果篇--进度条的实现
weixin_35327612的博客
06-03 2443
为了演示方便，在第一个例子中，我们通过Javascript去控制时间从而不断地更新进度，并且允许用户通过点击按钮开始进度条的更新，一旦进度条开始更新，则按钮变得不可点击。如果进度条完成的话，则又可以点击按钮。下面我们开始一步步实做这个效果：1)创建HTML5 页首先创建基本的HTML 5基本框架页2) 增加进度条标签首先，在body部分，添加如下的进度条的标签：Task progress:HTML...
H5鼠标拖动滑块图片修改前后对比js特效.zip
07-11
一款鼠标拖动滑块进行图片前后修改对比显示js特效，拖动滑块图片对比代码。 js代码 [removed] var divisor = document.getElementById("divisor"), slider = document.getElementById("slider"); function moveDivisor() {divisor.style.width = slider.value "%";} [removed]
【H5】精美加载进度条
12-02
H5精美加载进度条样式齐全，包含各种颜色（且同时提供模板类自定义颜色及其他样式设置）各种loading样式，不影响原来页面布局，适用于绝大部分网站，直接导入依赖JS与相关样式CSS即可使用。 介绍博文：https://blog.csdn.net/m0_53129012/article/details/110505144
推荐一款优秀的 HTML5 滑动条组件：html5slider
最新发布
gitblog_00009的博客
03-10 495
推荐一款优秀的 HTML5 滑动条组件：html5slider 项目简介 html5slider 是一个基于 JavaScript 和 HTML5 的滑动条组件，它提供了丰富的定制选项和良好的跨浏览器兼容性。 通过使用 html5slider，你可以轻松地在网页上添加交互式滑动条，用于调整音量、设置时间、选择颜色等场景。该组件支持触摸操作，并且可以与其他库（如 jQuery）无缝集成。 应用场景...
HTML5 progress进度条详解
m0_63853518的博客
02-14 1191
记录一些基础用法
H5基础【3】—进度条、获取元素与拖拽
采花小盗周的博客
05-08 1077
一、进度条 二、h5获取元素的方式 三、拖拽事件 1.在h5之前，原生js的拖拽事件 2.h5的拖拽事件
h5 range实现slider滑块功能及样式自定义
IT老五
07-16 2799
公司最近人手不足，于是，又开始折腾起Html来了 本文主要讲slider滑块的实现、样式自定义、刻度绘制、与输入框的联动 我们先来看看效果图 h5 slider.gif 上图中，我们需要实现的难点就是那个绿色的滑块，其它都是输入框及文本框，容易实现。 滑块的实现 其实，只要设置input的type，即可实现滑块功能 &lt;input i...
html5 progress 进度条样式修改
weixin_44805839的博客
07-06 1638
progress 进度条样式修改
非常精美的h5 进度条
12-19
非常精美的h5 进度条 |DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库 <!----> .ClassyCountdownDemo { margin:0 auto 30px auto; max-width:800px; width:calc(100%); padding:30px; display:block } #countdown2 { background:#FFF } #countdown3 { background:rgb(52, 73, 94) } #countdown4 { background:#222 } #countdown5 { background:#222 } #countdown6 { background:#222 } #countdown7 { background:#222 } #countdown8 { background:#222 } #countdown9 { background:#FFF } #countdown10 { background:#3498db } jQuery炫酷图片预览Lightbox插件 A jQuery plugin designed to provide gallery view for images jQuery之家 返回下载页 Example $(document).ready(function() { $('#countdown15').ClassyCountdown({ theme: "flat-colors", end: $.now() + 10000 }); $('#countdown16').ClassyCountdown({ theme: "flat-colors-wide", end: $.now() + 10000 }); $('#countdown17').ClassyCountdown({ theme: "flat-colors-very-wide", end: $.now() + 10000 }); $('#countdown18').ClassyCountdown({ theme: "flat-colors-black", end: $.now() + 10000 }); $('#countdown1').ClassyCountdown({ theme: "white", end: $.now() + 645600 }); $('#countdown5').ClassyCountdown({ theme: "white", end: $.now() + 10000 }); $('#countdown6').ClassyCountdown({ theme: "white-wide", end: $.now() + 10000 }); $('#countdown7').ClassyCountdown({ theme: "white-very-wide", end: $.now() + 10000 }); $('#countdown8').ClassyCountdown({ theme: "white-black", end: $.now() + 10000 }); $('#countdown11').ClassyCountdown({ theme: "black", style: { secondsElement: { gauge: { fgColor: "#F00" } } }, end: $.now() + 10000 }); $('#countdown12').ClassyCountdown({ theme: "black-wide", labels: false, end: $.now() + 10000 }); $('#countdown13').ClassyCountdown({ theme: "black-very-wide", labelsOptions: { lang: { days: 'D', hours: 'H', minutes: 'M', seconds: 'S' }, style: 'font-size:0.5em; text-transform:uppercase;' }, end: $.now() + 10000 }); $('#countdown14').ClassyCountdown({ theme: "black-black", labelsOptions: { style: 'font-size:0.5em; text-transform:uppercase;' }, end: $.now() + 10000 }); $('#countdown4').ClassyCountdown({ end: $.now() + 10000, labels: true, style: { element: "", textResponsive: .5, days: { gauge: { thickness: .03, bgColor: "rgba(255,255,255,0.05)", fgColor: "#1abc9c" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;' }, hours: { gauge: { thickness: .03, bgColor: "rgba(255,255,255,0.05)", fgColor: "#2980b9" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;' }, minutes: { gauge: { thickness: .03, bgColor: "rgba(255,255,255,0.05)", fgColor: "#8e44ad" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;' }, seconds: { gauge: { thickness: .03, bgColor: "rgba(255,255,255,0.05)", fgColor: "#f39c12" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;' } }, onEndCallback: function() { console.log("Time out!"); } }); $('#countdown2').ClassyCountdown({ end: '1388468325', now: '1378441323', labels: true, style: { element: "", textResponsive: .5, days: { gauge: { thickness: .01, bgColor: "rgba(0,0,0,0.05)", fgColor: "#1abc9c" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' }, hours: { gauge: { thickness: .01, bgColor: "rgba(0,0,0,0.05)", fgColor: "#2980b9" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' }, minutes: { gauge: { thickness: .01, bgColor: "rgba(0,0,0,0.05)", fgColor: "#8e44ad" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' }, seconds: { gauge: { thickness: .01, bgColor: "rgba(0,0,0,0.05)", fgColor: "#f39c12" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' } }, onEndCallback: function() { console.log("Time out!"); } }); $('#countdown9').ClassyCountdown({ end: '1388468325', now: '1380501323', labels: true, style: { element: "", textResponsive: .5, days: { gauge: { thickness: .05, bgColor: "rgba(0,0,0,0)", fgColor: "#1abc9c", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' }, hours: { gauge: { thickness: .05, bgColor: "rgba(0,0,0,0)", fgColor: "#2980b9", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' }, minutes: { gauge: { thickness: .05, bgColor: "rgba(0,0,0,0)", fgColor: "#8e44ad", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' }, seconds: { gauge: { thickness: .05, bgColor: "rgba(0,0,0,0)", fgColor: "#f39c12", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;' } }, onEndCallback: function() { console.log("Time out!"); } }); $('#countdown10').ClassyCountdown({ end: '1397468325', now: '1388471324', labels: true, labelsOptions: { lang: { days: 'D', hours: 'H', minutes: 'M', seconds: 'S' }, style: 'font-size:0.5em; text-transform:uppercase;' }, style: { element: "", textResponsive: .5, days: { gauge: { thickness: .02, bgColor: "rgba(255,255,255,0.1)", fgColor: "rgba(255,255,255,1)", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' }, hours: { gauge: { thickness: .02, bgColor: "rgba(255,255,255,0.1)", fgColor: "rgba(255,255,255,1)", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' }, minutes: { gauge: { thickness: .02, bgColor: "rgba(255,255,255,0.1)", fgColor: "rgba(255,255,255,1)", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' }, seconds: { gauge: { thickness: .02, bgColor: "rgba(255,255,255,0.1)", fgColor: "rgba(255,255,255,1)", lineCap: 'round' }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' }, }, onEndCallback: function() { console.log("Time out!"); } }); $('#countdown3').ClassyCountdown({ end: '1390868325', now: '1388461323', labels: true, labelsOptions: { lang: { days: 'Zile', hours: 'Ore', minutes: 'Minute', seconds: 'Secunde' }, style: 'font-size:0.5em; text-transform:uppercase;' }, style: { element: "", textResponsive: .5, days: { gauge: { thickness: .2, bgColor: "rgba(255,255,255,0.2)", fgColor: "rgb(241, 196, 15)" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' }, hours: { gauge: { thickness: .2, bgColor: "rgba(255,255,255,0.2)", fgColor: "rgb(241, 196, 15)" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' }, minutes: { gauge: { thickness: .2, bgColor: "rgba(255,255,255,0.2)", fgColor: "rgb(241, 196, 15)" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' }, seconds: { gauge: { thickness: .2, bgColor: "rgba(255,255,255,0.2)", fgColor: "rgb(241, 196, 15)" }, textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);' } }, onEndCallback: function() { console.log("Time out!"); } }); }); 如果你喜欢这个插件，那么你可能也喜欢: html5+jquery通过鼠标控制的圆形进度条 jQuery和css3旋钮控制按钮-knobKnob
HTML5 SVG圆形滑块进度条代码
07-24
HTML5 SVG圆形滑块进度条代码是一款通过滑块拖动控制进度条数值，默认支持设置进度条最大数值。
h5，video禁止拖动进度条，禁止快进
03-24
利用jq简单控制h5视频播放进度条，让使用者不能快进，可以后退。原理是每500毫秒记录一次进度条时间，如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒，那么就让视频返回到上一个进度，因项目开发中对于视频...
支持移动端的滑块式验证码h5插件
06-14
支持移动端的滑块式验证码h5插件
vue滑块验证效果（pc、h5都可用）
xiaofang_z的博客
09-29 1283
vue滑块验证，web、h5都可用
H5C3常用知识点
liuliuhhxxttxs的博客
11-20 613
background-clip：border-box（默认）/padding-box（不占边框）/content-box （不占边框和内边距）过渡的时间速度曲线：transition-timing-function:ease（默认慢快慢）/linear（匀速）；动画的时间速度曲线：animation-timing-function:ease（默认慢快慢）/linear（匀速）；background-orign：border-box /padding-box（默认）/content-box。
H5新API
qq_57104988的博客
08-30 366
context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高。// 声明一个渐变对象 第一个参数渐变x轴开始位置 第二个参数渐变y轴开始位置 第三个参数渐变结束x轴位置 第四个参数渐变结束y轴位置。 3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法。...
H5 滑块拼图验证
林一怂儿
06-28 661
展示效果 参考视频地址 https://www.bilibili.com/video/BV1NM4y1g7S6 逻辑概述 使用背景图片的继承父节点样式的三张图片，子节点通过使用clip-path裁切图片，通过位置偏移来达成移动效果。 主要代码 布局 <div id="captcha"> <div id="handle"> <span></span> </div> </div> 样式 #captc
h5 video 不显示进度条 不能快进
06-28
### 回答1： h5 video不显示进度条一般是因为视频播放器的控制条被隐藏了，可以在播放器的属性中设置控制条的显示与隐藏。至于不能快进的问题，可能是因为视频的编码格式或者播放器的设置问题导致的。如果是编码格式的问题，可以尝试转换视频格式或者使用优秀的编码软件重新编码视频；如果是播放器的设置问题，可以查看播放器相关的API文档和使用说明，进行相应的设置调整，以解决快进功能无法使用的问题。此外，还可以考虑使用第三方开源的视频播放器插件，例如video.js、jwplayer等，这些插件不仅可以解决视频播放器问题，还可以提供更多的功能和美化效果，提升用户体验。总之，h5 video不显示进度条不能快进，需要仔细分析问题原因，并采取相应的解决措施。 ### 回答2： H5 video 是基于 HTML5 技术开发的视频播放器，由于其良好的兼容性和支持性，已经成为当前主流的网页视频播放方式。然而，有时候我们可能会遇到 H5 video 不显示进度条、不能快进的问题，这主要有以下原因： 1.视频格式问题：H5 video 对一些视频格式的支持性可能存在限制，如果所播放的视频格式不支持，则会导致视频进度条无法显示，无法进行快进等操作。 2.音视频文件不完整或损坏：如果所播放的音视频文件不完整或损坏，可能会导致视频进度条无法显示，无法进行快进等操作。 3.缓存问题：有时候我们可能会在播放过程中遇到视频进度条无法显示、无法快进的情况，这可能是由于缓存未完全加载导致的。可以尝试清除浏览器缓存或重新加载页面解决。 针对以上问题，我们可以采取以下解决措施： 1.检查视频格式：确认所要播放的视频格式是否被 H5 video 支持，如果不支持，可以考虑使用其他格式或转换工具将视频转成支持格式。 2.检查音视频文件完整性：确认所要播放的音视频文件是否完整，并且未损坏。如果文件不完整或损坏，可以重新下载或使用修复工具修复文件。 3.清除浏览器缓存：在遇到视频进度条无法显示、无法快进等问题时，可以尝试清除浏览器缓存，重新加载视频页面。 除此之外，为了提高 H5 video 在播放过程中的体验，我们也可以采用以下建议： 1.视频预加载：在加载页面时预先加载视频文件，以保证视频缓存完全。 2.网络优化：优化网络连接，提高视频下载速度，避免视频卡顿或加载缓慢的情况。 3.增加交互体验：可以添加交互组件，如暂停、快进、倒退、全屏等功能，以提高用户体验。 ### 回答3： 近年来，随着移动互联网的迅速发展，H5视频作为一种使用方便、便于传播的视频播放方式逐渐受到更多人的喜爱。然而，在使用H5视频时，有时会遇到一些问题，比如无法显示进度条，不能快进等问题。这些问题可能会给用户带来不便和困扰。 首先，对于H5视频无法显示进度条的问题，我们可以尝试检查以下几个方面。首先，我们需要确定视频的格式是否与浏览器兼容。如果视频格式不被浏览器支持，那么就会出现无法显示进度条的情况。要解决这个问题，我们需要在编码视频的时候，选择浏览器支持的格式进行编码，或者通过引入第三方库进行视频格式兼容的处理。 其次，我们还需要检查是否需要设置视频的属性。有些H5视频播放器需要对视频属性进行设置，以便正确地显示进度条。需要设置的属性包括视频的宽度、高度、播放时长、总时长等。正确地设置这些属性可以确保视频播放时进度条的显示正常。 最后，对于H5视频不能快进的问题，我们需要检查视频源文件是否正常。如果视频源文件损坏或者遗失某些数据，那么就会影响到视频的正常播放和快进。此时，我们需要重新获取或修复视频源文件，以便确保视频播放正常。 除了上述几点，还有一些其它的问题可能会导致H5视频无法显示进度条或不能快进。比如网络状况不佳，服务器响应慢等等。针对这些问题，我们需要进一步深入定位问题，并采取相应的修复措施。 总之，H5视频作为一种现代化的视频播放方式，不仅使用方便，而且便于传播，可以满足人们在移动设备上观看视频的需求。但是在使用过程中会遇到一些问题，我们需要积极解决这些问题，以便更好地使用H5视频。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值