假如女朋友要求帮她挑选衣服怎么办

一. 分析需求

假如你的女朋友发给你一堆衣服的图片，然后问你哪件好看，只能选一件最好看的，你会如何做？为什么不交给程序来进行抉择呢？本文的主题就是开发一个选择程序来解决你的女朋友的选择问题。

页面最终效果如图所示:

我们来总结一下要实现的功能:

可以上传多张图片。（这里不需要写后台也是可以的，只不过如果要存储数据可以选择会话存储, 当然本例没有被存储）。
点击开始的时候会开始在所有的图片之间来回选择。选择加了一个样式（阴影样式）。
点击停止的时候，出现选择的结果。
点击重置也就重置选择效果。
因为默认数据是以上的 5 张图。所以一旦点击了上传将会被替换掉，所以点击还原就是还原成默认的数据。

二. 实现 html 与 css

ok，需求分析完成。接下来开始设计整个界面, 没错为了让界面看起来比较简洁明了。布局很简单。就是排列一堆图片以及图片名, 然后结果显示在下方，最后就是排列一堆按钮。如此一来基本用浮动布局也可以办到。所以 html 和 css 都没什么好说的:

html:

<div id="list-image"></div>
    <div id="result">
        点击开始选择吧!
    </div>
    <div id="list-button">
        <button class="upload-btn btn" id="upload-btn" type="button">
            上传
            <input type="file" id="upload-input" class="upload-input" multiple>
        </button>
        <button class="start-btn btn" id="start-btn" type="button"> 开始 </button>
        <button class="stop-btn btn" id="stop-btn" type="button"> 停止 </button>
        <button class="reset-btn btn" id="reset-btn" type="button"> 重置 </button>
        <button class="origin-btn btn" id="origin-btn" type="button"> 还原 </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;}

三. 分析 js 逻辑代码

咱们来分析一下 js 代码，首先定义一堆默认数据:

// 默认数据
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"
    }
];

然后获取变量:

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;// 定时器
var count;// 当前选择的是
var uploadInput = document.getElementById("upload-input");
var uploadBtn = document.getElementById("upload-btn");

接着渲染默认的图片数据:

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);

然后点击上传按钮会重新替换数据:

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);
}

重要说明: 这里要随机选择图片所以要用到定时器和随机函数，咱们先把随机函数定义下来:

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

好，接下来完成随机选择的功能:

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);
}

点击开始按钮，开始随机选择:

 startBtn.onclick = function () {if (!timer) {selectRandom();
    } else {alert("请先停止再点击开始!")
    }
}

点击结束按钮, 结束选择:

stopBtn.onclick = function () {if (timer && count > 0) {clearTimeout(timer);
        timer = null;
        result.textContent = "最好看的是:" + count;
        count = 0;
    } else {alert("请先点击开始再停止!");
    }
}

点击重置按钮, 重置选择的效果:

  resetBtn.onclick = function () {
    result.textContent = "点击开始选择吧!";
    for (var i = 0; i < listImage.children.length; i++) {listImage.children[i].classList.remove('list-image-item-active');
    }
  }

点击还原按钮，还原默认数据:

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

到此为止, 就算完了，以后你的女朋友要是再问你帮她选择, 你实在选不出来, 你可以理直气壮的说交给程序来选择吧。（ps: 希望不要气到你的女朋友，哈哈哈!）。

一个已经完成的 demo。

重要说明:(由于安卓手机的限制,input 标签加 multiple 属性并不能多选, 这也是这里的一个 bug。)