javascript - 如何更改它以显示用户在几分钟内输入?
问题描述
我试图在几分钟内更改用户输入,但不幸的是,当我尝试这样做时,没有任何改变。
我所做的不是“remseconds”,而是将其更改为 remminuts,并将数学也更改为“x 60”,但什么也没发生。
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('seconds');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit() {
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e) {
document.getElementById(e).style.display = 'block';
}
function remove(e) {
document.getElementById(e).style.display = 'none';
}
function check(stat) {
if (stat.id == "start") {
display("stop");
remove("start");
toCount = true;
} else if (stat.id == "stop") {
display("continue");
remove("stop");
toCount = false
} else {
display("stop");
remove("continue");
toCount = true;
}
}
function count() {
if (seconds > 0) {
if (toCount == true) {
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if (minuts < 10) {
minuts = "0" + minuts;
}
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
} else {
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting() {
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
<!DOCTYPE html>
<html class="class2">
<head>
<title>CountDown</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="seconds" placeholder="Seconds">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
如果您有任何解决方案,请告诉我。
解决方案
我在这里编辑了几分钟的答案:js seconds countdown
在counting()中获取分钟并仅将其转换为x60秒
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const minInput = document.getElementById('minutes');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit() {
display('start');
remove('minutes');
remove('ok');
minuts= Number(minInput.value);
counting();
}
function display(e) {
document.getElementById(e).style.display = 'block';
}
function remove(e) {
document.getElementById(e).style.display = 'none';
}
function check(stat) {
if (stat.id == "start") {
display("stop");
remove("start");
toCount = true;
} else if (stat.id == "stop") {
display("continue");
remove("stop");
toCount = false
} else {
display("stop");
remove("continue");
toCount = true;
}
}
function count() {
if (seconds > 0) {
if (toCount == true) {
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if (minuts < 10) {
minuts = "0" + minuts;
}
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
} else {
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting() {
seconds = minuts*60;
remseconds = seconds % 60;
//minuts = Math.floor(seconds / 60);
if (remseconds < 10) {
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html, body{
height: 100%;
}
body{
width: 100%;
height: 100%;
background: linear-gradient(to left top, #0045D6, #00A9f6);
}
header{
width: 100%;
height: 13vh;
background-color: #fff;
color: #0045F6;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100%;
height: 60vh;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content #minutes{
width: 250px;
font-size: 2rem;
padding: 1rem;
outline: none;
background: none;
border: none;
border-bottom: 3px solid #fff;
color: #fff;
}
#minutes::placeholder{
color: #ddd;
font-size: 1.7rem;
}
.btn{
background-color: #fff;
border-radius: 4px;
border: none;
outline: none;
cursor: pointer;
padding: 0.8rem 1.7rem;
font-size: 1.2rem;
font-weight: 700;
}
.start{
color: #1f0;
}
.stop{
color: #E00;
}
#start, #stop, #continue{
display: none;
}
.counter{
color: #fff;
}
<!DOCTYPE html>
<html class="class2">
<head>
<title>CountDown</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="minutes" placeholder="Minutes">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
推荐阅读
- java - Java 服务 SPI 和内存泄漏
- javascript - Vuex:函数声明和函数名称作为变异键的区别
- java - 如何设置更改的远程文本文件的正确读取点
- python - Python 上的无效语法:“def 方法(self,(x,y)):”
- c++ - 给定的二叉树是有效的 BST 吗?
- java - 如何使用 Lambda 在 S3 存储桶内触发应用程序?
- python - 如何从字典元素中打印特定字符串?
- java - 如何将表单字段值插入数据库
- autodesk-forge - autodesk-forge Photoscene 进度 API - Photoscene 永远不会进步
- java - 在java中将元素添加到两个不同的数组