html5实现滑块功能之type="range"属性


Posted in HTML / CSS onFebruary 18, 2020

html5实现滑块功能之type="range"属性

1.html5中添加了关于滑块的标签,其实际是扩展了input标签,type属性值为range。

2.感觉挺有意思,就做了一个关于滑块的动画的例子,可以通过开始和结束按钮来控制滑块的滑动和停止,有点类似视频的自动播放和暂停,同时还时时显示了该滑块的值。

3.具体代码如下所示

<!DOCTYPE html>
<html>
<head>
    <title>数字递增组件</title>
    <!--引入jquery-->
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
    <!--做一个播放控件-->
    <div id="movie">
        <!--定义滑块组件-->
        <input type="range" id="slider" min="0" max="1000" step="1" value="0" οnchange="print()" />
        <!--显示滑块组件的当前值-->
        <p>当前值为:<span id="print">0</span></p>
        <!--控制按钮-->
        <button id="start" οnclick="start()">播放</button>
        <button id="stop" οnclick="stop()">停止</button>
    </div>
    
</body>
</html>

<script type="text/javascript">
    //定义一个标识符,用于判断用户点击开始按钮或暂停按钮
    var choose = true;

    //此函数用于显示滑块的当前值
    function print(){
        //获取信息
        var value = parseFloat($("#slider").val());
        //将信息显示
        $("#print").text(value);
    }

    //此函数负责修改value的值
    function changeVal(){
        //使用纯js实现
        /*var value = parseFloat(document.getElementById("slider").value);
        //显示信息
        document.getElementById("print").innerHTML=value;
        if(value==1000){
            return;
        }else{
            document.getElementById("slider").value = value+10;
        }*/

        //使用jquery实现
        var value = parseFloat($("#slider").val());
        //显示信息
        print();
        //修改滑块的值
        if(value==1000 || choose == false){
            return;
        }else{
            $("#slider").val(value+1);
        }
    }
    //此函数负责开始按钮
    function start(){
        choose = true;
        setInterval("changeVal()",10);
    }

    //此函数负责暂停按钮
    function stop(){
        choose = false;
    }
</script>

总结

以上所述是小编给大家介绍的html5实现滑块功能之type="range"属性,希望对大家有所帮助,也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 #HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 #HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 #HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 #HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 #HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
canvas简单连线动画的实现代码
Feb 04 #HTML / CSS
You might like
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Jquery插件写法笔记整理
2012/09/06 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
Angular实现form自动布局
2016/01/28 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
js自定义瀑布流布局插件
2017/05/16 Javascript
Angular实现响应式表单
2017/08/04 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
python实现统计代码行数的方法
2015/05/22 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
Python jieba库用法及实例解析
2019/11/04 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
C语言笔试题回忆
2015/04/02 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
商务信函英语问候语
2015/11/10 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript