js实现倒计时 需要精确到秒 在datetime中的时分秒不加能正常显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现倒计时 需要精确到秒 在datetime中的时分秒不加能正常显示相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<time datetime="2014-11-28"></time><br>
<time datetime="2014-11-28 00:00:00"></time><br>
<time datetime="2014-11-28,00,00,00"></time><br>
<time datetime="2014-11-28,11:00:00"></time><br>
</body>
</html>
<script>
var time=document.getElementsByTagName('time');
now=new Date();
alert(now);
function addtime (y)
setInterval(
function ()
var s0=1000,m0=s0*60,h0=m0*60,d0=h0*24,now=new Date(),t;
t=Date.parse(y.getAttribute('datetime'))-Date.UTC((now.getYear()+1900),(now.getMonth()),now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds());
if(t<0)y.innerHTML= '已经开始了'else
var d=Math.floor(t/d0), h=Math.floor((t-d*d0)/h0), m=Math.floor((t-d*d0-h*h0)/m0), s=Math.floor((t-d*d0-h*h0-m*m0)/s0);
y.innerHTML= '还剩'+('0'+d).substr(-2)+'天'+('0'+h).substr(-2)+'时'+('0'+m).substr(-2)+'分'+('0'+s).substr(-2)+'秒';
,1000);
for (var i = 0; i < time.length; i++)
addtime(time[i])
</script>
要求更改代码使datetime中的时间精确到秒，能正常显示。
其实加一个判断就行了，这是因为时区差的原因。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<time datetime="2014-11-28"></time><br>
<time datetime="2014-11-28 00:00:00"></time><br>
<time datetime="2014-11-28,00,00,00"></time><br>
<time datetime="2014-11-28,11:00:00"></time><br>
</body>
</html>
<script>
var time=document.getElementsByTagName('time');
now=new Date();
//alert(now);
function addtime (y)
setInterval(
function ()
var s0=1000,m0=s0*60,h0=m0*60,d0=h0*24,now=new Date(),t,dt=y.getAttribute('datetime');
t=Date.parse(dt)-now+(/:/.test(dt)?0:now.getTimezoneOffset()*60000);
if(t<0)y.innerHTML= '已经开始了'else
var d=Math.floor(t/d0), h=Math.floor((t-d*d0)/h0), m=Math.floor((t-d*d0-h*h0)/m0), s=Math.floor((t-d*d0-h*h0-m*m0)/s0);
y.innerHTML= '还剩'+('0'+d).substr(-2)+'天'+('0'+h).substr(-2)+'时'+('0'+m).substr(-2)+'分'+('0'+s).substr(-2)+'秒';
,1000);
for (var i = 0; i < time.length; i++)
addtime(time[i])
</script>追问
火狐上第二个 第四个还是无法显示 主要为了在火狐显示的
参考技术A <html><head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>倒计时测试</title>
</head>
<body>
<SCRIPT type="text/javascript">
<!--
var target=[]
var time_id=[]
function show()
setTimeout("show()", 1000);
for (var i=0,j=target.length;i<j;i++) //可以扩展为多个倒计时应用
today=new Date();
timeold=target[i]-today.getTime(); //当前时间和倒计时时间之间的毫秒差
sectimeold=timeold/1000; //将毫秒差转换为秒
secondsold=Math.floor(sectimeold); //取整秒数
msPerDay=24*60*60*1000; //定义一天有多少秒
e_daysold=timeold/msPerDay; //将秒转换为天
daysold=Math.floor(e_daysold); //取整天数
e_hrsold=(e_daysold-daysold)*24; //取不足一天的时间转换为小时数
hrsold=Math.floor(e_hrsold); //取整数（小时）
e_minsold=(e_hrsold-hrsold)*60; //取不足一小时的时间转换为分
minsold=Math.floor(e_minsold); //取整数（分）
e_secoold=(e_minsold-minsold)*60;//取不足一小时的时间转换为秒
seconds=Math.floor(e_secoold); //取整数（秒）
if (daysold<0)
document.getElementByIdx_x_x(time_id[i]).innerHTML="<font color=red>正在抽奖中……</font>";
else
if (daysold<10) daysold="0"+daysold
//if (daysold<100) daysold="0"+daysold
if (hrsold<10) hrsold="0"+hrsold
if (minsold<10) minsold="0"+minsold
if (seconds<10) seconds="0"+seconds
if (daysold<3)
document.getElementByIdx_x_x(time_id[i]).innerHTML="<font color=red>"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>";
else
document.getElementByIdx_x_x(time_id[i]).innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout("show()", 1);
//-->
</SCRIPT>
距抽奖还有：
<div id="ti" style="border:1px solid black;margin:5px;padding:2px;width:180px"></div>
<SCRIPT>
//设定目标时间(数组元素)
//target[target.length]=new Date(年,月-1,日,时,分,秒).getTime()
target[target.length]=new Date(2010,8,21,12,00,00).getTime();
//设定倒计时显示地址(数组元素)
time_id[time_id.length]="ti"
</SCRIPT>
</body>
</html> 参考技术B <!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>倒计时</title>
<style type= "text/css">
.daojishi h2
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
margin-bottom:5px;
color:#151515;
.daojishi #timer
font-family:Helvetica, Microsoft YaHei, Arial, sans-serif;
font-size:14px;
color:#151515;
font-weight:bold;
</style>
<script type="text/javascript">
function timer()
var ts = (new Date(2014, 11, 1, 9, 0, 0)) - (new Date());//倒计时停止时间（目标时间，月份因为从0开始，所以月份需要+1，11月实则是12月）
console.log(ts);
var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
setInterval(timer,1000);
</script>
</head>
<body onload = "timer()">
<div class = "daojishi">
<h2>剩余时间为：</h2>
<div id = "timer">
</div>
</div>
</body>
</html> 参考技术C 倒计时，无非就是设定一个数值进行减法，settimeout（“”，1000），设定时间间隔1秒，倒计时的话，只要一次递减，用一个for循环也好，或者while也好；
如果想用系统时间，先获取 Date（）；然后给予一个变量赋值Date（）；再将时间进行倒叙减数字，需要换算成秒，然后转换成时间格式，就会倒计时，不过很别扭，还是建议用设定时间的那种，因为要方便些，而且合乎常理。 参考技术D 问题问的语句都不通顺。。。。不能正常显示是显示的什么？还是什么都没有显示？还是显示不到秒？。。。
vue基于vant封装可精确到秒的时间选择器
前言
在移动开发中，时间选择的控件比比皆是，但却鲜有类似的组件可以精确到秒级别的，官方可能是考虑到小屏幕手机的显示问题，也可能是使用的场景寥寥无几，但是少不代表没有，所以最近花了点时间基于 vant 组件库封装了一个可以精确到秒级别的时间选择器。
实现思路
本章我们主要用到了 vant 组件库中的 Popup 弹出层组件搭配 DatetimePicker 组件进行时间选择。通过 props 和 emit 进行组件之间的通信。其实 vant 已经封装好一系列的代码了，我们需要修改的是自定义年月日时分秒的时间数据并将其添加到绑定的数组中即可。话不多说，下面直接看代码的实例。
封装文件
文件目录：src/components/timePicker
<template>
<div>
<!-- 弹出层 -->
<van-popup get-container="body" v-model="isPicker" position="bottom" @close="confirmOn">
<!-- 时间选择 -->
<van-picker ref="picker" show-toolbar title="请选择时间" :columns="columns" @change="onChange" @cancel="cancelOn" @confirm="onConfirm" />
</van-popup>
</div>
</template>
<script>
export default
name: "popup",
props: ["showPicker", "values"],
data()
return
isPicker: false, //是否显示弹出层
columns: [], //所有时间
Mdays: "", //弹窗关闭时月份所在值
Dindex: null,
;
,
watch:
isPicker(val)
!val && this.$emit("changeValue");
this.columns = [];
this.getcolumns();
,
showPicker(val)
this.isPicker = val;
,
values(val)
if (val == "")
this.Mdays = "";
this.Dindex = null;
,
,
methods:
getCountDays(year, month)
//获取某年某月多少天
var day = new Date(year, month, 0);
return day.getDate();
,
getcolumns()
var strtime = this.values;
var date = new Date(strtime.replace(/-/g, "/"));
var vmoduletime = date.getTime();
if (this.values != "")
var vmoduledate = new Date(vmoduletime);
else
var vmoduledate = new Date(); //没有传入时间则默认当前时刻
var Y = vmoduledate.getFullYear();
var M = vmoduledate.getMonth();
var D = vmoduledate.getDate();
var h = vmoduledate.getHours();
var m = vmoduledate.getMinutes();
var s = vmoduledate.getSeconds();
var year = ; //获取前后十年数组
year.values = [];
var Currentday = new Date().getFullYear();
for (var i = Currentday - 10; i < Currentday + 10; i++)
year.values.push(i + "年");
year.defaultIndex = year.values.indexOf(Y + "年"); //设置默认选项当前年
this.columns.push(year);
var month = ; //获取12月数组
month.defaultIndex = M;
month.values = Object.keys(Array.apply(null, length: 13 )).map(
function (item)
if (+item + 1 <= 10)
return "0" + item + "月";
else if (+item + 1 == 11)
return +item + "月";
else
return (+item + 0).toString() + "月";
);
month.values.splice(0, 1);
this.columns.push(month);
//获取当月的天数
var days = this.getCountDays(Y, this.Mdays == "" ? M + 1 : this.Mdays);
var day = ; //创建当月天数数组
day.defaultIndex = this.Dindex == null ? D - 1 : this.Dindex;
day.values = Object.keys(Array.apply(null, length: days + 1 )).map(
function (item)
if (+item + 1 <= 10)
return "0" + item + "日";
else if (+item + 1 == 11)
return +item + "日";
else
return (+item + 0).toString() + "日";
);
day.values.splice(0, 1);
this.columns.push(day);
var hour = ; //创建小时数组
hour.defaultIndex = h;
hour.values = Object.keys(Array.apply(null, length: 24 )).map(
function (item)
if (+item + 1 <= 10)
return "0" + item + "时";
else if (+item + 1 == 11)
return +item + "时";
else
return (+item + 0).toString() + "时";
);
this.columns.push(hour);
var mi = ; //创建分钟数组
mi.defaultIndex = m;
mi.values = Object.keys(Array.apply(null, length: 60 )).map(function (
item
)
if (+item + 1 <= 10)
return "0" + item + "分";
else if (+item + 1 == 11)
return +item + "分";
else
return (+item + 0).toString() + "分";
);
this.columns.push(mi);
var ss = ; //创建秒数数组
ss.defaultIndex = s;
ss.values = Object.keys(Array.apply(null, length: 60 )).map(function (
item
)
if (+item + 1 <= 10)
return "0" + item + "秒";
else if (+item + 1 == 11)
return +item + "秒";
else
return (+item + 0).toString() + "秒";
);
this.columns.push(ss);
,
onChange(values, a)
//a为所有列备选项值的数组
var days = this.getCountDays(a[0].substr(0, 4), a[1].substr(0, 2));
var newdays = ;
newdays.values = Object.keys(Array.apply(null, length: days + 1 )).map(
function (item)
if (+item + 1 <= 10)
return "0" + item + "日";
else if (+item + 1 == 11)
return +item + "日";
else
return (+item + 0).toString() + "日";
);
newdays.values.splice(0, 1);
this.$refs.picker.setColumnValues(2, newdays.values); //设置第三列的值
this.$refs.picker.setColumnIndex(2, a[2].substr(0, 2) - 1); //设置第三列索引
,
// 关闭弹框
confirmOn()
var currentM = this.$refs.picker.getColumnValue(1);
this.Mdays = currentM.substr(0, 2);
this.Dindex = this.$refs.picker.getColumnIndex(2);
,
//时间选择器关闭
cancelOn()
this.$emit("changeValue");
,
// 时间选择器确定
onConfirm(val, index)
var endval =
val[0].substr(0, 4) +
"-" +
val[1].substr(0, 2) +
"-" +
val[2].substr(0, 2) +
" " +
val[3].substr(0, 2) +
":" +
val[4].substr(0, 2) +
":" +
val[5].substr(0, 2);
this.$emit("changeValue", endval);
this.$emit("confirm", endval);
,
,
;
</script>
使用组件
<template>
<div>
<div @click="revealOn">点击选择时间</div>
<timePicker :values="timeVal" @changeValue="timePickerShow = false" ref="popup" :showPicker="timePickerShow" @confirm="confirmOn" />
</div>
</template>
<script>
import timePicker from "@/components/timePicker";
export default
components:
timePicker,
,
data()
return
timeVal: "", //选中时间的值
timePickerShow: false, //打开/关闭时间选择器
;
,
methods:
// 点击选择时间
revealOn()
this.timePickerShow = true;
,
// 时间选择器确定
confirmOn(val)
console.log(val);
,
,
;
</script>
实现效果
以上是关于js实现倒计时 需要精确到秒 在datetime中的时分秒不加能正常显示的主要内容，如果未能解决你的问题，请参考以下文章