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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 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安装攻略:常见问题解答(二)
2006/10/09 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
如何将python中的List转化成dictionary
2016/08/15 Python
python 检查文件mime类型的方法
2018/12/08 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
中药专业毕业自荐书范文
2014/02/08 职场文书
大学生优秀自荐信范文
2014/02/25 职场文书
《散步》教学反思
2014/03/02 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
赞助商致辞
2015/07/30 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python