如果你的女朋友要求帮她选衣服怎么办？

时间：2023-04-02 15:07:23 HTML

1。需求分析如果你的女朋友给你发了一堆衣服的照片，然后问你哪件好看，你只能选最好的那件，你会怎么办？为什么不让程序来做决定呢？本文的主题是开发一个选型程序来解决你选女朋友的问题。页面最终效果如图：总结一下要实现的功能：可以上传多张图片。（这里不写后台也是可以的，但是如果要存储数据，可以选择session存储，当然这个例子是不存储的）。当你点击开始时，你会开始在所有图片之间来回选择。选择添加样式（阴影样式）。单击“停止”时，将显示所选结果。单击重置还会重置选择效果。因为默认数据就是上面5张图片。所以一旦点击上传，就会被替换，所以点击恢复，恢复默认数据。2.实现html和cssok，完成需求分析。接下来开始设计整个界面，没错，就是为了让界面看起来更加简洁明了。布局很简单。就是排列一堆图片和图片名称，然后下面显示结果，最后排列一堆按钮。这样基本就可以用浮动布局来搞定了。所以html和css没什么好说的：html:

点击开始选择！

上传

开始停止重置恢复

css:*{margin:0;填充：0；}#list-image{位置：相对；顶部边距：25px；}#list-image::after{内容：“”；明确：两者；高度：0；显示：块；可见性：隐藏；}#list-image.list-image-item{宽度：120px；高度：150px；向左飘浮;左边距：15px；}.list-image-item-active{box-shadow:0015px#2396ef;}#list-image.list-image-itemimg{宽度：120px；高度：120px；显示：块；}#list-image.list-image-itemp{文本对齐：居中；字体大小：18px；}#list-button{边距：15px；}.btn{行高：1;空白：nowrap；背景：#fff；边框：1px实心#dcdfe6；颜色：#606266；-webkit外观：无；过渡：0.1s；字体粗细：500；-moz-用户选择：无；-webkit-用户选择：无；-ms-使用r-选择：无；填充：12px14px；字体大小：14px；文本对齐：居中；显示：内联块；游标：指针；边界半径：4px；大纲：无；}.start-btn,.upload-btn{背景：#66b1ff;边框颜色：#66b1ff；颜色：#fff；}.start-btn:hover,.upload-btn:hover,.start-btn:active,.upload-btn:active{color:#fff;背景色：#409eff；边框颜色：#409eff；}.stop-btn:hover,.stop-btn:active,.reset-btn:hover,.reset-btn:active,.origin-btn:hover,.origin-btn:active{color:#57a3f3;背景色：#fff；边框颜色：#57a3f3；}#result{颜色：#2396ef;字体大小：25px；保证金：2em；}@媒体屏幕和（最大宽度：765px）{#list-image{填充：20px；保证金顶部：0；}#list-image.list-image-item{宽度：50%；左边距：0；}#列表图像.list-image-itemimg{width:100px;高度：100px；边距：10px自动；}#result{保证金：0；文本对齐：居中；底部边距：1em；}#list-button{保证金：0；底部边距：1em；文本对齐：居中；}}input[type="file"]{显示：无！重要；}3.js逻辑代码分析下面来分析js代码，首先定义一个heapdefaultdata://defaultdatavardata=[{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"}];然后获取变量：varstartBtn=document.getElementById('start-btn');varstopBtn=document.getElementById('stop-btn');varoriginBtn=document.getElementById('origin-btn');varlistImage=document.getElementById("list-image");varresult=document.getElementById('result');varresetBtn=document.getElementById('reset-btn');vartimer;//timervarcount;//当前选择是varuploadInput=document.getElementById("上传-输入");varuploadBtn=document.getElementById("上传-btn");然后渲染默认图像数据：functionrenderList(data){varstr="";data.forEach(function(item){str+=''+''+'

'+item.text+'

'+'