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 动画技术
Jul 27 HTML / CSS
详解CSS3中border-image的使用
Jul 18 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
Zend引擎的发展 [15]
2006/10/09 PHP
计数器详细设计
2006/10/09 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
鼠标图片振动代码
2006/07/06 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python实现超级马里奥
2020/03/18 Python
Django中FilePathField字段的用法
2020/05/21 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
后勤岗位职责
2013/11/26 职场文书
毕业生就业协议书
2014/04/11 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
社区党建工作方案
2014/06/10 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
二手车转让协议书
2015/01/29 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python