Pelaksanaan JavaScript bagi segmen kod undur Item1 (sangat praktikal)

Pelaksanaan JavaScript bagi segmen kod undur Item1 (sangat praktikal)_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:33:46

asal

1305 orang telah melayarinya

Kini, laman web pembelian berkumpulan, tapak web e-dagang, laman web portal, dsb. sering menggunakan masa untuk merakam detik penting, seperti paparan masa, perbezaan masa kira detik, jualan masa terhad, dsb. Artikel ini menganalisis idea dan kaedah pengiraan kesan kira detik yang berbeza, dan menguasai objek tarikh Tarikh Kaedah untuk mendapatkan masa, kaedah untuk mengira perbezaan masa, dan mencapai kesan kira detik yang berbeza.

1. Paparan masa ringkas

Terangkan objek tarikh Tarikh, dan dapatkan jam, minit, saat, dsb. melalui objek ini, membolehkan anda mengekstrak kandungan masa yang diperlukan secara bebas.

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
 window.onload = function(){
  showTime();
 }
 function showTime(){
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1;
  var date = myDate.getDate();
  var dateArr = ["日","一",'二','三','四','五','六'];
  var day = myDate.getDay();
  var hours = myDate.getHours();
  var minutes = formatTime(myDate.getMinutes());
  var seconds = formatTime(myDate.getSeconds());
  var systemTime = document.getElementById("time");
  systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds;
  setTimeout("showTime()",500);
 }
 //格式化时间：分秒。
 function formatTime (i){
  if(i < 10){
   i = "0" + i;
  }
  return i;
 }
 </script>
</head>
<body>
 <div id ='time'></div>
</body>
</html>

Salin selepas log masuk

Hasil paparan:

2. Perbezaan masa kira detik

Terangkan kaedah seperti gettime() dan cara mengira masa, serta pelajari bilangan hari antara masa.

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
  window.onload = function(){
   deadTime();
  }
  function deadTime(){
   var nowTime = new Date();
   var finalTime = new Date("2015-11-11");
   var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
   var date = Math.ceil(lefttime);
   document.getElementById("time").innerHTML = date;
  }
 </script>
</head>
<body>
 <div >距离双十一还有：<span id ='time'></span>天</div>
</body>
</html>

Salin selepas log masuk

Kesan paparan:

3. Jualan masa terhad

Cara menggunakan objek tarikh dan kaedah untuk mengira perbezaan hari, jam, minit dan saat.

<!DOCTYPE html>
<html>
<head>
<title>团购——限时抢</title>
</head>
<body>
<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
 var endtime=new Date("2015/11/11,12:20:12");//结束时间
 var nowtime = new Date();//当前时间
 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 
 d=parseInt(lefttime/3600/24);
 h=parseInt((lefttime/3600)%24);
 m=parseInt((lefttime/60)%60);
 s=parseInt(lefttime%60);
 document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
 if(lefttime<=0){
  document.getElementById("LeftTime").innerHTML="团购已结束";
  clearInterval(sh);
 }
}
 FreshTime();
 var sh;
 sh=setInterval(FreshTime,1000);
</script>
</body>
</html>

Salin selepas log masuk