js秒錶效果程式碼例項

antzone發表於2017-04-13
原文網址 : https://www.softwhy.com/article-6986-1.html
JS

本章節分享一段程式碼例項，它實現了秒錶效果。

能夠點選進行計時，也能夠將記錄的時間記錄下來。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
li {
  display: block;
  margin-bottom: 10px;
}
body {
  background: #353535;
}
#yesap {
  width: 450px;
  height: 550px;
  background: #000;
  border: 3px #fff solid;
}
#ekran {
  width: 420px;
  height: 120px;
  background: #838383;
  position: relative;
  top: 12px;
  color: #fff;
  font-size: 55px;
}
#ekran #bir {
  color: #fff;
  font-size: 55px;
  position: absolute;
  right: 95px;
  bottom: -10px;
}
#ekran #ikki {
  color: #fff;
  font-size: 55px;
  position: absolute;
  right: 180px;
  bottom: -10px;
}
#ekran #uq {
  color: #fff;
  font-size: 55px;
  position: absolute;
  right: 260px;
  bottom: -10px;
}
#ekran .qkt1 {
  position: relative;
  left: -22px;
  top: 25px;
}
#ekran .qkt2 {
  position: relative;
  left: 30px;
  top: 25px;
}
#hatir {
  width: 420px;
  height: 310px;
  background: #FAFFE8;
  border-radius: 12px;
  position: relative;
  top: 25px;
}
#hatir #bir {
  color: #000;
  font-size: 35px;
  position: absolute;
  left: 260px;
  margin-top: 20px;
}
#hatir #ikki {
  color: #000;
  font-size: 35px;
  position: absolute;
  left: 180px;
  margin-top: -10px;
}
#hatir #uq {
  color: #000;
  font-size: 35px;
  position: absolute;
  left: 95px;
  margin-top: -10px;
}
#hatir .qkt1 {
  position: relative;
  font-size: 26px;
  left: -43px;
  top: 26px;
}
#hatir .qkt2 {
  position: relative;
  font-size: 26px;
  left: 22px;
  top: 26px;
}
#icon {
  width: 420px;
  height: 70px;
  position: relative;
  top: 10px;
  top: 26px;
}
#icon div {
  float: left;
  margin-left: 38px;
  margin-top: 35px;
  color: #fff;
  line-height: 38px;
}
#icon #icon1 {
  width: 90px;
  height: 40px;
  border-radius: 11px;
  background: rgb(88, 87, 109);
}
#icon #icon2 {
  width: 90px;
  height: 40px;
  border-radius: 11px;
  background: rgb(88, 87, 109);
}
#icon #icon3 {
  width: 90px;
  height: 40px;
  border-radius: 11px;
  background: rgb(88, 87, 109);
}
#del {
  width: 110px;
  height: 45px;
  background: #FF0F0F;
  margin-top: -7px;
  border-radius: 20px;
  margin-left: 3px;
}
#del p {
  color: #fff;
  font-size: 22px;
  line-height: 40px;
}
#del:hover {
  cursor: pointer;
}
#icon1:hover {
  cursor: pointer;
}
#icon2:hover {
  cursor: pointer;
}
#icon3:hover {
  cursor: pointer;
}
#tishi {
  width: 420px;
  height: 310px;
  background: #fff444;
  position: absolute;
  border-radius: 12px;
  filter: alpha(opacity:0);
  opacity: 0;
  z-index: 9;
  display: none;
}
#tishi p {
  font-size: 24px;
  font-weight: bold;
  margin-top: 100px;
  color: #020027;
}
#tishi #btn {
  width: 90px;
  height: 40px;
  background: #000;
  border-radius: 18px;
  margin-top: -40px;
}
#tishi #btn p {
  color: #fff;
  font-size: 20px;
  line-height: 38px;
}
#tishi #btn:hover {
  cursor: pointer;
}
</style>
<script>
function getStyle(obj, name) {
  if (obj.currentStyle) {
    return obj.currentStyle[name];
  } else {
    return getComputedStyle(obj, false)[name];
  }
}
 
