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 矩阵的使用详解
Mar 20 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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
天津市收音机工业发展史
2021/03/04 无线电
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
angular十大常见问题
2017/03/07 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python Flask实现restful api service
2017/12/04 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
工作会议简报
2015/07/20 职场文书
Python基础之元类详解
2021/04/29 Python
解读Vue组件注册方式
2021/05/15 Vue.js
Python Django项目和应用的创建详解
2021/11/27 Python