JavaScript 100s倒计时时钟制作

最新推荐文章于 2022-07-21 16:24:16 发布

Claire_TJ

最新推荐文章于 2022-07-21 16:24:16 发布

阅读量514

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_40851250/article/details/85232196

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这是一个JS实战的小例子：http://www.fgm.cc/learn/

我今天做的是第三课的第九个小例子：倒计时时钟

我们首先来看一下，它给的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时时钟</title>
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(img/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
	var oCountDown = document.getElementById("countdown");	
	var aInput = oCountDown.getElementsByTagName("input")[0];
	var timer = null;
	
	aInput.onclick = function ()
	{
		this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
		this.className = this.className == '' ? "cancel" : '';	
	};
	
	function format(a)
	{
		return a.toString().replace(/^(\d)$/,'0$1')
	}
	
	function updateTime ()
	{
		var aSpan = oCountDown.getElementsByTagName("span");
		var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
		if(oRemain <= 0)
		{
			clearInterval(timer);
			return
		}
		oRemain--;
		aSpan[0].innerHTML = format(parseInt(oRemain / 60));
		oRemain %= 60;
		aSpan[1].innerHTML = format(parseInt(oRemain));
	}
}
</script>
</head>
<body>
<div id="countdown">
	<span>01</span>分钟<span>40</span>秒
	<input type="button" value="" />
</div>
</body>
</html>

成果：

我看着比较复杂，其实是因为我比较菜，所以一些地方看起来会比较费力，所以我写了一个自己的版本：

<!DOCTYPE html>
<html lang="en">

<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 media="screen" type="text/css">
    div {
      margin: 0 auto;
      width: 300px;
      text-align: center;
      background-color: black;
      padding: 10px;
    }

    input,
    p {
      display: inline;
      font-size: 18px;
      margin-top: 10px;
    }

    input {
      text-align: center;
    }

    p {
      color: white;
    }

    .button {
      display: block;
      margin: 20px auto;
      width: 200px;
      height: 50px;
      background-color: green;
      border-radius: 15px;
      color: white;
    }

    #end {
      background-color: red;
      display: none;
    }
  </style>
  <script type="text/javascript">
    window.onload = function() {
      var start = document.getElementById('start');
      var end = document.getElementById('end');
      var minute = document.getElementById('minute');
      var second = document.getElementById('second');
      var time = setInterval(Decrease, 1000);
      clearInterval(time);
    }


    function Start() {   //开始倒计时函数
      start.style.display = "none";
      end.style.display = "block";
      time = setInterval(Decrease, 1000);
    }

    function End() {       //结束倒计时函数
      end.style.display = "none";
      start.style.display = "block";
      clearInterval(time);
    }

    function Decrease() {   //秒钟减一函数
      if (second.value != '00') {
        second.value = AddZ(Number(second.value) - 1);
      } else if (second.value == '00' && minute.value != '00') {
        minute.value = '00';
        second.value = '59';
      } else if (second.value == '00' && minute.value == '00') {
        clearInterval(time);
      }
    }

    function AddZ(s) {
      if (s < 10)
        s = '0' + s;
      return s;
    }
  </script>
</head>

<body>
  <div>
    <input type="text" id="minute" value="01" size="5">
    <p>分钟</p>
    <input type="text" id="second" value="40" size="5">
    <p>秒</p>
    <input id='start' class='button' type="button" value="启动" onclick="Start()">
    <input id='end' class='button' type="button" value="停止" onclick="End()">
  </div>
</body>

</html>

大概就是用一些比较简单的判断去写的，如果有什么疑问，欢迎在评论区与我交流。

发现什么错误的，也请不吝斧正。

最后放一个我的代码做出来的样子（启动按钮那里就懒得贴图了）：

Claire_TJ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 100s倒计时时钟制作

这是一个JS实战的小例子：http://www.fgm.cc/learn/我今天做的是第三课的第九个小例子：倒计时时钟我们首先来看一下，它给的代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional....
复制链接

扫一扫