JavaScript implementation of countdown code segment Item1 (very practical)

JavaScript implementation of countdown code segment Item1 (very practical)_javascript skills

WBOY

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

Original

1278 people have browsed it

Nowadays, group buying websites, e-commerce websites, portal websites, etc. often use time to record important moments, such as time display, countdown time difference, limited time sales, etc. This article analyzes the calculation ideas and methods of different countdown effects, and masters the date object Date. Methods to obtain time, methods to calculate time difference, and achieve different countdown effects.

1. Simple time display

Explain the date object Date, and obtain hours, minutes, seconds, etc. through this object, allowing you to freely extract the required time content.

<!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>

Copy after login

Display results:

2. Countdown time difference

Explain methods such as gettime() and how to calculate time, and learn the number of days between times.

<!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>

Copy after login

Display effect:

3. Limited time sale

How to use date objects and methods to calculate the difference in days, hours, minutes and seconds.

<!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>

Copy after login