前端 jquery 倒计时

最新推荐文章于 2023-11-29 15:57:06 发布

创意随想

最新推荐文章于 2023-11-29 15:57:06 发布

阅读量339

点赞数

转发：https://www.cnblogs.com/hellowzl/p/8060251.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
//参考：可以通过跨域方式获取其他服务器的当前时间作为服务器当前时间
var oCity="北京"; //设置城市
$.ajax({
type:"GET", //默认是GET
url:"http://api.map.baidu.com/telematics/v3/weather?location=" + oCity + "&output=json&ak=ohA7QHfg0BBrpiY4kyuIAAsD",
dataType:"jsonp",
success:function(data){
//alert(data.date);
},
error:function(jqXHR){
//alert("信息错误" + jqXHR.status);
}
})
})
</script>
</head>
<body id="bodyId" οnlοad="setTimer()">
<div>
<table>
<tr>
<td width="120px;"><label title="系统当前时间">系统当前时间：</label></td>
<td><input id="start" /></td>
</tr>
<tr>
<td width="120px;"><label title="活动截止时间">活动截止时间：</label></td>
<td><input id="end" disabled="disabled" value="2018-01-01 00:00:00" /></td>
</tr>
<tr>
<td colspan="2"><p id="p"></p></td>
</tr>
</table>
</div>
<script>
//时间为一位数时显示格式为："0X"
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}

//显示浏览器现在的时间
function formatTime(timeVal) {
var datePara = new Date(timeVal);//定义日期对象
var yyyy = datePara.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = datePara.getMonth() + 1;//通过日期对象的getMonth()方法返回月
var dd = datePara.getDate();//通过日期对象的getDate()方法返回日
var hh = datePara.getHours();//通过日期对象的getHours方法返回时
var mm = datePara.getMinutes();//通过日期对象的getMinutes方法返回分
var ss = datePara.getSeconds();//通过日期对象的getSeconds方法返回秒
// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
MM = checkTime(MM);
dd = checkTime(dd);
hh = checkTime(hh);
mm = checkTime(mm);
ss = checkTime(ss);

//用于保存星期（getDay()方法得到星期编号）
var day;
if (datePara.getDay() == 0) day = "星期日 "
if (datePara.getDay() == 1) day = "星期一 "
if (datePara.getDay() == 2) day = "星期二 "
if (datePara.getDay() == 3) day = "星期三 "
if (datePara.getDay() == 4) day = "星期四 "
if (datePara.getDay() == 5) day = "星期五 "
if (datePara.getDay() == 6) day = "星期六 "

//document.getElementById('start').value = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + " " + day;
//setTimeout('formatTime()', 1000);//每一秒中重新加载formatTime()方法
return yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss; //+ " " + day;
}

//服务器现在的时间（这里只是测试，就用浏览器时间代替）
var startTime = '';
//活动截止时间endTime（以服务器时间为标准，即给定的时间）
var end = '';
var endTime = '';
//活动截止时间（以浏览器时间为标准）
var browserEndTime = '';
//距离活动结束还剩余的时间（以浏览器为标准）
var plus = '';

//倒计时
function setTimer() {
if (!plus) {
//服务器现在的时间（这里只是测试，就用浏览器时间代替）
startTime = new Date();
$("#start").val(formatTime(startTime));
//活动截止时间endTime（预先给定的值）
end = document.getElementById("end").value;
endTime = new Date(end);
//活动截止时间与当前时间的时间差
plus = endTime - startTime;
}
else {
//距离活动结束还剩余的时间，第二次以后就不需要再计算，直接自减即可
plus -= 1000;
//更新当前时间(getTime()获取时间转化成毫秒后的数值)
startTime = new Date(startTime.getTime() + 1000);
$("#start").val(formatTime(startTime));
}

var day = parseInt(plus / 1000 / 60 / 60 / 24);
var hour = parseInt(plus / 1000 / 60 / 60) - day * 24;
var minute = parseInt(plus / 1000 / 60) - parseInt(plus / 1000 / 60 / 60) * 60;
var second = parseInt(plus / 1000) - parseInt(plus / 1000 / 60) * 60;

// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
day = checkTime(day);
hour = checkTime(hour);
minute = checkTime(minute);
second = checkTime(second);

document.getElementById("p").innerHTML = "距离活动截止，还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";

if (plus <= 1) {
clearInterval(id);
}
}
//每秒循环一次，刷新活动截止时间与当前时间的时间差
var id = setInterval(setTimer, 1000);
</script>
</body>
</html>

创意随想

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 jquery 倒计时

转发：https://www.cnblogs.com/hellowzl/p/8060251.html&lt;!DOCTYPE html&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; char...
复制链接

扫一扫