Native JS implementation of slider verification and puzzle verification

preface

Have to learn JS one day, today’s practice is JS element CSS style operation; If you’ve been focusing on learning JAVASCRIPT, you’ve forgotten about CSS. Now you can practice javascript and review CSS at the same time. Too much nonsense. Let’s go to the problem.

Topics in this paper, the

  • Topic one: Slide to unlock
    • Let slide to the end of the slider, you can pass the verification.
    • Results the following

  • Topic two: Mosaic lock
    • Let the graphics move to the missing position in the picture, can pass the verification.
    • Results the following

Thinking analytical

The slider validation

  1. To control the movement of the slider, bind the slider to an onInput event.
  2. Gets the width of the container and the width of the slider,
  3. Set the sliding range by the width of the container and the width of the slider,
  4. Finally, judge whether the position of the slider is consistent with the position of the verification success. Generally, the position of the verification success is set at the end of the container.

Code sample

// The slider validation code sample
<style>
        .box {
            width: 500px;
            height: 80px;
            border: 2px solid yellowgreen;
        }

        .left {
            width: 0px;
            height: 80px;
            background-color: pink;
            float: left;
        }

        .gap {
            width: 100px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: skyblue;
            float: left;

        }

        input {
            width: 420px;
            height: 80px;
            position: absolute;
            top: 9px;
            left: 44px;
            opacity: 0.1;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="gap">"" "</div>
    </div>
    <input type="range" value="0" class="move">
    <script>
        var fn = () = > {
            var box = document.querySelector(".box");
            var gap = document.querySelector(".gap");
            var leftColor = document.querySelector(".left");
            var ipt = document.querySelector(".move");

            // Get the width of the container
            var boxWidth = parseInt(window.getComputedStyle(box, null) ["width"]);
            // Get the width of the slider
            var gapWidth = parseInt(window.getComputedStyle(gap, null) ["width"]);
            ipt.oninput = function () {
                leftColor.style.width = (boxWidth - gapWidth) * ipt.value / 100 + "px";

                if (leftColor.style.width == "400px") {
                    alert("Verification successful");
                }
                 // There is a bug in the algorithm. The algorithm divides the width into 100 pieces, and it can not achieve the specific value. The following code will never execute, so how to solve this problem?
                if (leftColor.style.width == ((boxWidth - gapWidth)+"px")) {
                    alert("Verification successful");
                }
            }
        }
        fn();
    </script>
Copy the code

Jigsaw puzzle validation

  1. Get container width, slider width,
  2. Set a random number for the gap to be generated between the right side of the slider and the right side of the container,
  3. At the same time the blank gap is randomly generated, the background image of the slider is positioned to match the part with fewer gaps.
  4. Bind the slider to an onInput event to control the slider movement,
  5. Finally, judge whether the position of the slider is consistent with the position of the successful verification, and the position of the successful verification is the position of the gap.

Code sample

<style>
        .box {
            width: 500px;
            height: 300px;
            background: url(./images/pic0.jpg) no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

        .img {
            width: 80px;
            height: 80px;
            background: url(./images/pic0.jpg) no-repeat;
            background-size: 500px 300px;
            background-position: -0px -110px;
            position: absolute;
            top: 110px;
            left: 0px;
            z-index: 1;
        }

        .gap {
            width: 80px;
            height: 80px;
            background-color: #fff;
            position: absolute;
            top: 110px;
            left: 400px;
        }

        input {
            width: 420px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="img"></div>
        <div class="gap"></div>
    </div><input type="range" value="0" class="move"> <button class="reset"> Refresh </button> <script> var box = document.querySelector(".box"); var img = document.querySelector(".img"); var gap = document.querySelector(".gap"); var ipt = document.querySelector(".move"); var rebt = document.querySelector(".reset"); Var boxWidth = parseInt(window.getComputedStyle(box, null)["width"]); var boxWidth = parseInt(window.getComputedStyle(box, null)["width"]); var imgWidth = parseInt(window.getComputedStyle(img, null)["width"]); console.log(boxWidth, imgWidth); Var fn0_0 = () => {// generate gap range, outside the slider, Var _left = ~~(math.random () * (boxwidth-2 * imgWidth)) + imgWidth; // Set the position of the gap, that is, set it to the left of the container value gap.style.left = _left + "px"; // Set the slider background image position, which should be negative because it is moved to the left. img.style.backgroundPosition = -_left + "px"; return gap.style.left; } var gap_left = parseInt(fn0_0()); Var fn0 = () => {ipt. Oninput = function () {// Drag the event to bind var fn0 = () => {ipt. Oninput = function () {// Img.style. left = (ipt.value / 100) * (boxwidth-imgwidth) + "px"; //0-500px var img_left = parseInt(img.style.left); // There is a bug in the algorithm. The algorithm divides the width into 100 pieces, and it can not achieve the specific value. So for the time being, use the scope. If (math.abs (img_left-gap_left) < 5) {alert(" Unlocked successfully! ") ); img.style.left = "0px"; ipt.value = 0; } // The following code will not be executed because of a flaw in the algorithm. How can we achieve complete equality? So what's the solution? If (img_left == gap_left) {alert(" Unlock successfully! ") ) } } } fn0(); Var fn1 = () => {mbT.onclick = function () {img. Style. Left = "0px"; ipt.value = 0; gap_left = parseInt(fn0_0()); } } fn1();Copy the code

conclusion

Review CSS at the same time also practice to JS is quite good, but I encountered in the process of implementation of the slider and gap can not be 100 percent of the same problem, can only tearful change a condition of judgment, want to ask the universal net friend, how to solve this problem ah?