限时抢购-倒计时的完整实例(分享)

如下所示:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset=utf-8"/>
 <title>团购——限时抢</title>
</head>
<body>
<div>
 <div class="time">还剩 <span id="LeftTime"></span></div>
</div>
<script>
 function FreshTime() {
  var endtime = new Date("2017/10/15,12:20:12");//结束时间
  var nowtime = new Date();//当前时间
  var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
  d = parseInt(lefttime / (24 * 3600));
  h = parseInt(lefttime /3600%24);
  m = parseInt(lefttime/60%60);
  s = parseInt(lefttime % 60);

  document.getElementById("LeftTime").innerHTML = d + "天" + h + "小时" + m + "分" + s + "秒";
  if (lefttime <= 0) {
   document.getElementById("LeftTime").innerHTML = "团购已结束";
   clearInterval(sh);
  }
 }

 var sh;
 sh = setInterval(function () {
  FreshTime()
 },500);

</script>

</body>
</html>

效果图:

以上这篇限时抢购-倒计时的完整实例(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 团购、定时抢购倒计时js版

    团购.定时抢购倒计时 var tms = []; var day = []; var hour = []; var minute = []; var second = []; function takeCount() { setTimeout("takeCount()", 1000); for (var i = 0, j = tms.length; i 剩余时间: 0 天 0 小时 0 分 0 秒 tms[tms.length] = "168935343345";

  • 基于JS实现限时抢购倒计时间表代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>限时抢购倒计时间表</title> <style type="text/css"> *{margin:0;padding:0;} #cont

  • Android限时抢购倒计时实现代码

    限时抢购倒计时实现效果图 布局: <LinearLayout android:id="@+id/ll_xsqg" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingTop="8dp" android:paddin

  • JavaScript实现的商品抢购倒计时功能示例

    本文实例讲述了JavaScript实现的商品抢购倒计时功能.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>JS抢购倒计时</title> </head> <body> <span id="times" > <SCRIPT LANGUAGE="JavaScript">

  • 限时抢购-倒计时的完整实例(分享)

    如下所示: <!DOCTYPE HTML> <html> <head> <meta charset=utf-8"/> <title>团购--限时抢</title> </head> <body> <div> <div class="time">还剩 <span id="LeftTime"></span></di

  • Spring集成MyBatis完整实例(分享)

    为了梳理前面学习的<Spring整合MyBatis(Maven+MySQL)一>与<Spring整合MyBatis(Maven+MySQL)二>中的内容,准备做一个完整的示例完成一个简单的图书管理功能,主要使用到的技术包含Spring.MyBatis.Maven与MySQL等.最后的运行效果如下: 项目结构如下: 一.新建一个基于Maven的Web项目 1.1.创建一个简单的Maven项目,项目信息如下: 1.2.修改层面信息,在项目上右键选择属性,再选择"Project

  • JS秒杀倒计时功能完整实例【使用jQuery3.1.1】

    本文实例讲述了JS秒杀倒计时功能.分享给大家供大家参考,具体如下: 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="miaosha();"> <p class="tit_right" style="

  • Swift实现iOS应用中短信验证码倒计时功能的实例分享

    在开始之前,我们先来了解一个概念 属性观测器(Property Observers): 属性观察器监控和响应属性值的变化,每次属性被设置值的时候都会调用属性观察器,甚至新的值和现在的值相同的时候也不例外. 可以为属性添加如下的一个或全部观察器: willSet在新的值被设置之前调用 didSet在新的值被设置之后立即调用 接下来开始我们的教程,先展示一下最终效果: 首先声明一个发送按钮: 复制代码 代码如下: var sendButton: UIButton! 在viewDidLoad方法中给发

  • bootstrap fileinput完整实例分享

    本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上传组件. 文件夹结构 版本都是3.x <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htm

  • javascript电商网站抢购倒计时效果实现

    本文实例讲述了javascript电商网站抢购倒计时效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>团购--限时抢</title> </head> &

  • 基于javascript实现精确到毫秒的倒计时限时抢购

    这篇文章为大家分享了javascript实现倒计时限时抢购,精确到毫秒的倒计时,供大家参考,具体内容如下 一.效果图 下面的图片就是聚划算上面的限时抢的效果 二.实现限时抢的效果需要用到的知识 :Javascript Date()对象 Date()返回当前的日期和事件 getYear()返回年份 获得年最好用 getFullYear()方法来操作(完整格式如2016) getMonth()返回月份值(从0开始,+1) getDay()返回星期几(0-6) getHours()返回小时数(0-23

  • Android计时与倒计时实现限时抢购的5种方法

    在购物网站的促销活动中一般都有倒计时限制购物时间或者折扣的时间,这些都是如何实现的呢? 在一个安卓客户端项目中恰好遇到了类似的问题,一开始使用的是Timer与 TimerTask, 虽然此方法通用,但后来考虑在安卓中是否有更佳的方案,于是乎共找到以下五种实现方案,另外还有一种使用CountDownTimer进行计时的方面,我会在单独的文章中进行介绍 效果如图: 方法一 Timer与TimerTask(Java实现) public class timerTask extends Activity{

随机推荐