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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
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输入流php://input介绍
2012/09/18 PHP
PHP内核探索:变量概述
2014/01/30 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php中strtotime函数性能分析
2016/11/20 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
python实时监控cpu小工具
2018/06/21 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python ETL工具 pyetl
2020/06/07 Python
浅析python函数式编程
2020/09/26 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
美国存储和组织商店:The Container Store
2017/08/16 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
大学生实习鉴定评语
2014/04/25 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
幼儿园课题方案
2014/06/09 职场文书
会计求职自荐信范文
2015/03/04 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
MySQL 如何设计统计数据表
2021/06/15 MySQL