jQuery/javascript倒计时代码总结_365体育备用网址官网资讯

jQuery/javascript倒计时代码总结

文章来源:365jz.com     点击数:147    更新时间:2018-01-10 08:56   参与评论
一.jQuery倒计时代码:

具体代码如下所示:

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <span class="timespan"></span>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
  var starttime = new Date("2017/11/20");
  setInterval(function () {
    var nowtime = new Date();
    var time = starttime - nowtime;
    var day = parseInt(time / 1000 / 60 / 60 / 24);
    var hour = parseInt(time / 1000 / 60 / 60 % 24);
    var minute = parseInt(time / 1000 / 60 % 60);
    var seconds = parseInt(time / 1000 % 60);
    $('.timespan').html(day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒");
  }, 1000);
</script>
</html>

jQuery实现倒计时跳转的例子:

<!-能够复制代码并保留到文件中,注意引入jquery.js文件。->
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>跳转页面</title> 
    <script src="jquery.js"></script>
    <script language="JavaScript"><!--

        $(document).ready(function() {
            function jump(count) {
                window.setTimeout(function(){
                    count--;
                    if(count > 0) {
                        $('#num').attr('innerHTML', count);
                        jump(count);
                    } else {
                        location.href="";
                    }
                }, 1000);
            }
            jump(3);
        });

// --></script>
  </head>    
  <body>  
    <span style="color:red">欢迎来到365体育备用网址!</span><br/>www.365jz.com页面将在3秒后跳转...<br/>还剩<span id="num">3</span>秒
  </body>
</html>


二.javascript倒计时代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单易用的javascript倒计时代码</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:18px; text-align:center;}
.time{ height:30px; padding:200px;}
</style>
</head>
<body>
  <div class="time">
    <span id="t_d">00天</span>
    <span id="t_h">00时</span>
    <span id="t_m">00分</span>
    <span id="t_s">00秒</span>
  </div>
<script>
  function GetRTime(){
    var EndTime= new Date('2014/09/20 00:00:00');
    var NowTime = new Date();
    var t =EndTime.getTime() - NowTime.getTime();
    var d=0;
    var h=0;
    var m=0;
    var s=0;
    if(t>=0){
      d=Math.floor(t/1000/60/60/24);
      h=Math.floor(t/1000/60/60%24);
      m=Math.floor(t/1000/60%60);
      s=Math.floor(t/1000%60);
    }

    document.getElementById("t_d").innerHTML = d + "天";
    document.getElementById("t_h").innerHTML = h + "时";
    document.getElementById("t_m").innerHTML = m + "分";
    document.getElementById("t_s").innerHTML = s + "秒";
  }
  setInterval(GetRTime,0);
</script>
</body>
</html>


三.比较全的JavaScript倒计时脚本

1. 比较长时间的倒计时:

<p>离<span id="next_yeat">2019</span>年还有:
</p>
<form name="form1">  
  <input type="textarea" name="left" size="35" style="text-align:center; font-size:18px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; border:none;">   
</form>
<p><input type="button" onclick="stopclock()" value=" 暂停 "> <input type="button" onclick="startclock()" value=" 继续 "></p>

<script type="text/javascript">  
startclock();
var timerID = null;  
var timerRunning = false;  
function showtime() {  
Today = new Date();
var year = Today.getFullYear();
document.getElementById("next_yeat").innerHTML = year + 1;
var NowHour = Today.getHours();  
var NowMinute = Today.getMinutes();  
var NowMonth = Today.getMonth();  
var NowDate = Today.getDate();  
var NowYear = Today.getYear();  
var NowSecond = Today.getSeconds();  
if (NowYear <2000)  
NowYear=1900+NowYear;  
Today = null;  
Hourleft = 23 - NowHour  
Minuteleft = 59 - NowMinute  
Secondleft = 59 - NowSecond  
Yearleft = year - NowYear  
Monthleft = 12 - NowMonth - 1
Dateleft = 31 - NowDate  
if (Secondleft<0)  
{  
  Secondleft=60+Secondleft;  
  Minuteleft=Minuteleft-1;  
}  
if (Minuteleft<0)  
{   
  Minuteleft=60+Minuteleft;  
  Hourleft=Hourleft-1;  
}  
if (Hourleft<0)  
{  
  Hourleft=24+Hourleft;  
  Dateleft=Dateleft-1;  
}  
if (Dateleft<0)  
{  
  Dateleft=31+Dateleft;  
  Monthleft=Monthleft-1;  
}  
if (Monthleft<0)  
{  
  Monthleft=12+Monthleft;  
  Yearleft=Yearleft-1;  
}  
Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天, '+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒';
document.form1.left.value=Temp;  
timerID = setTimeout("showtime()",1000);  
timerRunning = true;  
}  
var timerID = null;  
var timerRunning = false;  
function stopclock () {  
if(timerRunning)  
clearTimeout(timerID);  
timerRunning = false;  
}  
function startclock () {  
stopclock();  
showtime();  
}  
// -->  
</script>

效果:




2. 小时倒计时(短时间倒计时)

<p id="timer" style="color:red; font-size:14px; font-family:Arial;"></p>

<script type="text/javascript">  
<!--  
//一个小时,按秒计算,能够自己调整时间
var maxtime = 60*60
function CountDown()
{  
if(maxtime>=0)
{  
  minutes = Math.floor(maxtime/60);  
  seconds = Math.floor(maxtime%60);  
  msg = "距离结束还有 "+minutes+" 分 "+seconds+" 秒";  
  document.all["timer"].innerHTML=msg;  
  if(maxtime == 5*60) alert('注意,还有5分钟!');  
  --maxtime;  
}  
else
{  
  clearInterval(timer);  
  alert("时间到,结束!");  
}  
}  
timer = setInterval("CountDown()",1000);  
//-->  
</script>


3. 最简倒计时

<script language="JavaScript">   
<!-- Begin   
  var timedate= new Date("January 14,2012");   
  var times="2012";   
  var now = new Date();   
  var date = timedate.getTime() - now.getTime();   
  var time = Math.floor(date / (1000 * 60 * 60 * 24));   
  if (time >= 0) ;  
document.write("<p>现在离 "+times+" 还有: <b>"+time +"</b> 天</p>");  
// End -->  
</script>





 

如对本文有疑问,请提交到交流梦之城手机下载,广大热心网友会为你解答!! 点击进入梦之城手机下载


公布评论 (147人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换博之道娱乐
最新评论
------分隔线----------------------------
条评论
Sitemap