jq移动端评分左右滑动效果

迷茫的码奴
已于 2023-01-29 17:55:48 修改
阅读量536
点赞数
分类专栏： js 文章标签： js html
于 2021-06-18 15:20:08 首次发布
本文链接：https://blog.csdn.net/weixin_47826037/article/details/118027106
版权
js 专栏收录该内容
13 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

</head>
<body>
    <div class="box" id="box">
        <div class="box-wrap">
                <div class="evaluate">
                    <p>您对导购员的服务态度呢？</p>
                    <small>请用0-10分制表示，10分代表一定会推荐，0分代表肯定不会推荐。</small>
                    <nav id="navs">
                        <div id="t_mails"></div>
                        <ul class="ulis">
                            <li>0</li>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </ul>
                    </nav>
                    <div id="two" class="content scores">
                        <p>您能具体描述下您的态度吗？</p>
                        <textarea class="evaluate-textarea"></textarea>
                        <a href="javascript:;" id="btn_submit" class="btn btn-blue">提交</a>
                    </div>
        </div>
    </div>
</html>
<script>
    window.onload = function () {//初始加载
        document.getElementById("t_mails").style.visibility = "hidden";//隐藏  
        var nav = $('navs');
        var t_mall = nav.children[0];
        var ul = nav.children[1];
        var allLis = ul.children;
        var beginX = 0;
        for (var i = 0; i < allLis.length; i++) {
            var li = allLis[i];
            li.onmouseover = function () {
                end = this.offsetLeft;
            }

            li.onmousedown = function () {
                beginX = this.offsetLeft;
            }

            li.onmouseout = function () {
                end = beginX;
            }
        }

        var begin = 0, end = 0;
        setInterval(function () {
            begin = begin + (end - begin) / 10;

            t_mall.style.left = begin + 'px';
        }, 10)

        function $(id) {
            return typeof id ? document.getElementById(id) : null;
        }
    }
    $('.ulis li').on('click', function () {
        // $("#t_mails").innerText = "hello world";
        document.getElementById("t_mails").style.visibility = "visible"; //显示  
        console.log($(this).text())
        document.getElementById("t_mails").innerHTML = $(this).text()
        // $('#t_mails').text()==$(this).text()
        console.log($('#t_mails').innerHTML)
        $(this).siblings('li').removeClass('actives'); // 删除其他兄弟元素的样式
        $(this).addClass('actives'); // 添加当前元素的样式

    });
    //提交按钮点击事件
    $('#btn_submit').on('click', function () {
        console.log($('#t_mails').text())
        console.log($('.evaluate-textarea').val())

        if ($('#t_mails').text() == '') {
            alert("请认真填写导购员态度评分")
            return
        }
        if ($('.evaluate-textarea').val() == '') {
            alert("请认真填写您的态度")
            return
        }
        /*请求参数(这个请求接口有点麻烦，下面还有ajax请求，简单易懂， 只是实例，请求的接口不一致，仅供参考)*/
        var paramObj = {
            httpUrl: 'https://aikesikeapi.youshangwantu.com/UserSurvey/SaveSurvey',
            type: 'post',
            data: {
                userId: userId,
                Remark: $('.evaluate-textarea').val(),
                ShoppingEnvi: $('.single-slider').val(),
                SalerAttitude: $('#t_mails').text()
            }
        }
        /*请求调用*/
        httpRequest(paramObj, function (res) {
            //回调函数

            console.log(res, '成功之后返回值')

            // str = res.match(/"posterUrl":"(\S*)/)[1];
            // // console.log(str)
            // s = str.substring(0, str.length - 3)
            // console.log(s)
            // var img = document.createElement('img'); //创建一个标签
            // var a = document.createElement('a'); //创建一个标签
            // img.setAttribute('src', s); //给标签定义src链接
            // a.setAttribute('href', s); //给标签定义src链接
            // a.setAttribute('download', s); //给标签定义src链接
            // document.getElementById('massage').appendChild(img); //放到指定的id里
            // document.getElementById('massage').appendChild(a); //放到指定的id里
        }, function () {
            alert('网络错误')
        });


        // 下面是ajax请求接口
        $.ajax({
            type: 'post', //也可为get
            url: 'https://aikesikeapi.youshangwantu.com/WechatOAuth2/Index',
            async: false,
            contentType: "application/x-www-form-urlencoded; charset=gbk",
            data: {//参数
                "code": code //转换为json格式
            },
            dataType: 'json',
            beforeSend: function () {
                // show('.load'); 
            },

            success: function (data, status) {

                if (data.data) {
                    userId = data.data.userId
                    console.log(data.data.userId, '用户ID')
                }
                console.log(data.Msg)
                var rstate = data.result;

            },
            complete: function () { //调用后触发（不管成功或失败）
            },
            error: function (data, status, e) {
                alert('接口调用错误！');
            }
        });



        // $(".boxs").css("display", "block");
        // $(".massage").css("display", "block");
        // var textareaTxt = $('.evaluate-textarea').val();
    });
