文章/答案/技术大牛

发布

社区首页 >问答首页 >基于窗口局部存储的倒计时器

问基于窗口局部存储的倒计时器
EN

Stack Overflow用户

提问于 2021-05-16 18:04:39

回答 1查看 463关注 0票数 0

我正在做一个简单的电子应用程序项目。到目前为止，我只处于Javascript和HTML阶段。例如，我正在制作一个倒计时器，用户输入一个未来的日期-their生日-然后应用程序显示一个计数器与剩余的日子，小时，分钟和秒。一开始只看到输入字段，然后一个简单的切换函数移除输入字段，然后打开一个大时钟。

到目前为止，我有一个基本造型的工作原型。但是当你每次提起它时，这个原型都需要一个新的输入。如果我能使窗口本地存储工作，那么我会得到一个网站(因此，电子应用)，将记住你的特别日期，即使关闭。

我在下面编写代码的尝试失败了(参见带有“本地存储问题”的标题)，它摘自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">

javascript

electron

local-storage

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-16 18:34:24

我不觉得有什么问题。

我刚为'promo'做了这样的东西。

我还没有测试您的代码，但是为了使它能够使用localStorage，我会并且已经这样做了：

检索用户输入一次，检查localStorage是否没有该项。

如果(!localStorage.getItem('birthday_key_HASH')) //检索用户的输入，然后存储它。设userDate =新的userDate localStorage.setItem(‘生日_key_HASH’，userDate);

如果已经设置了

，只需使用用户生日值计算即可。

// ...Do你的微积分。localStorage.getItem('birthday_key_HASH'); = userBirthdayDate

如果这件事够清楚，请告诉我。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67559988

复制

相似问题

问基于窗口局部存储的倒计时器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于窗口局部存储的倒计时器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于窗口局部存储的倒计时器
EN