您的位置：首页 > Web前端 > HTML

中午吃什么？html（拯救选择困难症）

2020-08-10 14:15 741 查看

选择困难者点外卖（html、css、js）

效果图：

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menu</title>
<style>
.hide {
display: none;
}
html {
height: 100%
}
body {
width: 100%;
height: 100%;
padding-top: 50vh;
margin-top: -76px;
text-align: center;
background: rgb(226, 225, 225)
}

button {
width : 200px;
border: none;
border-radius: 10px;
padding: 10px 15px;
font-size: 1.5rem;
background: #fff;
/* color: #f2c0ff; */
box-shadow: 5px 5px 5px dimgray;

}

p {
font-size: 1.4rem;
color:#ce61e9;
}
</style>
</head>
<body>

<button id="start">中午吃啥呢？</button>
<button id="stop" class="hide">停</button>
<p> </p>

<script>
const lunchPlaces = [
'粥',
'拌面',
'铁板饭',
'汤包',
'馄饨',
'米线',
'炒饭',
'饺子',
'米线',
'麻辣香锅',
'黄焖鸡',
'外婆鸡汤饭',
'糖醋排骨',
'红烧肉',
'泡面',
'螺蛳粉',
'便当',

]

let timeout = 0;

let getRandomIndice = (max)=> {
return Math.floor(Math.random() * max)
};

let rollDices = () => {
let node = document.querySelector('p');
let i = 0;
timeout = setInterval(() => {
if (i === lunchPlaces.length) {
i = 0;
}
node.textContent = lunchPlaces[i];
i++;
}, 100)
}
let count = 0;
document.getElementById('start').onclick = () => {
rollDices();
document.getElementById('start').classList.add('hide');
document.getElementById('stop').classList.remove('hide');
document.querySelector('p').textContent = '';
};

document.getElementById('stop').onclick = () => {
if(count<=4){

let rest = lunchPlaces[getRandomIndice(lunchPlaces.length)];
clearInterval(timeout);
document.getElementById('start').classList.remove('hide');
document.getElementById('stop').classList.add('hide');
document.querySelector('p').textContent = rest;
count++;

}
else{
alert('这么挑食中午就别吃了吧')
}
};
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航