我已经创建了秒表，我想在我的 HTML 页面中以 4 列和 4 行显示单圈按钮单击

Question

我创建了一个秒表，我想在我的 HTML 页面中显示圈数，点击圈数按钮但在 4 列中。

这是我的完整代码：https://jsfiddle.net/waqasumer/agru2bdL/

Index.html

        <div class="row" id="laps">
        </div>

Js

var min = 0;
var sec = 0;
var msec = 0;

var getMin = document.getElementById("min");
var getSec = document.getElementById("sec");
var getmsec = document.getElementById("msec");
var interval;

function timer() {
    msec++
    getmsec.innerHTML = msec;

    if (msec >= 100) {
        sec++;
        if (sec <= 9) {
            getSec.innerHTML = "0" + sec;
        } else {
            getSec.innerHTML = sec;
        }
        msec = 0;

    } else if (sec >= 60) {
        min++;

        if (min <= 9) {
            getMin.innerHTML = "0" + min;
        } else {
            getMin.innerHTML = min;
        }
        sec = 0;
    }
}

function lapTimer() {
    var Laps = document.getElementById('laps');
    Laps.innerHTML += "<div>" + " " + getMin.innerHTML + ":" + getSec.innerHTML + ":" + getmsec.innerHTML + "</div>";
}

´´´

Answer 1

我认为这是一个典型的解决方案：

#laps > div {
  width: 25%;
  float: left;
}

这会将圈数分成 4 列，然后在这 4 列填满后重复到新的一行。

如果我理解正确的话。

我已经创建了秒表，我想在我的 HTML 页面中以 4 列和 4 行显示单圈按钮单击

I have create Stopwatch and I want to display laps in my HTML page in 4 columns and 4 rows on lap button click

javascript

css

timer

stopwatch

bootstrap-4