I. analysis requirements

If your girlfriend sends you a bunch of pictures of clothes, and then asks you which one looks good, you can only choose the one that looks best, what would you do? Why not leave it up to the process to make a choice? The theme of this article is to develop a selection program to solve your girlfriend's selection problem.

The final effect of the page is as shown in the figure:

Let's summarize the functions to be realized:

Multiple images can be uploaded. (there is no need to write background here, but you can choose session storage if you want to store data. Of course, this case is not stored.)
Click start to start selecting back and forth between all the pictures. Select to add a style (shadow style).
When you click stop, the selected result appears.
Click Reset to reset the selection.
Because the default data is the five figures above. So once you click upload, it will be replaced, so click Restore is to restore the default data.

II. Implementation of html and css

ok, the requirement analysis is completed. Next, I started to design the whole interface, right to make the interface look simple and clear. The layout is simple. It is to arrange a bunch of pictures and their names, then the results will be displayed at the bottom, and finally a bunch of buttons. In this way, we can basically use floating layout. So html and css have nothing to say:

html:

<div id="list-image"></div>
    <div id="result">
        //Click to choose!
    </div>
    <div id="list-button">
        <button class="upload-btn btn" id="upload-btn" type="button">
            //upload
            <input type="file" id="upload-input" class="upload-input" multiple>
        </button>
        <button class="start-btn btn" id="start-btn" type="button">start</button>
        <button class="stop-btn btn" id="stop-btn" type="button">Stop it</button>
        <button class="reset-btn btn" id="reset-btn" type="button">Reset</button>
        <button class="origin-btn btn" id="origin-btn" type="button">reduction</button>
</div>

css:

* {
            margin: 0;
            padding: 0;
        }

        #list-image {
            position: relative;
            margin-top: 25px;
        }

        #list-image::after {
            content: "";
            clear: both;
            height: 0;
            display: block;
            visibility: hidden;
        }

        #list-image .list-image-item {
            width: 120px;
            height: 150px;
            float: left;
            margin-left: 15px;
        }

        .list-image-item-active {
            box-shadow: 0 0 15px #2396ef;
        }

        #list-image .list-image-item img {
            width: 120px;
            height: 120px;
            display: block;
        }

        #list-image .list-image-item p {
            text-align: center;
            font-size: 18px;
        }

        #list-button {
            margin: 15px;
        }

        .btn {
            line-height: 1;
            white-space: nowrap;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            transition: 0.1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            padding: 12px 14px;
            font-size: 14px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
            border-radius: 4px;
            outline: none;
        }

        .start-btn,
        .upload-btn {
            background: #66b1ff;
            border-color: #66b1ff;
            color: #fff;
        }

        .start-btn:hover,
        .upload-btn:hover,
        .start-btn:active,
        .upload-btn:active {
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
        }

        .stop-btn:hover,
        .stop-btn:active,
        .reset-btn:hover,
        .reset-btn:active,
        .origin-btn:hover,
        .origin-btn:active {
            color: #57a3f3;
            background-color: #fff;
            border-color: #57a3f3;
        }

        #result {
            color: #2396ef;
            font-size: 25px;
            margin: 2em;
        }

        @media screen and (max-width: 765px) {
            #list-image {
                padding: 20px;
                margin-top: 0;
            }

            #list-image .list-image-item {
                width: 50%;
                margin-left: 0;
            }

            #list-image .list-image-item img {
                width: 100px;
                height: 100px;
                margin: 10px auto;
            }

            #result {
                margin: 0;
                text-align: center;
                margin-bottom: 1em;
            }

            #list-button {
                margin: 0;
                margin-bottom: 1em;
                text-align: center;
            }
        }

        input[type="file"] {
            display: none !important;
        }

Analysis of js logic code

Let's analyze the js code. First, define a bunch of default data:

//Default data
var data = [
    {
        url: "./image/1.jpg",
        text: "1"
    },
    {
        url: "./image/2.jpg",
        text: "2"
    },
    {
        url: "./image/3.jpg",
        text: "3"
    },
    {
        url: "./image/4.jpg",
        text: "4"
    },
    {
        url: "./image/5.jpg",
        text: "5"
    }
];

Then get the variable:

var startBtn = document.getElementById('start-btn');
var stopBtn = document.getElementById('stop-btn');
var originBtn = document.getElementById('origin-btn');
var listImage = document.getElementById("list-image");
var result = document.getElementById('result');
var resetBtn = document.getElementById('reset-btn');
var timer;//timer
var count;//The current selection is
var uploadInput = document.getElementById("upload-input");
var uploadBtn = document.getElementById("upload-btn");

Then render the default image data:

function renderList(data) {
    var str = "";
    data.forEach(function (item) {
        str += '<div class="list-image-item">' +
            '<img src="' + item.url + '" alt="">' +
            '<p>' + item.text + '</p>' +
            '</div>';
    });
    listImage.innerHTML = str;
}
renderList(data);

Then click upload to replace the data:

uploadBtn.onclick = function () {
    return uploadInput.click();
};
uploadInput.onchange = function (event) {
    var file = event.target.files;
    if (typeof file !== 'object') return;
    var uploadData = [];
    for (var i = 0; i < file.length; i++) {
        if (/image\/\w+/.test(file[i].type)) {
            uploadData.push({
                url: window.URL.createObjectURL(file[i]),
                text: (i + 1)
            });
        }
    }
    renderList(uploadData);
}

Important note: Here we need to randomly select pictures, so we need to use timer and random function. Let's define random function first:

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

OK, then complete the function of random selection:

function selectRandom() {
    count = random(1, data.length);
    for (var i = 0; i < listImage.children.length; i++) {
        if (i === count - 1) {
            listImage.children[i].classList.add('list-image-item-active');
        } else {
            listImage.children[i].classList.remove('list-image-item-active');
        }
    }
    timer = setTimeout(function () {
        selectRandom();
    }, 50);
}

Click the start button to start random selection:

 startBtn.onclick = function () {
    if (!timer) {
        selectRandom();
    } else {
        alert("Please stop and click Start!")
    }
}

Click the end button to end the selection:

stopBtn.onclick = function () {
    if (timer && count > 0) {
        clearTimeout(timer);
        timer = null;
        result.textContent = "The best thing to see is:" + count;
        count = 0;
    } else {
        alert("Please click start to stop!");
    }
}

Click the reset button to reset the selected effect:

  resetBtn.onclick = function () {
    result.textContent = "Click to choose!";
    for (var i = 0; i < listImage.children.length; i++) {
        listImage.children[i].classList.remove('list-image-item-active');
    }
  }

Click the restore button to restore the default data:

originBtn.onclick = function () {
    renderList(data);
}

So far, even if it's over, if your girlfriend asks you to help her choose later, you really can't choose it. You can say it's up to the program to choose. ps: hope you don't get angry with your girlfriend, hahaha!

A completed demo.

Important note: due to the limitation of Android phones, multiple attribute cannot be added to the input tag. This is also a bug here. )