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

2019-10-16 admin

一.分析需求

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

页面最终效果如图所示:

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

可以上传多张图片。(这里不需要写后台也是可以的,只不过如果要存储数据可以选择会话存储,当然本例没有被存储)。 点击开始的时候会开始在所有的图片之间来回选择。选择加了一个样式(阴影样式)。 点击停止的时候,出现选择的结果。 点击重置也就重置选择效果。 因为默认数据是以上的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。)

[转载]原文链接:https://segmentfault.com/a/1190000020710198

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77561.html

文章标题:假如女朋友要求帮她挑选衣服,怎么办?

相关文章
假如测试说你的网站在iOS 10有问题
这篇文章不那么有趣,只是解决了一个bug。但对我来讲,因为后面还要用Vue做很多项目,而且可以预见几乎每一个项目都会遇到这个问题,所以记录在案是有用的。 你用Vue做了一个单页面应用,它在一切设备上都工作正常,但是突然有一天,你的测试和...
2018-02-01
水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......帮你搞定
2018.05.29 居中一个元素?你会想到啥?这里面的知识还真不少。包括水平居中,垂直居中,还有水平垂直居中。 如果要再要细分,还要分浮动元素、绝对定位的居中。 为了代码简介,没有加背景和其他样式,需要看效果的,可以加上背景。 目录:...
2018-05-30
作为前端,如何帮帝都的朋友租到合适的房子
在帝都打拼的小伙伴都知道,要租个合适的房子真心不易。中介要收一个月的房租作为中介费。而且很多黑中介打着租房的旗号各种坑蒙拐骗。要想在茫茫帖子中找到真正的房东,宛如大海捞针,同时需要和各路黑中介斗智斗勇。接下来就讲讲我浴血奋战的故事。 那么,...
2018-06-06
前端每日实战:16# 怎样在妹子面前炫技还能让她含羞带笑?——彩色渐变动画边框
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/odpRKX 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 ...
2018-05-09
程序员新人面临最尴尬的事:需要工作积累经验,需要有经验才能找到工作!到底怎么办?
你需要一份工作来积累经验,但你需要有经验才能找到工作…… 大学刚毕业,或者转换职业方向后新入一个职场领域,你会发现求职之路举步维艰。大多数的公司职位都要求工作经验,单这一点就足以将你拒之门外。 前几天,一位即将从大学毕业的读者征求我的建议,...
2018-11-14
客户说网页打开白屏了,怎么办?(前端异常日志收集)
前言 前段时间做项目的时候,发布功能的时候,本地是好的,测试是好的,正式也是好的,但是客户打开正式的时候白屏了,把软件删除了,重新打开了又好了,但是不能总是让用户去删除软件又重新下。所以弄了一个简洁的前段监控。 如果前端报错,都会在控制台打...
2018-06-13
EFF 提供的 chrome 插件 ,帮助用户在浏览各个网站的时候,默认使用 https
HTTPS Everywhere is produced as a collaboration between The Tor Project and the Electronic Frontier Foundation. Many sit...
2018-04-18
AI智能五子棋算法——假如我是计算机
1.前言 记得读大学时,有段时间特别喜欢和室友们下五子棋,由于脑子不是特别灵光,再加上室友确实经验丰富,自己自然是屡屡战败。时光荏苒,一眨眼好多年过去了,很是怀念那时惬意的时光!大学毕业后,室友们都从事了不同行业的工作,我也是如愿选择了做“...
2018-11-04
项目开发中常常会遇到详情返回列表,列表默认在点击详情的高度的问题,特此总结一下,希望可以帮到你们
刚刚解了一个详情返回列表时候,列表高度保持在点击进去的详情的问题,特此做个分享,希望大家碰到类似的问题可以直接一遍过,不用卡壳(因为这个在实际项目开发中经常会用到所以分享了出来) Vue api 是这样说的 api链接传送门 dome是这...
2018-07-25
前端开发中,滑动展现日志麻烦?这个组件来帮你
写在前面 在这个数据无比重要的时代,用户在网页上面的一系列操作,都需要用数据记录下来。在一个网页中,某个元素的点击数,展现数可以说是最基本的指标了。点击数很简单,用户点击的时候,上报一条点击日志即可。但是展现日志,就稍微麻烦一点了。特别是...
2018-12-20
回到顶部