使用HTML复选框和JavaScript在标准时间和军用时间之间切换_Javascript

使用HTML复选框和JavaScript在标准时间和军用时间之间切换

javascript

使用HTML复选框和JavaScript在标准时间和军用时间之间切换,javascript,Javascript,我一直在开发一个小的时钟应用程序，它可以显示加载时的标准时间，并且有一个切换按钮，可以将显示更改为军用时间。然而，我想使用拨动开关能够在标准时间和军用时间之间来回切换。现在我只能点击切换按钮一次，它会切换到军事时间，但不能点击多次我将包括一个codepin和github链接。任何资源或建议都将非常有用谢谢 ''' ''' ''' ''”解决方案为您提供了一个示例解决方案。这并不理想，但很有效。正如您所看到的，您可以使用一个间隔并在调用的函数内部获取特定时间的数据。这样可以避免内存泄漏

我一直在开发一个小的时钟应用程序，它可以显示加载时的标准时间，并且有一个切换按钮，可以将显示更改为军用时间。然而，我想使用拨动开关能够在标准时间和军用时间之间来回切换。现在我只能点击切换按钮一次，它会切换到军事时间，但不能点击多次

我将包括一个codepin和github链接。任何资源或建议都将非常有用

谢谢

'''

''”

解决方案为您提供了一个示例解决方案。这并不理想，但很有效。正如您所看到的，您可以使用一个间隔并在调用的函数内部获取特定时间的数据。这样可以避免内存泄漏

注我在CSS开头的

.clock

中添加了样式，以便它在代码段中正确显示

let clock=setInterval（显示时间，500）；
函数getBaseTime（）{
设hms=新日期（）；
返回hms.toLocaleTimeString（）；
}
设setWeekday=新日期（）；
设weekday=新数组（7）；
工作日[0]=“周日”；
工作日[1]=“周一”；
工作日[2]=“星期二”；
工作日[3]=“星期三”；
工作日[4]=“周四”；
工作日[5]=“周五”；
工作日[6]=“周六”；
设n=weekday[setWeekday.getDay（）]；
document.getElementById（“工作日”）.innerHTML=n+“-”
设d=新日期（）；
让几个月=
[“一月”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“9月”，
“十月”，
“11月”，
“12月”]；
document.getElementById（“month”）.innerHTML=months[d.getMonth（）]；
让getTodaysDate=新日期（）；
document.getElementById（“日期”）.innerHTML=getTodaysDate.getDate（）+“，”；
让getFullYear=新日期（）；
document.getElementById（“年”）.innerHTML=getFullYear.getFullYear（）；
函数getMilitaryTime（）{
var militaryHours=新日期（）；
var newMilitaryHours=militaryHours.getHours（）；
var militaryMinutes=新日期（）；
var newMilitaryMinutes=militaryMinutes.getMinutes（）；
var militarySeconds=新日期（）；
var newMilitarySeconds=militarySeconds.getSeconds（）；
返回newMilitaryHours+”：“+newMilitaryMinutes+”：“+newMilitarySeconds；
}
函数displayTime（）{
if（document.querySelector（“#军事切换器输入：选中”））{
document.getElementById（“时间”）.innerHTML=getMilitaryTime（）
}
否则{
document.getElementById（“time”）.innerHTML=getBaseTime（）
}
}

/*********************
仅为代码段添加
*********************/
.钟{
高度：未设置！重要
}
/*********************
时间/日期样式
*********************/
.mdy h1{
显示：内联块；
字体大小：粗体；
}
mdy先生{
}
.钟{
文本对齐：居中；
位置：绝对位置；
保证金：自动；
排名：0；
右：0；
底部：0；
左：0；
宽度：450px；
高度：300px；
}
/*********************
切换器样式
*********************/
/*开关-滑块周围的框*/
.开关{
位置：相对位置；
显示：内联块；
宽度：60px；
高度：34px；
}
/*隐藏默认HTML复选框*/
.开关输入{
不透明度：0；
宽度：0；
身高：0；
}
/*滑块*/
.滑块{
位置：绝对位置；
光标：指针；
排名：0；
左：0；
右：0；
底部：0；
背景色：#ccc；
-webkit转换：.4s；
过渡：.4s；
}
.滑块：之前{
位置：绝对位置；
内容：“；
高度：26px；
宽度：26px；
左：4px；
底部：4px；
背景色：白色；
-webkit转换：.4s；
过渡：.4s；
}
输入：选中+滑块{
背景色：#2196F3；
}
输入：焦点+.滑块{
盒影：0 0 1px#2196F3；
}
输入：选中+。滑块：之前{
-webkit转换：translateX（26px）；
-ms变换：translateX（26px）；
转化：translateX（26px）；
}
/*圆形滑块*/
.圆滑{
边界半径：34px；
}
.滑块.圆形：之前{
边界半径：50%；
}


