原生js PC端或移动web app端滑动杆帮助快速录入数据

最新推荐文章于 2022-09-19 23:16:57 发布

原创最新推荐文章于 2022-09-19 23:16:57 发布 · 760 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js滑动杆 #移动端 #input快速滑动录入 #移动web app

web前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一款适用于移动端的滑动评分插件，通过触摸操作实现精准评分。该插件支持0到10分的评分范围，并为PC端和移动端提供了不同的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端滑动杆帮助快速录入input输入框的值（PC端与移动端的目录结构一致，images与css共用，只有html不一样，pc端的html在最下面，PC端与移动端的html根据自己的需要自由选择）

先看效果

这里写图片描述
**

目录结构（自己在本机建一个这样的结构）

这里写图片描述

用到的图片（两张）

这里写图片描述

移动端的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<title>js滑动杆打分插件DEMO演示</title>

<link type="text/css" href="css/style.css" rel="stylesheet" />

</head>
<body>

<div class="grade_warp">

    <div class="User_ratings User_grade" id="div_fraction0">
        <div class="ratings_bars">
            <span id="title0">0</span>
            <span class="bars_10">0</span>
            <div class="scale" id="bar0">
                <div></div>
                <span id="btn0"></span>
            </div>
            <span class="bars_10">10</span>
        </div>
    </div>
</div>  

<script type="text/javascript">
scale = function (btn, bar, title) {
    this.btn = document.getElementById(btn);
    this.bar = document.getElementById(bar);
    this.title = document.getElementById(title);
    this.step = this.bar.getElementsByTagName("DIV")[0];
    this.init();
};
scale.prototype = {
    init: function () {

        var f = this, g = document, b = window, m = Math;
        document.getElementById("btn0").addEventListener("touchstart", function(e) {
            var x = (e || b.event).changedTouches[0].pageX;
            var l = this.offsetLeft;
            var max = f.bar.offsetWidth - this.offsetWidth;
            g.addEventListener("touchmove", function(e) {
                var thisX = (e || b.event).changedTouches[0].pageX;
                var to = m.min(max, m.max(-2, l + (thisX - x)));
                f.btn.style.left = to + 'px';
                f.ondrag(m.round(m.max(0, to / max) * 100), to);
                b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
            });
            g.addEventListener("touchend", function(e) {
                new Function('this.onmousemove=null')
            });
        })
    },
    ondrag: function (pos, x) {
        this.step.style.width = Math.max(0, x) + 'px';
        this.title.innerHTML = pos / 10 + '';
    }
}
new scale('btn0', 'bar0', 'title0');
</script>

</body>
</html>

style.css

@charset "utf-8";/* CSS Document */
body{margin:0;padding:0;font-family:"宋体";background:#fff;}
a,a:hover{text-decoration:none;cursor: pointer;outline:none;}
ul{list-style:none;}

/*用户评分*/
.grade_warp{width:840px;margin:10px auto 15px auto;}
.User_grade{width:420px;margin: auto auto 10px auto;overflow:hidden;float:left;}
.User_ratings .ratings_title{width:815px;height:78px;font-family:"微软雅黑","宋体";font-size:24px;color:#aaaaaa;}
.User_ratings .ratings_title01{width:407px;height:auto;font-family:"微软雅黑","宋体";font-size:14px;color:#aaaaaa;}
.User_ratings .ratings_title p{float:left;}
.User_ratings .ratings_title p span{font-size:48px;}
.User_ratings .ratings_title p i{color:#7dc234;font-style:normal;}
.User_ratings .ratings_title01 p span{font-size:18px;}
.User_ratings .ratings_title01 p i{color:#7dc234;font-style:normal;}
.User_ratings .ratings_title01 input{width:120px;height:48px;border:0;margin:15px auto auto 45px;float:left;background:url(../images/batton_01.png) -202px -2441px no-repeat;}
.User_ratings .ratings_title01 input:hover{background:url(../images/batton_01.png) -202px -2489px no-repeat;}
.User_ratings .ratings_title01 input01{background:url(../images/batton_01.png) -202px -2537px no-repeat;}
.User_ratings .ratings_title input{width:120px;height:48px;border:0;margin:15px auto auto 45px;float:left;background:url(../images/batton_01.png) -202px -2441px no-repeat;}
.User_ratings .ratings_title input:hover{background:url(../images/batton_01.png) -202px -2489px no-repeat;}
.User_ratings .ratings_title input01{background:url(../images/batton_01.png) -202px -2537px no-repeat;}
.User_ratings .ratings_bars{width:407px;height:27px;margin-top:10px;float:left;}
.User_ratings .ratings_bars #title0{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title1{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title2{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title3{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars #title4{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
.User_ratings .ratings_bars .bars_10{font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;line-height:25px;float:left;color:#a0a0a0;}
.User_ratings .ratings_bars .scale{width:299px;height:13px;float:left;margin:7px 10px auto 10px;position:relative;background:url(../images/progress02.png) 0 0 no-repeat;}
.User_ratings .ratings_bars .scale div{width:0px;position:absolute;width:0;left:0;height:13px;bottom:0;background:url(../images/progress02.png) 0 -14px no-repeat;}
.User_ratings .ratings_bars .scale span{width:10px;height:26px;position:absolute;left:-2px;top:-7px;cursor:pointer;background:url(../images/j.png) no-repeat;}

PC端的 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js滑动杆打分插件DEMO演示</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="grade_warp">
    <div class="User_ratings User_grade" id="div_fraction0">
        <div class="ratings_bars">
            <span id="title0">0</span>
            <span class="bars_10">0</span>
            <div class="scale" id="bar0">
                <div></div>
                <span id="btn0"></span>
            </div>
            <span class="bars_10">10</span>
        </div>
    </div>
</div>  
<script type="text/javascript">
scale = function (btn, bar, title) {
    this.btn = document.getElementById(btn);
    this.bar = document.getElementById(bar);
    this.title = document.getElementById(title);
    this.step = this.bar.getElementsByTagName("DIV")[0];
    this.init();
};
scale.prototype = {
    init: function () {
        var f = this, g = document, b = window, m = Math;
        f.btn.onmousedown = function (e) {
            var x = (e || b.event).clientX;
            var l = this.offsetLeft;
            var max = f.bar.offsetWidth - this.offsetWidth;
            g.onmousemove = function (e) {
                var thisX = (e || b.event).clientX;
                var to = m.min(max, m.max(-2, l + (thisX - x)));
                f.btn.style.left = to + 'px';
                f.ondrag(m.round(m.max(0, to / max) * 100), to);
                b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
            };
            g.onmouseup = new Function('this.onmousemove=null');
        };
    },
    ondrag: function (pos, x) {
        this.step.style.width = Math.max(0, x) + 'px';
        this.title.innerHTML = pos / 10 + '';
    }
}
new scale('btn0', 'bar0', 'title0');
</script>                  
</body>
</html>