简单的计时器（显示当前时间）

最新推荐文章于 2022-12-25 12:42:43 发布

aCc1DeNt

最新推荐文章于 2022-12-25 12:42:43 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/aCc1DeNt/article/details/92432244

版权

<!doctype html>
<html>

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>计时器</title>
   <style>
      * {
         margin: 0;
         padding: 0;
         text-decoration: none;
         list-style: none;
      }

      h1 {
         text-align: center;
      }

      .container {
         background-color: gray;
         width: 500px;
         height: 120px;
         border: 2px solid gray;
         margin: 10px auto;
      }

      .xs {
         color: #fff;
         margin: 10px auto;
      }


      .button input {
         color: seagreen;
         border-radius: 15px;
         margin: 10px 5px;
         cursor: pointer;
         background-color: lightblue;
      }

      .time {
         margin: 0 10px;
         color: #fff;
      }
   </style>
</head>

<body>

   <h1>计时器</h1>
   <div class="container">
      <div class="xs">
         Minuters <input type="text" value=0>Seconds<input type="text" value=0>
      </div>

      <div class="button">
         <input type="button" value="开始">
         <input type="button" value="暂停">
         <input type="button" value="重置">
      </div>
      <div class="time">
         当前时间:<span></span>
      </div>

   </div>

   <script>

      var min = document.getElementsByTagName('input')[0];
      var sec = document.getElementsByTagName('input')[1];
      var start = document.getElementsByTagName('input')[2];
      var stop = document.getElementsByTagName('input')[3];
      var init = document.getElementsByTagName('input')[4];
      var second = 0;
      var minute = 0;
      var timer;
      var startStatus = true;
      var nowTime = document.getElementsByTagName('span')[0];

      function getTime() {
         //格式化时间
         function fromat(v) {
            return v < 10 ? '0' + v : v;
         }
         //格式化星期
         function formatWeek(v) {
            return ['日', '一', '二', '三', '四', '五', '六'][v];
         }
         var time = new Date();
         return time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日，星期' + formatWeek(time.getDay()) + fromat(time.getHours()) + ':' + fromat(time.getMinutes()) + ':' + fromat(time.getSeconds());

      }
      function getNowTime() {
         setInterval(function () {
            nowTime.innerHTML = getTime();
         }, 100)  
      }
      getNowTime();


      start.onclick = function () {
         if (startStatus == false) {
            return;
         }
         var time = new Date();
         var count = 0;
         timer = setInterval(function () {
            second++;
            if (second == 60) {
               second = 0;
               minute++;
            }
            sec.value = second;
            min.value = minute;
         }, 1000);
         startStatus = false;
      }

      stop.onclick = function () {
         clearInterval(timer);
         startStatus = true;
      }
      init.onclick = function () {
         clearInterval(timer);
         second = 0;
         minute = 0;
         sec.value = 0;
         min.value = 0;
         startStatus = true;
      }

aCc1DeNt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简单的计时器（显示当前时间）

<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible...
复制链接

扫一扫