代码之家 › 专栏 › 技术社区 › Sarah Workman

尝试比较用javascript编程添加的字符串的值

arrays javascript

Sarah Workman · 技术社区 · 2 年前

我试图阻止我的圈数在同一秒。所以我试着取当前值,并将其计算为!=不等于附加前一个值。

这是函数和我的HTML。不确定我是否可以用我设置的ID做任何事情。我已经将jquery设置为在我的javascript中运行,因此如果您对此有任何想法,我愿意倾听。我还没有删除一些可能没有用的东西。

Javascript函数

let seconds = 0;
let minutes = null;
let hours = null;
let startTimer = null;
let time = null;
let isRunning = (false);

let lapContainer = [];
let x;
let outputseconds;
let outputminutes;
let outputhours;

//connection to button
document.getElementById("start").addEventListener("click", start);
document.getElementById("stop").addEventListener("click", stop);
document.getElementById("reset").addEventListener("click", reset);
document.getElementById("lap").addEventListener("click", lap);
document.getElementById("resetLaps").addEventListener("click", resetLaps);

//functions
function start() {
    if (isRunning === false) {
        isRunning = true;

        //interval
        startTimer = setInterval(function () {
            seconds++;

            if (seconds <= 9) {
                outputseconds = "0" + seconds;
                document.getElementById("seconds").innerHTML = outputseconds;
            } else if (seconds <= 60) {
                outputseconds = seconds;
                document.getElementById("seconds").innerHTML = outputseconds;
            } else if (seconds >= 60) {
                minutes++;
                outputseconds = "00";
                outputminutes = "0" + minutes;
                document.getElementById("seconds").innerHTML = outputseconds;
                document.getElementById("minutes").innerHTML = outputminutes;
                seconds = 0;
            } else if (minutes >= 9) {
                outputminutes = minutes;
                document.getElementById("minutes").innerHTML = outputminutes;
            } else if (minutes >= 60) {
                hours++;
                outputminutes = "00";
                outputhours = "0" + hours;
                document.getElementById("minutes").innerHTML = outputminutes;
                document.getElementById("hours").innerHTML = outputhours;
                minutes = 0;
            } else if (hours > 9) {
                outputhours = hours;
                document.getElementById("hours").innerHTML = outputhours;
            }
        }, 1000); //end of interval
    } // end of if check

    // should this be seperated out as a function???
    let startTime = "00";

    if (outputseconds > 0) {
        if (outputminutes > 0) {
            if (outputhours > 0) {
                return outputhours + ":" + outputminutes + ":" + outputseconds;
            } else {
                return startTime + ":" + outputminutes + ":" + outputseconds;
            } // hours
        } else {
            return startTime + ":" + startTime + ":" + outputseconds;
        } //minutes
    } else {
        return startTime + ":" + startTime + ":" + startTime;
    } // end of nested if seconds
} //end of start function

function stop() {
    clearInterval(startTimer);
    isRunning = false;
}

function reset() {
    clearInterval(startTimer);
    document.getElementById("seconds").innerHTML = "00";
    document.getElementById("minutes").innerHTML = "00";
    document.getElementById("hours").innerHTML = "00";

    seconds = 0;
    minutes = 0;
    hours = 0;

    isRunning = false;
}

function lap() {
    if (isRunning === true) {
        //initialize time
        let lapTime = start();
        //create connection to div
        lapContainer = document.getElementById("lapContainer");
        // how to check if they equal each other

        //create element
        const para = document.createElement("p");

        //how many laps have been created
        let i = document.getElementById("lapContainer").childElementCount;
        let index = [i];
        //create an index that will add an id to paragraph
        para.id = index;

        //add the lap to text
        para.innerText = lapTime;
        let laps = [];

        laps = document.getElementById("lapContainer").childNodes[1].textContent;

        let lastItem = laps[laps.length - 1];
        let currentItem = laps[laps.length];

        document.getElementById("test").innerHTML = laps;
        if (currentItem !== lastItem) {
            lapContainer.appendChild(para);
        }
    }
}

