我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
前言
大家好，我是不吃鱼d猫，时隔多日，我又回来了，最近忙于工作都断更了。不过活动还是很吸引我的。今天是芒种，天气开始热了，有没有还在为自己的穿搭而苦恼，我用html+js简单实现了随机生成你的穿搭，来看看吧
界面的实现
没有ui，界面也只能凭想象画，可能很多程序员现在常常用于UI组件，原生的CSS可能忘记了。接下来说说background的一些属性值。
background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域
border-box从边框开始显示padding-box从内边距开始显示content-box从内容开始显示
background-size 规定背景图片显示的大小
cover：等比例缩放图片，覆盖这个元素。类似与windows中桌面背景的“填充”contain：等比例缩放图片，适应元素的宽或者高。类似于windows中桌面背景的“适应”
等等，还有一些属性，前面的文章有介绍，大家可以去看看
<div class="box">
<button>开始抽取</button>
<div class="coat box1">
<img class="img1" src="" alt="">
</div>
<div class="pants box1">
<img class="img2" src="" alt="">
</div>
</div>
复制代码功能的实现
随机功能
我们可以看到，图片一直在随机变化。实质上是，我将图片的地址赋值给一个数组，然后再定时器中随机数组的下标，进而每次获取的图片地址都不一样。然后就可以操作dom，赋值img标签。就可以达到我们随机的效果。如下代码所示
function pants(arr,dom) {
t2 = setInterval(function() {
if (num >= arr.length - 1) {
num = 0;
} else {
num++;
}
dom.src = arr[num];
}, 100)
}
复制代码如何触发
在我们点击开始抽取按钮的同时，触发点击事件，调用随机的方法。点击暂停的时候，一定要清除定时器。所以我们要定义一个全局变量为区分开始和暂停的开关，如下代码所示
btn.onclick = function(){
flag = !flag;
if (flag) {
btn.innerHTML = "暂停抽取"
coat(arr1,img1);
setTimeout(function(){
pants(arr2,img2)
},1000)
}else{
clearInterval(t1);
setTimeout(function(){
clearInterval(t2);
btn.innerHTML = "开始抽取"
},1000)
}
}
复制代码完整代码
css
body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: url(http://39.104.64.31/cxldemo/image/259d10ede304468d1c12df2f49ed2afd.jpg) repeat;
background-size: cover;
box-sizing: border-box;
}
.box{
height: 400px;
width: 300px;
border-radius: 10px;
margin: 50px auto;
box-shadow: 0px 0px 10px #f5f5f5;
position: relative;
background: url(http://39.104.64.31/cxldemo/image/56f7529a20f7b799497db05b8b9ba4c5.png) repeat;
background-size:100% ;
}
.box button{
height: 40px;
border-radius: 5px;
box-shadow: 0px 0px 5px #f5f5f5;
width: 80px;
background: red;
border: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -50px;
line-height: 40px;
font-size: 16px;
font-weight: 600;
color: aqua;
cursor: pointer;
}
.box .box1{
height: 125px;
width: 150px;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
}
.coat{
top: 40px;
}
.pants{
top: 240px;
}
.box1 img{
height: 100%;
width: auto;
}
复制代码HTML
<div class="box">
<button>开始抽取</button>
<div class="coat box1">
<img class="img1" src="" alt="">
</div>
<div class="pants box1">
<img class="img2" src="" alt="">
</div>
</div>
复制代码JS
const btn = document.querySelector('button')
const cont_coat = document.querySelector('.coat')
const cont_pants = document.querySelector('.pants')
const img1 = document.querySelector('.img1')
const img2 = document.querySelector('.img2')
console.log(img1.src);
// 定义随机数组
let flag = false;
let t1 = 0;
let t2 = 0;
let num = 0;
let arr1 = ["http://39.104.64.31/cxldemo/image/60dae06d5ec574735afde72d832e6d26.png", "http://39.104.64.31/cxldemo/image/e932118cb13e089ad652a0b594cb5100.png", "http://39.104.64.31/cxldemo/image/2254a59b1c485fad71741331660518ab.png"];
let arr2 = ["http://39.104.64.31/cxldemo/image/7a45270f2adabc8c43f5f1dff5c5d6f1.png", "http://39.104.64.31/cxldemo/image/8a475429a20de2293ca79bc62a61ae57.png", "http://39.104.64.31/cxldemo/image/c88f59d1a6e3214fec8acb08bdfbec36.png"];
function coat(arr,dom) {
t1 = setInterval(function() {
if (num >= arr.length - 1) {
num = 0;
} else {
num++;
}
dom.src = arr[num];
}, 100)
}
function pants(arr,dom) {
t2 = setInterval(function() {
if (num >= arr.length - 1) {
num = 0;
} else {
num++;
}
dom.src = arr[num];
}, 100)
}
btn.onclick = function(){
flag = !flag;
if (flag) {
btn.innerHTML = "暂停抽取"
coat(arr1,img1);
setTimeout(function(){
pants(arr2,img2)
},1000)
}else{
clearInterval(t1);
setTimeout(function(){
clearInterval(t2);
btn.innerHTML = "开始抽取"
},1000)
}
}
复制代码总结
主要也就是简单的dom操作，还有就是css的复习，大家在追求华丽的功能的同时，也不要忘记原生css,或者js。 最后给大家奉上我的背景图，点我获取