【Js】单页面多个倒计时问题
2024-09-19 20:32:19
代码:
<!DOCTYPE html>
<html>
<head>
<title>多个timeout</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
<h5 class="text-success">倒计</h5>
<!-- 已结束 -->
<p id="order_time_1" data-id="" data-starttime="2019-12-01 11:59:59" data-endtime="2020-02-02 11:30:59"
class="remain-time">已结束</p>
<!-- 距多少开始 -->
<p id="order_time_2" data-id="" data-starttime="2019-12-08 11:30:00" data-endtime="2020-03-20 12:00:00"
class="remain-time">距多少开始</p>
<!-- 距多少开始 -->
<p id="order_time_22" data-id="" data-starttime="2019-12-01 16:42:30" data-endtime="2020-03-20 12:00:00"
class="remain-time">距多少开始3</p> <!-- 距多少结束 -->
<p id="order_time_3" data-id="" data-starttime="2019-12-01 23:59:59" data-endtime="2020-03-10 23:59:59"
class="remain-time">距多少结束</p>
<!-- 距多少结束 -->
<p id="order_time_33" data-id="" data-starttime="2019-12-01 23:59:59" data-endtime="2020-03-1 16:44:00"
class="remain-time">距多少结束3</p>
</div> <script type="text/javascript">
var jsq = {
startdata: [],
enddata: [],
addStart: function (key, value) {
if (typeof (jsq.startdata[key]) == 'undefined') {
jsq.startdata[key] = value;
}
},
addEnd: function (key, value) {
if (typeof (jsq.enddata[key]) == 'undefined') {
jsq.enddata[key] = value;
}
},
addAll: function () {
$(".remain-time").each(function (i) {
var key = $(this).attr("data-id");
var startValue = $(this).attr("data-starttime");
var endValue = $(this).attr("data-endtime");
//添加计时元素
if (typeof (jsq.startdata[key]) == 'undefined') {
jsq.addStart(key, startValue);
jsq.addEnd(key, endValue);
}
});
//执行检测
jsq.subAll();
},
subAll: function () {
for (var index in jsq.startdata) {
var nowTime = new Date();
var startTime = new Date(jsq.startdata[index].toString().replace(/-/g, '/'));
var endTime = new Date(jsq.enddata[index].toString().replace(/-/g, '/')); var S_timestamp = startTime.getTime() - nowTime.getTime();
var E_timestamp = endTime.getTime() - nowTime.getTime(); //console.log(startTime);
if (E_timestamp <= ) //小1秒
{
$('#order_time_' + index).text('已结束 >' + jsq.enddata[index].toString());
$('#order_time_' + index).css("color", "red");
//$("#order_time_" + key).parent().parent().parent().parent().remove(); //删除
}
else if (E_timestamp > && S_timestamp >= ) //大1秒
{
//提取时间元素
var _day = Math.floor(S_timestamp / / / / );
var _hour = Math.floor(S_timestamp / / / % );
var _min = Math.floor(S_timestamp / / % );
var _sec = Math.floor(S_timestamp / % ); if (_hour < ) {
_hour = "" + _hour;
}
if (_min < ) {
_min = "" + _min;
}
if (_sec < ) {
_sec = "" + _sec;
}
$('#order_time_' + index).text(_day + "天" + _hour + "时" + _min + "分" + _sec + "秒" + "开始");
}
else {
//提取时间元素
var _day = Math.floor(E_timestamp / / / / );
var _hour = Math.floor(E_timestamp / / / % );
var _min = Math.floor(E_timestamp / / % );
var _sec = Math.floor(E_timestamp / % ); if (_hour < ) {
_hour = "" + _hour;
}
if (_min < ) {
_min = "" + _min;
}
if (_sec < ) {
_sec = "" + _sec;
}
$('#order_time_' + index).text(_day + "天" + _hour + "时" + _min + "分" + _sec + "秒" + "结束");
}
}
}
}; $(function () {
//倒计时
setInterval('jsq.addAll()', );
});
</script>
</body> </html>
最新文章
- 自定义 Material Design风格的提示框
- Asp.net 网站防攻击安全设置
- Android基础总结(10)——手机多媒体的运用:通知、短信、相机、视频播放
- git pull使用【转】
- Old Calculator
- *[topcoder]JumpFurther
- Android 实用代码七段(二)
- ajax+FormData+javascript 实现无刷新表单注册
- Delphi事件列表赏析(38个事件,必须要对这些事件非常熟悉,才能如臂使指,才能正确发布到新控件!)
- 私有静态方法private static method-值得用吗?
- 玩转Web之Json(四)---json与(Object/List/Map)的相互转化
- Linux系统(五)负载均衡LVS集群之DR模式
- [Linux] PHP程序员玩转Linux系列-Linux和Windows安装nginx
- 在react.js上使用antd-design没有样式
- CodeM美团点评编程大赛初赛B轮 黑白树【DFS深搜+暴力】
- .Net语言 APP开发平台——Smobiler学习日志:如何在手机上快速实现CandleStickChart控件
- Spark Streaming和Kafka整合保证数据零丢失
- ****** 二十八 ******、软设笔记【数据库】-分布式数据库、特点、数据存储、DBMS组成
- Oracle Database 11g : SQL 基础
- 本机连接Spark Standalone--最简单的spark调试方式
热门文章
- 【HCIA Gauss】学习汇总-数据库管理(事务 权限 审计 OBDC JDBC)-6
- Docker基础用法篇
- Linux-网络RAID技术DRBD
- SQL之CASE WHEN用法详解(转)
- 与你一起学习MS Project&mdash;&mdash;理论篇:项目管理与Project
- $().on()的知识点
- django-文件上传和下载--fastDFS安装和配置
- nginx 配置文件正确性测试
- ES6函数的个人总结
- LeetCode 971. Flip Binary Tree To Match Preorder Traversal