JavaScript -固定间隔后连续减小div宽度
JavaScript -固定间隔后连续减小div宽度
提问于 2017-12-12 10:09:24
我是一名JavaScript新手，我正在努力完成以下任务：
- 一个div，它的行为就像一个按钮，它的宽度(BG)在每次点击时都会增加(想想一个进度条，它会随着每次点击而增加)，比如每次点击的进度增加10%。
- 当父div宽度满后，应该有10秒的延迟，之后div又以恒定的速率开始收缩(有点像反向进度条)。
- 当宽度减少时，用户应该能够单击div并开始再次增加它，直到它达到完全宽度为止。
请查阅下列图片以供参考：
我已经完成了步骤1，我认为一旦我能够实现第2步，第3步就会自行处理。
请帮我做第二步，(不断缩小背景div的宽度).
我的代码如下：
var paddleBtn = document.getElementById('paddleBtn');
var paddleC = document.getElementById('paddleC');
if (paddleC) {
paddleC.style.width = "0px";
}
if (paddleBtn) {
paddleBtn.style.cursor = 'pointer';
paddleBtn.onclick = function() {
if ((parseInt(paddleC.style.width) + 5) < paddleC.parentElement.offsetWidth) {
var widthC = parseInt(paddleC.style.width) + 20;
paddleC.style.width = String(widthC).concat('px');
if (paddleC.offsetWidth > paddleC.parentElement.offsetWidth) {
paddleC.style.width = paddleC.parentElement.offsetWidth;
}
}
if (parseInt(paddleC.style.width) >= paddleC.parentElement.offsetWidth - 5) {
paddleC.style.backgroundColor = "#B3DDE0";
paddleC.style.width = paddleC.parentElement.offsetWidth - 2;
}
};
}.btn {
display: inline-block;
border: 1px solid Black;
height: 30px;
width: 100px;
}
.cooldown {
z-index: 1;
position: fixed;
height: inherit;
background-color: #DCDCDC;
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
transition: background-color 0.2s ease;
}
.labelT {
z-index: 2;
position: fixed;
padding: 5px;
text-align: center;
font-size: 18px;
font-family: "Arial", Times, serif;
width: inherit;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<html>
<head>
<script src="./script.js" async></script>
</head>
<body>
<div class='btn' id='paddleBtn'>
<div class='labelT'>Paddle</div>
<div class='cooldown' id='paddleC'></div>
</div>
</body>
</html>
对不起，代码很难看，正如我说的，我仍在尝试掌握JavaScript的基本知识。我不得不对代码示例进行修改，使其在StackOverflow上运行。
请帮帮我！
谢谢!维克塞
Stack Overflow用户
回答已采纳
发布于 2017-12-12 10:32:30
你可以试试这个。你可以根据你的要求改变间隔时间，我现在放3秒。谢谢
var paddleInterval;
var paddleBtn = document.getElementById('paddleBtn');
var paddleC = document.getElementById('paddleC');
function decreasePaddle(){
var widthC = parseInt(paddleC.style.width) - 20;
paddleC.style.width = String(widthC).concat('px');
paddleC.style.backgroundColor = "#DCDCDC";
if (parseInt(paddleC.style.width) <= 0){
clearInterval(paddleInterval);
}
}
if (paddleC) {
paddleC.style.width = "0px";
}
if (paddleBtn) {
paddleBtn.style.cursor = 'pointer';
paddleBtn.onclick = function() {
if ((parseInt(paddleC.style.width) + 5) < paddleC.parentElement.offsetWidth) {
clearInterval(paddleInterval);
var widthC = parseInt(paddleC.style.width) + 20;
paddleC.style.width = String(widthC).concat('px');
if (paddleC.offsetWidth > paddleC.parentElement.offsetWidth) {
paddleC.style.width = paddleC.parentElement.offsetWidth;
}
}
if (parseInt(paddleC.style.width) >= paddleC.parentElement.offsetWidth - 5) {
paddleC.style.backgroundColor = "#B3DDE0";
paddleC.style.width = paddleC.parentElement.offsetWidth - 2;
paddleInterval = setInterval(decreasePaddle, 3000);
}
};
}.btn {
display: inline-block;
border: 1px solid Black;
height: 30px;
width: 100px;
}
.cooldown {
z-index: 1;
position: fixed;
height: inherit;
background-color: #DCDCDC;
-webkit-transition: width 0.4s ease-in-out;
-moz-transition: width 0.4s ease-in-out;
-o-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
transition: background-color 0.2s ease;
}
.labelT {
z-index: 2;
position: fixed;
padding: 5px;
text-align: center;
font-size: 18px;
font-family: "Arial", Times, serif;
width: inherit;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<html>
<head>
<script src="./script.js" async></script>
</head>
<body>
<div class='btn' id='paddleBtn'>
<div class='labelT'>Paddle</div>
<div class='cooldown' id='paddleC'></div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47769958
复制相关文章
相似问题
腾讯云开发者
