<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content = "text/html,charset=utf-8">
<title>time test</title>
<style type="text/css">
.time{font-size:50px;color:red;}
</style>
<script type="text/javascript">
var ms = 9;//虚拟数字，放在时间后面
var interval = null;
var json = [{"time":"2015/11/17 18:10:00","id":"time1"},
{"time":"2015/11/17 18:08:00","id":"time2"},
{"time":"2015/11/17 18:07:00","id":"time3"}
];
function tm_backTime(timeDate,objId){
var endTime = new Date(timeDate);
var date = new Date();
var leftTime = (endTime.getTime() - date.getTime())/1000;//总的秒数
var d = Math.floor(leftTime/3600/24);
var h = Math.floor((leftTime/3600)%24);
var m = Math.floor(leftTime/60)%60;
var s = Math.floor(leftTime%60);
document.getElementById(objId).innerHTML = d+"天"+h+"小时"+m+"分钟"+s+"秒"+ms;
if(leftTime <= 0){
document.getElementById(objId).innerHTML = "Time's Over!";
}
}
//虚拟数字，每0.1秒变化一次
interval = setInterval(function(){
if(ms == 0){
ms = 9;
}
ms = ms - 1;
},100);
//窗口加载
window.onload = function(){
interval = setInterval(function(){
for(var i=0;i<json.length;i++){
tm_backTime(json[i].time,json[i].id);
}
});
}
</script>
</head>
<body>
<p class="time" id="time1"></p>
<p class="time" id="time2"></p>
<p class="time" id="time3"></p>
</body>
</html>
相关推荐
在Android开发中，"android listview实现抢购倒计时"是一个常见的需求，尤其是在电商应用中，用于模拟商品抢购的紧张氛围。本教程将详细讲解如何在ListView中实现这样的功能，让每个列表项都能显示实时更新的倒计时...
在Android应用开发中，模拟淘宝秒杀功能是一项常见的需求，涉及到关键的技术点是定时器（Timer）和倒计时（CountDownTimer）。本教程将详细讲解如何利用Android的API实现这一功能。 首先，我们来理解"倒计时"的概念...
"描述了该倒计时源码可能采用了一种模拟液晶显示屏的视觉效果。在易语言中，这需要利用`窗口部件`来创建和布局控件，如文本框显示倒计时数字，以及可能的背景图片。 5. **数值转换和格式化**：将计算得到的秒数转换...
例如，电商应用中的限时抢购倒计时，提醒用户把握购买时机；在线教育平台的课程开课倒计时，让用户提前做好学习准备；还有各类应用的启动页，通过倒计时动画营造期待感。 总结，倒计时动画是一个集交互性与视觉效果...
在ASP.NET开发中，模拟淘宝聚划算的倒计时功能是一项常见的需求，它涉及到前端界面的动态更新、服务器端的时间同步以及数据库交互等多个技术环节。本案例由"京华志&精华志"出品，旨在分享C#、ASP.NET、SQL和DBA相关...
在iOS开发中，倒计时功能是一个非常常见且实用的特性，它被广泛应用于各种场景，如电商的限时抢购、直播预告等。本文将详细阐述如何在iOS平台上实现倒计时功能，以及相关的编程技巧。 首先，我们需要了解的是iOS...
在构建一个简单的商城商品抢购倒计时列表页面的手机应用时，我们需要关注以下几个关键知识点： 1. **前端框架选择**： 在开发移动端页面时，可以选择使用React、Vue或Angular等主流前端框架。这些框架提供了组件化...
淘宝倒计时自定义控件是一种在Android应用开发中常见的组件，主要用于模拟淘宝等电商平台的限时抢购倒计时效果。这种控件可以为用户提供直观的时间紧迫感，从而增加商品的吸引力和购买转化率。在Android开发中，实现...
在本文中，我们将深入探讨如何使用jQuery来实现购物抢购时间轴倒计时代码，以及相关的前端开发技术。首先，让我们理解"猫咪闪电风格"这一描述，它可能指的是设计上带有猫咪元素和快速动态效果，这通常是吸引用户注意...
在IT行业中，模拟淘宝倒计时是一项常见的前端开发任务，它涉及到网页动态效果的实现，主要用于显示限时促销、抢购活动等时间限制的信息。这个倒计时功能的核心在于如何用代码精确地计算并展示剩余时间，通常会用到...
在Android开发中，实现淘宝倒计时功能是一项常见的需求，尤其在电商应用中用于限时抢购或活动倒计时。本教程将详细介绍如何在Android中创建一个自定义的倒计时控件，以模拟淘宝倒计时的效果。 首先，我们需要创建一...
在电商网站中，倒计时秒杀组件是促销活动中常见的功能，其主要目的是引导用户在特定时间内参与抢购，提升产品的曝光率及销售额。在使用Vue.js框架开发中，实现一个基于服务器时间的秒杀倒计时功能需要特别注意时间...
倒计时的实现方法多种多样，可以使用JavaScript定时执行功能来模拟倒计时的效果，但通常这样做缺乏封装性，使得代码的复用和维护变得复杂。 为了使倒计时功能更易于集成和使用，开发者们常会采用JavaScript的库，...
在倒计时闹钟效果中，我们可以设置一个特定时间，比如倒计时到零时，表示抢购开始。每次onTick()被调用时，可以更新自定义View的扫描进度，使得动画平滑进行。 Android的补间动画（Tween Animation）也是实现此效果...
JS作为前端开发的主要语言，其动态特性使得它非常适合用于构建这种实时更新、计时倒计时的交互功能。 【描述】"WEB开发必不可少的！ 供大家使用！"这句话强调了限时抢购JS在Web开发中的重要性。无论是在大型电商...
首先，我们需要理解淘宝秒杀界面的核心元素：商品展示、倒计时、抢购按钮以及动态更新的库存信息。在Swift中，我们可以使用UIKit框架来创建这些组件。 1. **商品展示**：在iOS应用中，商品图片通常使用UIImageView...
其次，**倒计时功能**在电商领域有着广泛的应用，它通常用于限时促销、抢购活动等场景，能有效刺激消费者的购买欲望。在京东手机模板中，倒计时功能可能包含以下设计要素： 1. 倒计时展示：在商品页面、首页轮播图...
该插件可能包含额外的定制功能，如自定义页面布局、抢购倒计时等。其核心特性可能包括： - 界面优化：提供美观的抢购页面模板，提升用户体验。 - 自动恢复：抢购结束后，商品自动恢复原价并重新上架。 - 排行榜...
这个HTML结构是抢购页面的基础，其中`<span id="endTime"></span>`用于显示倒计时，`立即购买" disabled="disabled">`则是抢购按钮，初始状态为禁用，表示抢购未开始。 接着，我们引入jQuery库，这是一个流行的...
要实现一个限时抢购的倒计时效果，首先需要理解以下几个关键的前端知识点和相关技术： 1. HTML页面结构：要展示倒计时，需要在HTML页面上添加一个用于显示倒计时的元素，比如一个`<div>`，其内部使用`<span>`或`<p>...