</script>
<style>
    /* 输入框下拉框去掉点击的边框 */
    input,
    textarea,
    select,
    a:focus {
        outline: none;
    }

    .btn {

        background: #ff7e00;
        color: #fff;
        width: 90%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .content {
        width: 95%;
        margin-top: 15px;
        margin-bottom: 40px;
    }
    .boxs {
        z-index: 2;
        display: none;
        background: #000000;
        opacity: 0.5;
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    * {
        margin: 0;
        padding: 0;
        border: none;
        list-style: none;
    }

    body {
        background-color: pink;
    }

    /* 2 */
    #navs {
        margin-top: 20px;
        width: 100%;
        height: 35px;
        background: #f0f0f0;
        margin: 0 auto;
        /* margin-top: 50px; */
        border-radius: 5px;
        position: relative;
        top: 15px;
    }

    #navs ul li {
        float: left;
        width: 9%;
        text-align: center;
        padding: 0.5rem 0;
        background: #f0f0f0;
        color: #000;
        transition: all linear 0.2s;
    }

    #t_mails {
        background: #6396ed;
        position: absolute;
        top: 0px;
        /* padding: 20px 15px; */
        border-radius: 5px;
        width: 10%;
        height: 2.7rem;
        top: -0.2rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 0.3rem;
        background-color: #6396ed;
        text-align: center;
        color: #fff;
        font-size: 1.4rem;
        font-weight: bold;
        /* line-height: 5px; */
        line-height: 2.8rem;
    }
    .box {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #efefef;
    }

    .box-wrap {
        box-sizing: border-box;
        margin: 0 3%;
        padding: 1rem;
        height: 100%;
        background: #ffffff;
    }

    .btn {
        display: block;
        margin: 0 auto;
        border-radius: 1.5rem;
        width: 57.28476821%;
        line-height: 2.5;
        text-align: center;
        font-size: 1.2em;
    }

    .btn-blue {
        color: #fff;
        background: #23519f;
    }

    /*evaluate*/
    .evaluate {
        color: #333333;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .evaluate p {
        padding: 2rem 0 1rem;
    }

    .evaluate p.question {
        padding: 3rem 0 1rem;
    }

    .evaluate small {
        color: #8c8c8c;
    }

    .evaluate-swiper {
        position: relative;
        margin-top: 1rem;
    }

    .evaluate-swiper .swiper-container {
        margin: 0 15%;
    }

    .evaluate-swiper .swiper-slide {
        text-align: center;
        color: #4478d0;
        font-size: 1.5rem;
        padding-top: 1.5rem;
    }

    .evaluate-swiper .swiper-slide-active {
        color: #23519f;
        font-size: 3rem;
        padding-top: 0;
    }

    .evaluate-textarea {
        box-sizing: border-box;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
        resize: none;
        width: 100%;
        height: 5.5rem;
        border: 1px solid;
    }    
</style>
迷茫的码奴
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
jq移动端评分左右滑动效果

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="layout" content="main"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=.
复制链接

扫一扫