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教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
基于mysql的论坛(7)
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
js变量、作用域及内存详解
2014/09/23 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python通过future处理并发问题
2017/10/17 Python
使用python实现ANN
2017/12/20 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
详解python 爬取12306验证码
2019/05/10 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
责任书格式范文
2014/07/28 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
525心理健康活动总结
2015/05/08 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
党纪处分决定书
2015/06/24 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书