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 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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中使用Imagick操作PSD文件实例
2015/01/26 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
js jquery数组介绍
2012/07/15 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
javascript实现密码验证
2015/11/10 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Python类的动态修改的实例方法
2017/03/24 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python修改FTP服务器上的文件名
2019/09/11 Python
南京某公司笔试题
2013/01/27 面试题
大学生实习感言
2014/01/16 职场文书
学校献爱心活动总结
2014/07/08 职场文书
党员自我剖析材料
2014/08/31 职场文书
销售代理协议书
2014/09/30 职场文书
清洁工个人工作总结
2015/03/05 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
html实现弹窗的实例
2021/06/09 HTML / CSS
Nginx四层负载均衡的配置指南
2021/06/11 Servers
python实现学生信息管理系统(面向对象)
2022/06/05 Python