|
|
@@ -0,0 +1,63 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .box{
|
|
|
+ width: 400px;
|
|
|
+ height: 400px;
|
|
|
+ background-color: #999;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top:50%;
|
|
|
+ margin-top: -200px;
|
|
|
+ margin-left: -200px;
|
|
|
+ }
|
|
|
+ .box .num{
|
|
|
+ font-size: 50px;
|
|
|
+ font-weight: bolder;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 100px;
|
|
|
+ }
|
|
|
+ .box .btn{
|
|
|
+ width: 100px;
|
|
|
+ height: 50px;
|
|
|
+ border:1px solid black;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="box">
|
|
|
+ <div class="num">100</div>
|
|
|
+ <div class="btn">开始</div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var oNum = document.getElementsByClassName('num')[0];
|
|
|
+ var oBtn = document.getElementsByClassName('btn')[0];
|
|
|
+
|
|
|
+ // 存储当前状态 true 代表暂停状态 false 代表运行状态
|
|
|
+ var flag = true;
|
|
|
+ var timer = 0;
|
|
|
+ oBtn.onclick = function(){
|
|
|
+ if(true){
|
|
|
+ flag = false;
|
|
|
+ oBtn.innerText = '暂停';
|
|
|
+ timer = setInterval(function(){
|
|
|
+ oNum.innerText --;
|
|
|
+ },1000);
|
|
|
+ }else{
|
|
|
+ // 更正状态值
|
|
|
+ flag = true;
|
|
|
+ oBtn.innerText = '开始';
|
|
|
+ clearInterval(timer);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