数字钟
切换时间

发生这种情况是因为您遇到了一个无限循环。在该函数内部创建的时间间隔内调用函数

militarytime（）

。意味着每次调用函数时，都会创建一个新的间隔并再次调用它自己。您只能单击该按钮一次，因为所有内存都用于处理该操作。此外，如果你只更新时钟每1秒，我想你可以很容易地通过500作为一个时间参数的间隔。它仍然有大约2次机会更新时间，但将大大提高性能。谢谢！这是奇怪的，但这一行；document.querySelector（“#军事开关输入：选中”）是真正解决问题的方法。这就是我所缺少的。再次感谢您抽出时间！

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Digital Clock</title>
    <meta name="Sam Kautz" content="Digital Clock">

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

</head>

<body>

    <div class="clock">
        <div>
            <h1 id="time"></h1>
            <h3>Toggle Time</h3>
            <label class="switch" id="millitary-toggler">
                <input type="checkbox" >
                <span class="slider round"></span>
            </label>
        </div>

        <div class="mdy">
            <h1 id="weekday"></h1>
            <h1 id="month"></h1>
            <h1 id="date"></h1>
            <h1 id="year"></h1>
        </div>
    </div>

    <script src="scripts.js"></script>
</body>
</html>

/*********************
    Time/Date Styling
*********************/

.mdy h1 {
    display: inline-block;
    font-weight: bold;
}

.mdy {

}

.clock {
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 450px;
    height: 300px;
}

/*********************
    Toggler Styling
*********************/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

let time = setInterval(timer, 0);

function timer() {
    let hms = new Date();
    document.getElementById("time").innerHTML = hms.toLocaleTimeString();
}

let setWeekday = new Date();
let weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";

let n = weekday[setWeekday.getDay()];
document.getElementById("weekday").innerHTML = n + " - "

let d = new Date();
let months =
    ["January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"];
document.getElementById("month").innerHTML = months[d.getMonth()];

let getTodaysDate = new Date();
document.getElementById("date").innerHTML = getTodaysDate.getDate() + ",";

    let getFullYear = new Date();
    document.getElementById("year").innerHTML = getFullYear.getFullYear();


document.getElementById("millitary-toggler").addEventListener("click", millitaryTime);

function millitaryTime() {
    clearTimeout(time);

    var millitaryHours = new Date();
    var newMillitaryHours = millitaryHours.getHours();

    var millitaryMinutes = new Date();
    var newMillitaryMinutes = millitaryMinutes.getMinutes();

    var millitarySeconds = new Date();
    var newMillitarySeconds = millitarySeconds.getSeconds();

    let millitaryTimer = setInterval(millitaryTime, 0);
    document.getElementById("time").innerHTML = newMillitaryHours + ":" + newMillitaryMinutes + ":" + newMillitarySeconds;
}


function millitaryTime() {

    if (getElementById(millitary-toggler))
    clearTimeout(time);

    var millitaryHours = new Date();
    var newMillitaryHours = millitaryHours.getHours();

    var millitaryMinutes = new Date();
    var newMillitaryMinutes = millitaryMinutes.getMinutes();

    var millitarySeconds = new Date();
    var newMillitarySeconds = millitarySeconds.getSeconds();

    let millitaryTimer = setInterval(millitaryTime, 0);
    document.getElementById("time").innerHTML = newMillitaryHours + ":" + newMillitaryMinutes + ":" + newMillitarySeconds;
}