时间戳

首页 > 解决方案 > 如何在 JavaScript 中显示年龄（会员）计算器的结果？

javascript - 如何在 JavaScript 中显示年龄（会员）计算器的结果？

问题描述

我正在开发一个函数来计算成员的经过时间，类似于年龄计算器函数。因此，当我单击按钮时，它会显示结果，但只显示几秒钟，就像闪光灯一样。我几乎看不到这些数字，而且似乎计算得很好。自从我开始编程以来，这是我第一次看到这样的东西。知道为什么会发生这种情况吗？

这是代码：

let daysM = document.getElementById("mem-date");
let monthM = document.getElementById("mem-month");
let yearM = document.getElementById("mem-year");

let timeM = document.getElementById("mem-time");

const button = document.getElementById("calc-btn");

var today = new Date();

let d = today.getDate();
let m = today.getMonth() + 1;
let y = today.getFullYear();

let maxDays = 0;
let monthNum = 1;

button.addEventListener("click", (days, month, year) => {
    days = daysM.value;
    month = monthM.value;
    year = yearM.value;

    if (daysM.value == "" || monthM.value == "" || yearM.value == "") {
        return alert("Please enter the date properly");
    } 
    
    if (m == 1) { // Jan
        maxDays = 31;
        monthNum = 1;
    } 
    else if (m == 2) { // Feb
        maxDays = 28;
        monthNum = 2;
    } 
    else if (m == 3) { // Mar
        maxDays = 31;
        monthNum = 3;
    }
    else if (m == 4) { // Apr
        maxDays = 30;
        monthNum = 4;
    }
    else if (m == 5) { // May
        maxDays = 31;
        monthNum = 5;
    }
    else if (m == 6) { // Jun
        maxDays = 30;
        monthNum = 6;
    }
    else if (m == 7) { // Jul
        maxDays = 31;
        monthNum = 7;
    }
    else if (m == 8) { // Aug
        maxDays = 31;
        monthNum = 8;
    }
    else if (m == 9) { // Sep
        maxDays = 30;
        monthNum = 9;
    }
    else if (m == 10) { // Oct
        maxDays = 31;
        monthNum = 10;
    }
    else if (m == 11) { // Nov
        maxDays = 30;
        monthNum = 11;
    }
    else { // Dec
        maxDays = 31;
        monthNum = 12;
    }

    var memYears = y - year;

    if (m <= month) {
        m = m + 12;
    }

    var memMonths = m - month;

    var memDays = (maxDays - d) + parseInt(days);

    timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`;

}) 
<h1 class="headings1">Memberships</h1>

<form>
    <label id="member" for="memberdate">Enter the date you became member</label>
    <input type="number" id="mem-date" class="mem-input" placeholder="date">
    <input type="number" id="mem-month" class="mem-input" placeholder="month">
    <input type="number" id="mem-year" class="mem-input" placeholder="year">

    <button id="calc-btn">Calculate</button>
</form>

<div id="timeSection">
    <p id="mem-time"></p>
</div>

在此先感谢您的帮助！！！

标签： javascripthtml

解决方案

当您单击正在提交的按钮并且页面正在重新呈现时，您有一个表单。因此，要么添加onsubmit="return false;"以防止提交表单，要么更好地删除表单标签，因为它根本不需要。

let daysM = document.getElementById("mem-date");
let monthM = document.getElementById("mem-month");
let yearM = document.getElementById("mem-year");

let timeM = document.getElementById("mem-time");

const button = document.getElementById("calc-btn");

var today = new Date();

let d = today.getDate();
let m = today.getMonth() + 1;
let y = today.getFullYear();

let maxDays = 0;
let monthNum = 1;

button.addEventListener("click", (days, month, year) => {
    days = daysM.value;
    month = monthM.value;
    year = yearM.value;

    if (daysM.value == "" || monthM.value == "" || yearM.value == "") {
        return alert("Please enter the date properly");
    } 
    
    if (m == 1) { // Jan
        maxDays = 31;
        monthNum = 1;
    } 
    else if (m == 2) { // Feb
        maxDays = 28;
        monthNum = 2;
    } 
    else if (m == 3) { // Mar
        maxDays = 31;
        monthNum = 3;
    }
    else if (m == 4) { // Apr
        maxDays = 30;
        monthNum = 4;
    }
    else if (m == 5) { // May
        maxDays = 31;
        monthNum = 5;
    }
    else if (m == 6) { // Jun
        maxDays = 30;
        monthNum = 6;
    }
    else if (m == 7) { // Jul
        maxDays = 31;
        monthNum = 7;
    }
    else if (m == 8) { // Aug
        maxDays = 31;
        monthNum = 8;
    }
    else if (m == 9) { // Sep
        maxDays = 30;
        monthNum = 9;
    }
    else if (m == 10) { // Oct
        maxDays = 31;
        monthNum = 10;
    }
    else if (m == 11) { // Nov
        maxDays = 30;
        monthNum = 11;
    }
    else { // Dec
        maxDays = 31;
        monthNum = 12;
    }

    var memYears = y - year;

    if (m <= month) {
        m = m + 12;
    }

    var memMonths = m - month;

    var memDays = (maxDays - d) + parseInt(days);

    timeM.innerHTML = `You have been a member for ${memYears} y, ${memMonths} m and ${memDays} d`;

}) 
<h1 class="headings1">Memberships</h1>

<form onsubmit="return false;">
    <label id="member" for="memberdate">Enter the date you became member</label>
    <input type="number" id="mem-date" class="mem-input" placeholder="date">
    <input type="number" id="mem-month" class="mem-input" placeholder="month">
    <input type="number" id="mem-year" class="mem-input" placeholder="year">

    <button id="calc-btn">Calculate</button>
</form>

<div id="timeSection">
    <p id="mem-time"></p>
</div>

推荐阅读