一.分析需求
假如你的女朋友发给你一堆衣服的图片，然后问你哪件好看，只能选一件最好看的，你会如何做？为什么不交给程序来进行抉择呢？本文的主题就是开发一个选择程序来解决你的女朋友的选择问题。
页面最终效果如图所示:
我们来总结一下要实现的功能:
可以上传多张图片。（这里不需要写后台也是可以的，只不过如果要存储数据可以选择会话存储,当然本例没有被存储）。
点击开始的时候会开始在所有的图片之间来回选择。选择加了一个样式（阴影样式）。
点击停止的时候，出现选择的结果。
点击重置也就重置选择效果。
因为默认数据是以上的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。)