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美化表单控件全集
Jun 29 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
php常用表单验证类用法实例
2015/06/18 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
JavaScript中的数学运算介绍
2014/12/29 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
CentOS6.5设置Django开发环境
2016/10/13 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
Python实现文件内容批量追加的方法示例
2017/08/29 Python
django实现用户登陆功能详解
2017/12/11 Python
python实现Adapter模式实例代码
2018/02/09 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
python科学计算之narray对象用法
2019/11/25 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
工业设计毕业生自荐信
2014/04/13 职场文书
婚前协议书
2014/04/15 职场文书
应届毕业生求职信
2014/05/26 职场文书
介绍信的格式
2015/01/30 职场文书
经营目标责任书
2015/05/08 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis