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 15 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 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和ACCESS写聊天室(九)
2006/10/09 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python类的用法实例浅析
2015/05/27 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Python多分支if语句的使用
2020/09/03 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
行政助理求职自荐信
2013/10/26 职场文书
初中生操行评语大全
2014/04/24 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
Oracle中update和select 关联操作
2022/01/18 Oracle
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL