分享一个垃圾计时器（倒计时）

最新推荐文章于 2023-05-18 16:36:46 发布

echone_wenqian

最新推荐文章于 2023-05-18 16:36:46 发布

阅读量406

点赞数

分类专栏： PHP HTML+CSS JS

本文链接：https://blog.csdn.net/qq_24729895/article/details/53465762

版权

JS 同时被 3 个专栏收录

34 篇文章 0 订阅

订阅专栏

HTML+CSS

11 篇文章 0 订阅

订阅专栏

PHP

8 篇文章 0 订阅

订阅专栏

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script scr="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="/static/js/jquery-1.11.3.min.js"></script> -->
<head>
    <style>
      .red {
        color: red;
      }
      .green {
        color: green;
      }
      .yellow {
        color: yellow;
      }
      #info {
        font-size: 40px;
      }
    </style>
    <script type="text/javascript"> 
        var t;
        function timedCount() { 
            var time = $("#info").text().split(":");
            var h = Number(time[0]);
            var m = Number(time[1]);

            if (h < 30) {
                $("#info").css("color","red");
                if (m%2 == 0) {
                  $("#info").hide();
                } else {
                  $("#info").show();
                }
            }
            if (h >= 30 && h <= 60) {
              $("#info").css("color",'yellow');
            } 
            if (h > 60) {
              $("#info").css("color","green");
            }
            if (m == '00') {
              h = h - 1;
              m = 60;
              m = m -1;
            } else {
              m = m - 1;
              if (m == 0) m = "00";
            }
            $('#info').text(h + ":" + m);
            if (h == 0 && m =="00") {
              alert('时间用完啦！！！');
            } else {
               t = setTimeout("timedCount()",1000);
            }
        } 
        function stopCount() { 
          clearTimeout(t); 
        }
        var time_info = function() {
            var hour = document.getElementById('txt1').value;
            var miniute = document.getElementById('txt2').value;
            var info = hour*60 + Number(miniute) + ":00";
            $('#info').text(info);
        }
    </script>
</head> 
<body> 
<form> 
<input type="text" id="txt1" placeholder="请输入小时"> 
<input type="text" id="txt2" placeholder="请输入分钟">
<input type="button" value="生成时间" onClick="time_info()">
<div style="width: 500px;height: 80px;line-height: 80px;">
    <span id ="info" class="time_info"></span>
</div>

<input type="button" value="开始计时" onClick="timedCount()"> 
<input type="button" value="停止计时！" onClick="stopCount()"> 
</form> 
<p>输入小时和分钟之后开始计数。</p>  
</body> 
</html>

echone_wenqian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享一个垃圾计时器（倒计时）

<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script scr="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <!-- <script type="text/javascript"
复制链接

扫一扫