jQuery实现的倒计时效果实例小结


Posted in Javascript onApril 16, 2016

本文实例总结了jQuery实现的倒计时效果。分享给大家供大家参考,具体如下:

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

当我们在webservice里读取到数据库中的时间字段后,把时间分割判断。Javascript代码如下:

<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)?(second-1):"0"+(second-1);
}
else
{
  second="59";
   if(minute>=1){
     minute=(minute-1>9)?(minute-1):"0"+(minute-1);
   }else{
    minute="59";
     if(hour>=1){
      hour=(hour-1>9)?(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>

多个倒计时>>>

代码:

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

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 #Javascript
jQuery实现无限往下滚动效果代码
Apr 16 #Javascript
jQuery遍历json的方法分析
Apr 16 #Javascript
jquery对dom节点的操作【推荐】
Apr 15 #Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 #Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 #Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 #Javascript
You might like
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
js form action动态修改方法
2008/11/04 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
深入浅析Python字符编码
2015/11/12 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
django加载本地html的方法
2018/05/27 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
幼儿园教研活动方案
2014/01/19 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL