Html5 Slider的技术升级改造

代码1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--Plugin CSS file with desired skin-->
    <link rel="stylesheet" href="./css/ion.rangeSlider.css" />
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>     -->
    <!--jQuery-->
    <script src="./js/jquery-1.11.0.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <!--Plugin JavaScript file-->
    <script src="./js/ion.rangeSlider.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>     -->
  </head>
  <body>
    <input
      id="r1"
      type="text"
      class="js-range-slider"
      name="my_range"
      value=""
    />
    <script>
      $(function () {
        function my_prettify(n) {
          var tip = "不及格";
          if (n <= 0) {
            tip = "不及格";
          } else if (n <= 25) {
            tip = "及格";
          } else if (n < 50) {
            tip = "中等";
          } else if (n < 50) {
            tip = "良好";
          } else {
            tip = "优秀";
          }

          return n + " : " + tip;
        }

        $("#r1").ionRangeSlider({
          skin: "big",
          grid: true,
          min: 0,
          max: 100,
          from: 0,
          step: 25,
          prettify: my_prettify,
        });
      });
    </script>
  </body>
</html>

代码2:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- <link
      rel="stylesheet"
      href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"
    />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> -->

    <!--Plugin CSS file with desired skin-->
    <!-- <link rel="stylesheet" href="./css/ion.rangeSlider.css" /> -->
    <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.css" />
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>     -->
    <!--jQuery-->
    <!-- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> -->
    <script src="./js/jquery-1.7.1.js"></script>
    <script src="./js/jquery.mobile-1.1.0.js"></script>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
    <!--Plugin JavaScript file-->
    <!-- <script src="./js/ion.rangeSlider.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>     -->
  </head>
  <body>
    <div data-role="page">
      <form>
        <label for="s1"> Input slider: <span id="tip1"></span></label>
        <input
          type="range"
          name="slider"
          id="s1"
          value="60"
          min="0"
          max="100"
          step="25"
          data-highlight="true"
        />
        <label for="s2"> Input slider: <span id="tip2"></span></label>
        <input
          type="range"
          name="slider"
          id="s2"
          value="60"
          min="0"
          max="200"
          step="50"
          data-highlight="true"
        />
      </form>
    </div>
    <script>
      $(function () {
        $("input").each(function () {
          $(this).bind("change", function (event, ui) {
            var id = $(this).attr("id");

            var num = id.substr(1, 1);
            var score = $(this).val();
            // console.log(score);
            // var fscore = parseFloat(score);
            // console.log(fscore);
            var max = $(this).attr("max");
            // var fmax = parseFloat(max);
            var frate = score / max;
            var tip = "";
            switch (frate) {
              case 0:
                tip = "未评";
                break;
              case 0.25:
                tip = "差评";
                break;
              case 0.5:
                tip = "及格";
                break;
              case 0.75:
                tip = "良好";
                break;
              case 1:
                tip = "优秀";
                break;
            }
            $("#tip" + num).html(tip);
          });
        });
        $("input").slider("refresh");
      });
    </script>
  </body>
</html>

 

posted @ 2021-08-15 13:22  dshow  阅读(205)  评论(0)  编辑  收藏  举报