search

Home >Web Front-end >JS Tutorial >Summary of countdown effect examples implemented by jQuery_jquery

Summary of countdown effect examples implemented by jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:05:111695browse

The example in this article summarizes the countdown effect implemented by jQuery. Share it with everyone for your reference, the details are as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现倒计时效果</title>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
 var SysSecond;
 var InterValObj;
 $(document).ready(function() {
 SysSecond = parseInt($("#remainSeconds").html()); //这里我是在服务端算好了剩余的秒数，并保存到客户端，如果过期则返回0
 InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行
 });
 //代理,接单的时间+1小时减去当前时间的秒数
 function SetRemainTime() {
 if (SysSecond > 0) {
  //alert(SysSecond);
  SysSecond = SysSecond - 1;
  var second = Math.floor(SysSecond % 60); // 计算秒
  var minite = Math.floor((SysSecond / 60) % 60); //计算分
  var hour = Math.floor((SysSecond / 3600) % 24); //计算小时
  var day = Math.floor((SysSecond / 3600) / 24); //计算天
  $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
 } else {//剩余时间小于或等于0的时候，就停止间隔函数
  window.clearInterval(InterValObj);
 }
 }
</script>
</head>
<body>
<div id="remainSeconds" style="display:none">18000</div>
<div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div>
</body>
</html>

After we read the time field in the database in the webservice, we divide the time into judgments. The Javascript code is as follows: 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function Times() {
var tempTime=document.getElementById("currTime").innerHTML.split(":");
var hour=tempTime[0];
var minute=tempTime[1];
var second=tempTime[2];
if(second>=1)
{
second=(second-1>9)&#63;(second-1):"0"+(second-1);
}
else
{
  second="59";
   if(minute>=1){
     minute=(minute-1>9)&#63;(minute-1):"0"+(minute-1);
   }else{
    minute="59";
     if(hour>=1){
      hour=(hour-1>9)&#63;(hour-1):"0"+(hour-1);
     }else{
      minute="00";
      hour="0"+0;
     }
   }
}
document.getElementById("currTime").innerHTML=hour+":"+minute+":"+second;
if(hour==0&&minute==0&&second==0)
{
document .getElementById ("currTime").style .display ="none";
}
else
setTimeout (Times,1000);
}
//当窗体加载是调用。相当于onload（）事件
 (function gettime()
  {
  $.ajax({
  contentType:"application/json",
  type: "POST",
  url: "WebService.asmx/Gettime",
  data: "{'id':'1'}",
  dataType: 'json',
  success: function(msq){
  document .getElementById ("currTime").innerHTML =msq.d ;
  }
  });
     setTimeout (Times,1000) ；
 })();
 </script>

Multiple countdowns>>>

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>无标题页</title>
</head>
<body>
  <p>离一模还有<span id="_lefttime1" style="color:red;font-size:12pt;"></span></p>
<p>离二模还有<span id="_lefttime2" style="color:red;font-size:12pt;"></span></p>
<p>离高考还有<span id="_lefttime3" style="color:red;font-size:12pt;"></span></p>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
function _fresh(){
var datalist =new Array();
datalist =[
[new Date("2010/10/1"), "_lefttime1"],
[new Date("2010/10/15"), "_lefttime2"],
[new Date("2010/10/2"), "_lefttime3"]
];
for(var i =0; i<datalist.length; i++){
var endtime =datalist[i][0];
var nowtime = new Date();
var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000);
if(leftsecond<0)leftsecond=0;
var __d=parseInt(leftsecond/3600/24);
document.getElementById(datalist[i][1]).innerHTML=__d+"天 ";
}
}
setInterval(_fresh,1000);
</SCRIPT>

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery date and time operation skills summary", "jQuery switching special effects and skills summary", "JQuery Drag and Drop Special Effects and Skills Summary", "jQuery Extension Skills Summary", "jQuery Common Classic Special Effects Summary", "jQuery Animation and Summary of special effects usage ", "jquery selector usage summary " and "jQuery common plug-ins and usage summary "

I hope this article will be helpful to everyone in jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of submission form ideas of artdialog pop-up box control in JS_javascript skillsNext article：Detailed explanation of submission form ideas of artdialog pop-up box control in JS_javascript skills

Related articles

See more