基于 window 本地存储的倒数计时器

Question

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

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

我在下面的编码尝试失败（请参阅大写字母 'local storage problem' 的标题）是从各种 youtube 教程和 Whosebug 问题中提取的。但我想我缺少一个相当基本的原则才能让它发挥作用。

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

<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">

Answer 1

我真的没看出问题所在。

我刚刚为 'promo'.

制作了类似的东西

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

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

 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);

如果已设置，只需使用用户生日值进行计算即可。

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

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

基于 window 本地存储的倒数计时器

countdown timer based on window local storage

javascript

local-storage

electron