init

jamesx · Sep 13, 2016 · ff03d33 · ff03d33
1 parent 6d3ca17
commit ff03d33
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 0 deletions.
diff --git a/timer/README b/timer/README
@@ -0,0 +1 @@
+## 一个简单的倒计时程序
diff --git a/timer/css/main.css b/timer/css/main.css
@@ -0,0 +1,7 @@
+.container {
+	width: 100%;
+	height: 100%;
+
+	padding-top: 100px; 
+	text-align: center;
+}
diff --git a/timer/index.html b/timer/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>倒计时小程序</title>
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+        <div class="container">
+        <h1>倒计时</h1>
+            <div>请输入一个未来的时间：（格式YYYY/MM/DD）</div>
+            <input type="text" value="2017/06/30">
+            <button>倒计时</button>
+            <div id="show">距离YYYY年MM月DD日还有XX天XX小时XX分XX秒</div>
+        </div>
+        <script src="js/main.js"></script>
+    </body>
+</html>
diff --git a/timer/js/main.js b/timer/js/main.js
@@ -0,0 +1,37 @@
+var clock;
+window.onload = function(){
+	var button = document.getElementsByTagName("button")[0];
+	// 不管ie啦
+	button.addEventListener("click", function(e){
+		clearInterval(clock);
+        var pattern = /^\d{4}\/((0[1-9])|(1[0,1,2]))\/((0[1-9])|([1-2][0-9])|(3[0,1]))$/;
+        var targetStr = document.getElementsByTagName("input")[0].value;
+        var targetTime = new Date(targetStr);
+        var showEle = document.getElementById("show");
+        clock = setInterval(function(){ count();},500);
+        function count(){
+        	if (targetStr.match(pattern)) {
+        	var nowTime = new Date();
+        	var gap = targetTime - nowTime;
+        	if (gap < 0) {
+                showEle.innerHTML = "请输入未来的时间";
+                clearInterval(clock);
+                return;
+        	} else if (gap == 0) {
+        		showEle.innerHTML = "到达时间啦！";
+        		clearInterval(clock);
+        		return;
+        	} else {
+                var day = Math.floor(gap/(1000*60*60*24));
+                var hour = Math.floor(gap/(1000*60*60)%24);
+                var minute = Math.floor(gap/(1000*60)%60);
+                var second = Math.floor(gap/1000%60);
+                showEle.innerHTML = "距离"+targetStr+"还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
+        	}
+            } else {
+            	showEle.innerHTML = "请输入正确格式的时间";
+            }
+        }
+
+	});
+}