时间都去哪儿了？ 番茄钟告诉你答案

admin • • 前端

目录

前言

计时器中的代码

version 1.0

version 2.0

version 3.0

总结

前言

        作为前端小灰 (不懂 但又不 完全不懂) 的博主，无意间接触到了番茄钟这个东西，也刚好最近进军JavaWeb阶段，所以就想着试试看能不能做出来这个效果。咱就是说给自己加了点任务，就属于这么一个大动作。

再透个底，虽说咱就是一个纯纯的小灰，但是前端的知识以前也都学过，由于年代太过久远不提也罢。纵使岁月变迁，万物更替，但还是有一些亘古不变的东西，就比如说——大一那时候学前端U盘存的一些小东西。最后找到了一个能够跟本次需求稍微搭上边的东西——计时器。

计时器中的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var c = 0;
        var t;

        function new1() {
            document.getElementById("tet").value = c;
            c = c + 1;
            t = setTimeout("new1()", 1000);
        }

        function haha() {
            clearTimeout(t);
        }
    </script>
</head>
<body>
<input type="button" value="开始" onclick="new1()">
<input id="tet" type="text" value="0">
<input type="button" value="停止" onclick="haha()">
</body>
</html>

version 1.0

实现过程：根据找到的计时器，先了解了一下基本的流程代码，再结合流程控制语句，修改了JS中的代码以及部分界面代码。

实现困难：开始和结束按钮功能绑定到一起这个地方花费了一些时间，其他部分就没啥困难了。

功能实现：这个版本主要实现了数字的基本控制和按钮的功能实现，能够使数字每隔1秒依次递减，把开始和暂停的按钮功能绑定在了一起，结束按钮的功能也得到了完善。

示例代码：现在回想起来才意识到早就已经被覆盖了，那就没得看咯，下次一定注意...

心得体会：果然，有Java基础再学JS也就没有那么难，写起来还是比较得心应手，后面看代码会发现除了一些固定的需求写法之外，逻辑判断咱还是更倾向于Java。还有就是实现过程中，觉得难以实现就把它拆分成一个个小的需求，做起来就没那么困难了。

version 2.0

实现过程：在上一个版本的基础上，定义了一个下拉列表供用户选取时间，并更新了JS的代码实现正确的时间流动展示。

实现困难：获取下拉列表的时间值，能够在下边文本框正确显示。不得不说这个需求确实是超纲了，怎么获取到都不知道，但是在互联网时代这都不是问题，所以，咱就请教了一位身边的前端大佬才实现了这个功能。

功能实现：主要实现了用户选取不同的时间后，在文本框正确显示并根据按钮功能正常执行，文本框依照时间的格式依次递减，直到减到0为止就提示 时间到！

心得体会：你不得不承认的是，不是所有的东西你都会，需要不断的学习才能完善自己。学习的途径有很多，没有人在意你走的哪一条路，大多数人只会看你的结果是好是坏。

version 3.0

实现过程：在上一个版本的基础上，增加了界面元素，测试了基本功能，感觉可以拉出来溜溜了。

实现困难：选择时间后改变盒子属性，这部分也是博主不会的地方，不知道该怎样去获取并改变两个盒子的属性值，再一次的请教了大佬后也就迎刃而解了。

温馨提示：

  • 本网页实现使用的是IDEA软件
  • 自行运行使用效果更佳，图片路径要注意

图片资源：

最终代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>番茄钟</title>

    <style>
        /*两个大盒子*/
        .div_c {
            /*设置宽高*/
            width: 98%;
            height: 700px;
            /*绝对定位，并居中盒子*/
            position: absolute;
            left: 50%;
            top: 10px;
            margin-left: -49%;
            /*内容居中*/
            text-align: center;
        }

        /*第一个大盒子*/
        #d1 {
            /*设置背景图*/
            background: url("../img/bg_1.jpg") no-repeat center;
            /*设置垂直高度，用于显示在最上层*/
            z-index: 20;
        }

        /*第二个大盒子*/
        #d2 {
            background: url("../img/bg_2.jpg") no-repeat center;
            z-index: 10;
        }

        /*第二个大盒子里面的小盒子*/
        #d2_time {
            width: 500px;
            height: 400px;
            margin: 0 auto;
            text-align: center;
            background: url("../img/bg_b1.jpg") no-repeat center;
        }

        /*下拉列表*/
        #time {
            width: auto;
            height: 26px;
        }

        /*显示的文本框*/
        #test {
            width: 160px;
            height: auto;
            font-size: 60px;
            font-family: 楷体;
            text-align: center;
            margin-top: 28%;
            margin-left: 12px;
        }
    </style>

    <script>
        //定义执行顺序
        window.addEventListener('load', function () {
            let minute; //分钟数
            let second = "00"; //毫秒值

            /*获取下拉列表的值*/
            let inputs = document.getElementById('time');
            inputs.oninput = function () {
                //获取分钟数
                minute = inputs.value;
                //设置用于判断用户点击次数的变量值
                let n = 0;
                let t;
                //文本框赋初始值
                document.getElementById("test").value = minute + ":" + second;

                //更改点击后第一个大盒子的z-index
                let d1 = document.getElementById("d1");
                let time = document.getElementById("time");
                time.addEventListener("click", function () {
                    if (inputs.value !== "")
                        d1.style.zIndex = "0";
                });

                //运行
                function run() {
                    if (minute !== 0 || parseInt(second) !== 0) {
                        if (parseInt(second) === 0) {
                            minute--;
                            second = 59;
                        }
                        document.getElementById("test").value = minute + ":" + second;
                        second--;
                        t = setTimeout(run, 1000);
                    } else {
                        document.write("时间到！")
                    }
                }

                //停止
                function stop() {
                    clearTimeout(t);
                }

                /*点击事件*/
                let start_btn = document.querySelector('.start');
                start_btn.addEventListener('click', function () {
                    if (minute !== "") {
                        n++;
                        if (n % 2 === 1)
                            run();
                        else stop();
                    }
                })

                //结束
                let end_btn = document.querySelector('.end');
                end_btn.addEventListener('click', function () {
                    //刷新页面
                    location.reload();
                    //重置数据
                    clearTimeout(t);
                    n = 0;
                    document.getElementById("test").value = "";
                })
            }
        })
    </script>
</head>

<body>
<div id="d1" class="div_c">
    <div style="margin-top: 130px">
        <span style="font-size: 26px; color: wheat; font-family: 楷体"><b>请选择你要设置的时间：</b></span>
        <select name="province" id="time">
            <option value="">--请选择--</option>
            <option value="10">10分钟</option>
            <option value="30">30分钟</option>
            <option value="40">40分钟</option>
            <option value="60">60分钟</option>
        </select><br/><br/>
    </div>
</div>

<div id="d2" class="div_c">
    <div id="d2_time">
        <input id="test" type="text"><br/><br/>
        <input type="button" value="开始/暂停" class="start">&nbsp;&nbsp;
        <input type="button" value="结束" class="end">
    </div>
</div>

</body>
</html>

实现效果：

总结

时间能够让人成就自我，也能让人自甘堕落！

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>