时间戳

首页 > 解决方案 > 基于窗口本地存储的倒计时定时器

javascript - 基于窗口本地存储的倒计时定时器

问题描述

我正在开发一个简单的 Electron 应用程序项目。到目前为止，我只处于 Javascript 和 HTML 阶段。我正在制作一个倒数计时器，用户可以在其中输入未来的日期——例如他们的生日——然后应用程序会显示一个计数器，其中包含剩余的天数、小时、分钟和秒数。一开始您只看到输入字段，然后一个简单的切换功能会删除输入字段并调出一个大时钟。

到目前为止，我有一个具有基本样式的工作原型。但是每次你提出这个原型时，它都需要一个新的输入。如果我能让窗口本地存储工作，那么我会得到一个网站（因此是 Electron 应用程序），即使在关闭时也会记住你的特殊日期。

我在下面的编码尝试失败（参见标题为“本地存储问题”的大写字母）取自各种 youtube 教程和 StackOverflow 问题。但我想我错过了一个相当基本的原则以使其发挥作用。

所有建议将不胜感激。谢谢。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="javascript" src="p5.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>

     
     
        // Event listener made to work with Materialize's .hide class

        let hideInput = document.getElementById('input-hide');
        // console.log(hideInput);
        let hideCountdown = document.getElementById('countdown-hide');
        // console.log(hideCountdown);
        let button = document.querySelector("button");
        // console.log(button);

        button.addEventListener('click', () => {
            if (hideInput.classList.contains("hide")) {
                hideInput.classList.remove("hide");
                hideCountdown.setAttribute("class", "hide")

            } else {
                hideInput.setAttribute("class", "hide");
                hideCountdown.classList.remove("hide");
            }
        });


        // Find the user's input

        const Calender = document.querySelector('.datepicker');
        M.Datepicker.init(Calender, {
            format: 'yyyy-mm-dd',
            firstDay: 1,
            // minDate: '15 05 2021', <-- I could't get this to work...

        })

        // Create a countdown timer and display the user's text

        function enterSpecialDate() {

            let userDate = new Date(document.getElementById('special-date').value);
            // console.log(userDate);
            let currentTime = new Date();
           
/////// LOCAL STORAGE PROBLEM ///////

            // window.localStorage.setItem("storedObject", userDate.value);
            // console.log(storedObject);
            // console.log(dtUserDate);

            // let diff = storedObject - currentTime;

            let diff = userDate - currentTime;


            /* we've been given the difference in milliseconds, so some division is needed */
            const d = Math.floor(diff / 1000 / 60 / 60 / 24);
            const h = Math.floor(diff / 1000 / 60 / 60) % 24;
            const m = Math.floor(diff / 1000 / 60) % 60;
            const s = Math.floor(diff / 1000) % 60;


            /* send values back into HTML document */
            document.getElementById('days').innerHTML = d;
            document.getElementById('hours').innerHTML = h;
            document.getElementById('minutes').innerHTML = m;
            document.getElementById('seconds').innerHTML = s;

            // console.log(s < 10 ? ‘0’ + s : s;) <-- I could't get this to work...

            /*collect user's special occasion and send back into document*/
            var userOccasion = document.getElementById('user-occasion').value;
            document.getElementById('userOccasionOutput').innerHTML = userOccasion;
            console.log(document.getElementById('user-occasion').value);

        }
        setInterval(enterSpecialDate, 1000);


<body>
    <div class="container">
        <!-- welcome message and input area - should show on start then dissappear after you click buttton-->

        <div class="" id="input-hide">
            <div class="row">

                <div class="col s12 m12 distance-1"></div>

                <div class="col s12 m3"></div>
                <div class="col s12 m6">

                    <h2>
                        Countdown to your special occasion!
                    </h2>

                </div>
                <div class="col s12 m3"></div>
            </div>



            <div class="row">
                <div class="col s12 m3"></div>
                <div class="col s12 m6">
                    <form action="">

                        <div class="input-field">
                            <textarea class="materialize-textarea" name="user-occasion" id="user-occasion"
                                placeholder="e.g. my birthday"></textarea>
                            <label for="user-occasion">what is your special occasion?</label>
                        </div>


                    </form>
                </div>
                <div class="col s12 m3"></div>
            </div>


            <div class="row">
                <div class="col s12 m3"></div>
                <div class="col s12 m6">
                    <form action="">
                        <div class="input-field">
                            <input type="text" id="special-date" class="datepicker" placeholder="click here">
                            <label for="date">when is your special occasion?</label>
                        </div>
                    </form>

                    <button onclick="enterSpecialDate()">Enter</button>
                </div>
                <div class="col s12 m3"></div>

            </div>

        </div>


        <!-- countdown ticker - should appear only after you click the button -->

        <div class="hide" id="countdown-hide">

            <div class="row">

                <div class="col s12 m12 distance-2">
                    <p></p>

                </div>


                <div class="col s12 m12">

                    <div class="time col s12 m3">
                        <span class="number" id="days"></span>
                        <br>
                        <span id="unit">days</span>
                    </div>

                    <div class="time col s12 m3">
                        <span class="number" id="hours"></span>
                        <br>
                        <span id="unit">hours</span>
                    </div>

                    <div class="time col s12 m3">
                        <span class="number" id="minutes"></span>
                        <br>
                        <span id="unit">minutes</span>
                    </div>

                    <div class="time col s12 m3">
                        <span class="number" id="seconds"></span>
                        <br>
                        <span id="unit">seconds</span>
                    </div>

                    <!-- <div class="time col s12 m3"></div> -->
                </div>

                <div class="col s12 m12 distance-3"></div>

                <div class="col s12 m12">

                    <div class="time col s12 m12 until">
                        <span>until </span><span id="userOccasionOutput"></span></p>
                    </div>

                    <div class="col s12 m12">
                        <a href="javascript:location.reload(true)">start again</a>
                    </div>
                </div>

                

            </div>

        </div>

    </div>

    </div>

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/DatePicker1.css">

标签： javascriptelectronlocal-storage

解决方案

我真的没有看到问题。

我刚刚为“促销”制作了类似的东西。

我没有测试过你的代码，但是为了让它使用 localStorage 工作，我会并且做了这样的事情：

  1. 在检查 localStorage 是否没有该项目后，检索用户输入ONCE 。

     if (!localStorage.getItem('birthday_key_HASH'))
     // Retrieve user's input and then store it.
     let userDate = new Date(document.getElementById('special-date').value);
     localStorage.setItem('birthday_key_HASH', userDate);

  2. 如果已经设置，只需使用用户生日值进行数学计算。

     // ...Do your calculus.
 userBirthdayDate = localStorage.getItem('birthday_key_HASH');

让我知道这是否足够清楚。

推荐阅读