function startMove(obj, json, End) {
 
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var bStop = true;
    for (var turi in json) {
      var cur = 0;
 
      if (turi == 'opacity') {
        cur = Math.round(parseFloat(getStyle(obj, turi)) * 100);
      } else {
        cur = parseInt(getStyle(obj, turi));
      }
 
      var speed = (json[turi] - cur) / 7;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 
      if (cur != json[turi])
        bStop = false;
 
      if (turi == 'opacity') {
        obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
        obj.style.opacity = (cur + speed) / 100;
 
      } else {
        obj.style[turi] = cur + speed + 'px';
      }
    }
    if (bStop) {
      clearInterval(obj, timer);
      if (End) {
        End()
      };
    }
  }, 30)
}
window.onload = function() {
  var adiv = document.getElementById('bir');
  var abtn = document.getElementById('icon1');
  var bbtn = document.getElementById('icon3');
  var xbtn = document.getElementById('icon2');
  var arcd = document.getElementById('hatir');
  var rcdx = arcd.getElementsByTagName('li');
  var aekr = document.getElementById('ekran');
  var del = document.getElementById('del');
 
 
  abtn.onclick = function() {
    Timestart();
  }
  bbtn.onclick = function() {
    stop();
  }
  xbtn.onclick = function() {
    var oLi = document.createElement('li');
    var save = aekr.getElementsByTagName('li')[0];
 
    if (rcdx.length == 7) {
      var tshi = document.getElementById('tishi');
      var btn1 = document.getElementById('btn');
      tshi.style.display = 'block';
      startMove(tshi, {
        opacity: 90
      })
      btn1.onclick = function() {
        var tshi = document.getElementById('tishi');
        startMove(tshi, {
          opacity: 0
        }, function() {
          tshi.style.display = 'none';
        })
      }
    } else {
      oLi.innerHTML = save.innerHTML;
      arcd.appendChild(oLi);
    }
  }
  del.onclick = function() {
    arcd.innerHTML = '<div id="tishi"><p>記錄已達到最大限制</p><div id="btn"><p>好吧</p></div></div>';
  };
 
};
 
var timer = null;
 
function kox(n) {
  if (n < 10) {
    return '0' + n
  } else {
    return '' + n
  };
};
 
function Timestart() {
  var adiv = document.getElementById('bir');
  var ndiv = document.getElementById('ikki');
  var cdiv = document.getElementById('uq');
  var abtn = document.getElementById('icon1');
  var bbtn = document.getElementById('ekran');
  var fdiv = bbtn.getElementsByTagName('h1')[1];
 
  clearInterval(timer);
  timer = setInterval(function() {
    if (adiv.innerText == 99) {
      adiv.innerText = 0;
      ndiv.innerText++;
      adiv.innerText = kox(adiv.innerText);
      ndiv.innerText = kox(ndiv.innerText);
      if (ndiv.innerText == 60) {
        ndiv.innerText = 0;
        cdiv.innerText++;
        ndiv.innerText = kox(ndiv.innerText);
        cdiv.innerText = kox(cdiv.innerText);
      };
    } else {
      adiv.innerText++;
      adiv.innerText = kox(adiv.innerText);
    };
  }, 10)
 
 
};
 
function stop() {
  clearInterval(timer);
};
</script>
</head>
<body>
  <center>
    <div id="yesap">
      <div id="ekran">
        <li>
          <h1 id="bir">00</h1>
          <b class="qkt1">:</b>
          <h1 id="ikki">00</h1>
          <b class="qkt2">:</b>
          <h1 id="uq">00</h1>
        </li>
      </div>
      <div id="hatir">
        <div id="tishi">
          <p>記錄已達到最大限制</p>
          <div id="btn"><p>好吧</p>
        </div>
      </div>
    </div>
      <div id="icon">
        <div id="icon1"><b>開始</b></div>
        <div id="icon2"><b>記錄</b></div>
        <div id="icon3"><b>暫停</b></div>
      </div>
    </div>
    <div id="del"><p>清空</p></div>
  </center>
</body>
</html>

相關文章