ddrpa/countdown.html

## countdown.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Count Down</title>
  <style type="text/css">
    html {
      font-family: "Roboto", -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
      -moz-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-size: 100%;
    }
    body {
      margin: 0 auto;
      max-width: 50em;
      line-height: 1.5;
      padding: 4em 1em;

      background-color: #263d36;
      background-image: url("http://cn.bing.com/az/hprichbg/rb/ItapuaLighthouse_ZH-CN10867280946_1920x1080.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
    h1 {
      color: white;
      font-size: 2.5em;
      font-weight: 300;
    }
    </style>
</head>
<body>
  <h1>倒计时<span id='sec'>100</span>秒</h1>
  <audio id="music"><source = src="bell.mp3" type="audio/mp3"></audio>

  <script type="text/javascript">
    var timeLeft = 100;
    function updateTime() {
      if (timeLeft > 0) {
        document.getElementById('sec').innerHTML = timeLeft;
        setTimeout("updateTime()", 1000);
        timeLeft--;
      } else {
        document.getElementById('sec').innerHTML = 0;
        document.getElementById("music").play();
      }
    }
    updateTime();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Count Down</title>
	<style type="text/css">
	html {
	font-family: "Roboto", -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
	-moz-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size: 100%;
	}
	body {
	margin: 0 auto;
	max-width: 50em;
	line-height: 1.5;
	padding: 4em 1em;

	background-color: #263d36;
	background-image: url("http://cn.bing.com/az/hprichbg/rb/ItapuaLighthouse_ZH-CN10867280946_1920x1080.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	}
	h1 {
	color: white;
	font-size: 2.5em;
	font-weight: 300;
	}
	</style>
	</head>
	<body>
	<h1>倒计时<span id='sec'>100</span>秒</h1>
	<audio id="music"><source = src="bell.mp3" type="audio/mp3"></audio>

	<script type="text/javascript">
	var timeLeft = 100;
	function updateTime() {
	if (timeLeft > 0) {
	document.getElementById('sec').innerHTML = timeLeft;
	setTimeout("updateTime()", 1000);
	timeLeft--;
	} else {
	document.getElementById('sec').innerHTML = 0;
	document.getElementById("music").play();
	}
	}
	updateTime();
	</script>
	</body>
	</html>