function resetLaps() {
    $(lapContainer).empty();
    isRunning = false;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Stopwatch</title>
        <meta name="description" content="A simple stopwatch application" />
        <meta name="author" content="****" />

        <link rel="icon" href="/favicon.ico" />
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

        <link rel="stylesheet" href="./css/styles.css" />
    </head>

    <body>
        <!-- your content here... -->
        <div class="menu">
            <a href="timer.html" id="timer">Timer</a>
            <a href="alarm.html" id="alarm">Alarm</a>
        </div>
        <div class="stopwatch-container">
            <div class="stopwatch-wrapper">
                <div class="stopwatch-button-container">
                    <button type="button" id="start">START</button>
                    <button type="button" id="stop">STOP</button>
                    <button type="button" id="reset">RESET</button>
                    <button type="button" id="lap">LAP</button>
                    <button type="button" id="resetLaps">RESET LAPS</button>
                </div>

                <div class="rectangle-container">
                    <div class="rectangle">
                        <p id="textWrapper">
                            <span id="hours">00</span>:<span id="minutes">00</span>:<span
                                id="seconds"
                                >00</span
                            >
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="lineBreak"></div>
        <div id="lapContainer" class="lap-container"></div>
        <p id="test"></p>
        <script src="./scripts/scripts.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </body>
</html>

1 回复 | 直到 2 年前

Telman 2 年前

您可能需要做的几件事:

laps 数组您需要获取所有节点的文本数组,而不仅仅是第一个节点的文本:

//laps = document.getElementById("lapContainer").childNodes[1].textContent;
laps = Array.from(document.getElementById("lapContainer").childNodes).map(node => node.textContent);

currentItem 您不能使用 laps[laps.length] undefined .相反,你可以只使用 lapTime 价值:

let lastItem = laps[laps.length - 1];
//let currentItem = laps[laps.length];
let currentItem = lapTime;

例子:

let isRunning = Boolean(true);
let lapContainer = [];

document.querySelector('#lap').addEventListener('click', () => lap());

function lap() {
    if (isRunning === true) {
        //initialize time
        let lapTime = start();
        //create connection to div
        lapContainer = document.getElementById("lapContainer");
        // how to check if they equal each other

        //create element
        const para = document.createElement("p");

        //how many laps have been created
        let i = document.getElementById("lapContainer").childElementCount;
        let index = [i];
        //create an index that will add an id to paragraph
        para.id = index;

        //add the lap to text
        para.innerText = lapTime;
        let laps = [];

        //laps = document.getElementById("lapContainer").childNodes[1].textContent;
        laps = Array.from(document.getElementById("lapContainer").childNodes).map(node => node.textContent);

        let lastItem = laps[laps.length - 1];
        //let currentItem = laps[laps.length];
        let currentItem = lapTime;

        document.getElementById("test").innerHTML = laps;
        if (currentItem !== lastItem) {
            lapContainer.appendChild(para);
        }
    }
}

const start = () => new Date().toString();

    <body>
        <!-- your content here... -->
        <div class="menu">
            <a href="timer.html" id="timer">Timer</a>
            <a href="alarm.html" id="alarm">Alarm</a>
        </div>
        <div class="stopwatch-container">
            <div class="stopwatch-wrapper">
                <div class="stopwatch-button-container">
                    <button type="button" id="start">START</button>
                    <button type="button" id="stop">STOP</button>
                    <button type="button" id="reset">RESET</button>
                    <button type="button" id="lap">LAP</button>
                    <button type="button" id="resetLaps">RESET LAPS</button>
                </div>

                <div class="rectangle-container">
                    <div class="rectangle">
                        <p id="textWrapper">
                            <span id="hours">00</span>:<span id="minutes">00</span>:<span
                                id="seconds"
                                >00</span
                            >
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="lineBreak"></div>
        <div id="lapContainer" class="lap-container"></div>
        <p id="test"></p>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </body>