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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
js实现网页抽奖实例
Aug 05 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
vue 图片裁剪上传组件的实现
Nov 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 5.6版本中编写一个PHP扩展的简单示例
2015/01/20 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
微信小程序制作表格的方法
2019/02/14 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python第三方库的安装方法总结
2016/06/06 Python
详解Swift中属性的声明与作用
2016/06/30 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
学习标兵获奖感言
2014/02/20 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
医院护士工作检讨书
2014/10/26 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis