web前端必学功法之一：秒表实现

web前端必学功法之一：秒表实现

功能案例：

css样式：
    <style>
         .date{
               width: 200px;
               height: 50px;
               background-color: black;
               border-radius: 20px;
               color: red;
               font-weight: bold;
               text-align: center;
               line-height: 50px;
               font-size: 30px;
               margin: auto;
         }
    </style>
html部分:
    <div class="date">
        <span id="mydate"></span>
  </div>
  <div style="text-align: center;">
      <button id="start">开始</button>
      &nbsp;&nbsp;
      <button id="stop">暂停</button>
  </div>

    秒表思路分析：
            1.获取时间：获取系统的当前时间，得到时分秒，(newDate());
            2.设置定时器：按照指定的周期定时指定代码 (setInterval());
            3.绑定事件：绑定开始按钮与暂停按钮的点击事件
    
    实现步骤：
            1.声明函数，获取系统当前时间 ，在页面中显示时间
            2.声明开始方法：设置定时器，每一秒中执行一个获取当前时间的方法
            3.声明暂停，设置清除定时器
            4.当页面加载完毕时，将时间显示在页面中，并调用开始方法
            4.绑定开始按钮的点击事件，调用开始方法
            5.绑定暂停按钮的点击事件，调用暂停方法

这里我们使用两种方法进行实现
  <script>
         //声明函数，函数系统当前时间，在页面中显示时间
         function getDate(){
               //获取系统当前时间
                var mydate = new Date();
                //获取对应的时分秒
                var hour = mydate.getHours(); //时
                var minute = mydate.getMinutes(); //分
                var second = mydate.getSeconds(); //秒

                //具体时间字符串
                var str= hour +":"+ minute + ":" +second;

                //设置到页面中
                document.getElementById("mydate").innerHTML = str;
         }
         
         //定时器的唯一标识ID
         var dateId;
        //开始方法
        function  startdate(){
               //设置定时器 ,每一秒钟执行一个获取当前时间的方法
               dateId = setInterval(getDate,1000);
            //    setInterval(getDate,100);
        }

        //暂停方法
        function  stopDate(){
               //设置清除定时器
               clearInterval(dateId);
        }
        
        // 当页面加载完毕时，将时间显示在页面中，并调用开始方法
        //    未点击按钮之前，先执行一次

        window.onload =function(){
              //获取系统当前时间，显示在页面中
              getDate();
              //执行开始方法
              startdate();
        }

        //绑定开始按钮的点击事件

        document.getElementById("start").onclick =function(){
              startdate();
        }

        //绑定暂停按钮的点击事件

         document.getElementById("stop").onclick =function(){
            stopDate();
        }

  </script>

jQuery方法实现，注意：要引入jQuery.js文件
<script>
         //jquery写法
         //获取系统当前时间
         function  getDate(){
              //获取系统当前时间
               var mydate = new Date();

               //获取当前时间的时分秒
               var hour = mydate.getHours();
               var minute = mydate.getMinutes();
               var second = mydate.getSeconds();
               //拼接时间
               var str = hour +":"+minute+":"+ second;
               //设置在页面中的span标签中
               $("#mydate").html(str);
         }
               //设置定时器ID
               var dateId;
               //声明开始方法
              function  startDate(){
                      //设置定时器，每一秒中执行一个获取当前时间的方法

                      dateId = setInterval(getDate,1000);
              }
              //声明暂停方法

              function  stopDate(){

                clearInterval(dateId);
              }


            //当页面加载完毕时，将时间显示在页面中，并调用方法

            $(function(){
                    //获取系统当前时间
                    getDate();
                    //调用开始方法

                    startDate();
            })

            //绑定开始按钮的点击事件，执行开始方法
            $("#start").click(function(){
                    startDate();
            })

         //绑定暂停按钮的点击事件，执行暂停方法
            $("#stop").click(function(){
                    stopDate();
            })
               
       
  </script>

秒表实现总结

        1.熟悉了解并运用获取系统当前时间，new Date();
        2.熟悉了解并运用获取系统当前时间的时分秒，并拼接时间
        3. 绑定开始按钮的点击事件，执行开始方法
        4. 绑定暂停按钮的点击事件，执行暂停方法