js实现拍简单倒计时功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现拍简单倒计时功能相关的知识，希望对你有一定的参考价值。
设计的想法是这样的：
一个页面settime.html来实现对到期时间的设置或者多少小时后到期
(一个文本框 一个按钮就可以）
另一个页面 show.html来实现显示还有多长时间到期
我写了一个jstime.js
function JSTime(vYear,vMonth,vDate,vHour,vMinute,vSecond,)
//设置过期日期
var expireDate = new Date(vYear,vMonth-1,vDate,vHour,vMinute,vSecond);
//设置当前日期
var thisTime = new Date();
//总计剩余时间(毫秒)
var remainTime = expireDate-thisTime;
if(remainTime>0)
var remainDay,remainHour,remainMinute,remainSecond;
remainDay = Math.floor(remainTime/1000/3600/24);
remainTime = remainTime - (remainDay*1000*3600*24);
remainHour = Math.floor(remainTime/1000/3600);
remainTime = remainTime - (remainHour*1000*3600);
remainMinute = Math.floor(remainTime/1000/60);
remainTime = remainTime - (remainMinute*1000*60);
remainSecond = Math.floor(remainTime/1000);
remainTime = remainDay+"天"+remainHour+"小时"+remainMinute+"分"+remainSecond+"秒";
document.all["time"].innerHTML =remainTime;
else
document.all["time"].innerHTML ="竞拍结束";
问题是：我不知道怎么能通过settime.html设置expireDate 的值，以及在
show.html的显示时间，
请达人指教~ 问题解决再送50分
以ASP为例吧
settime.asp(或者是HTML中嵌套了ASP)，这里边设置了竞拍时间，然后将这个数值与其他数据地块存入了后台数据库（一般ASP挂的是ACCESS数据库，而ASP。NET挂的是SQL数据库，php挂的mysql数据库，我只是说一般）。
show.asp中从数据库中取出该条记录（或者从其他网页处得到request值），用当前时间相差，就可以显示了！
可以显示竟拍时间等信息的！
起码我想告诉你，纯HTML是实现不了的！ 参考技术A 这是在客户端执行的，效果，，，呵呵…………
有什么具体的事，你在群里细说吧。。。
这个沟通慢。。 参考技术B kusirp21 - 总监 八级,说的已经很明白了。我就不重复了
原生js实现一个简单的倒计时功能
大家好，我是云中君！欢迎大家来观看我的博客
之前那，在群里看到很多人问，关于电商网站中的倒计时功能怎么实现，很多人说在网上找了很多插件，但是不是很会用，所以今天就在这里分享一下我封装的一个小的倒计时功能！
下面是布局代码！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--用的时候把下面这个代码放到你那个放倒计时的盒子里面就好了-->
<span class = "span1" id="time1" data-time="2017/11/19 23:32">
本场剩余：
<!----data-time用来存放你商品到期的时间，时间格式就按照上面格式就好--->
<!--每个span的id要唯一，调用函数的时候就是要传id这一个参数-->
<em></em> 天
<em></em> 小时
<em></em> 分
<em></em> 秒
<!--em标签用来放置我们所要显示的时间--->
</span>
<script type="text/javascript" src="js/js.js"></script>
<!--在这里调用js文件，里面是封装的倒计时的js函数-->
</body>
</html>
怎么样，布局很简单吧！接下来是我们的css代码，本人并没有做太多的设置，大家根据自己的喜好来设置不同的样式，这样都是可以的！
span{font-size:12px;color:#666;}
em{font-style:normal;color:red;font-size:12px;}
/******这里是css，大家可以根据自己的喜好更改到自己的style，笔者只是在这里简单的做了一些设置********/
接下来就是我们的js代码了
function getTime(id){ var timer = null;//这里设置time为null，用于下面来清除计时器 var obj = document.getElementById(id)//获取到放置时间数据的span的id timer = setInterval(function(){//设置定时器，来更新时间 var a = new Date((obj.getAttribute("data-time"))).getTime(); //上面这一步可能比较复杂，我们首先来看obj.getAttribute("data-time")这一句。这个是用来获取指定标签的data-time属性，
即我们要使用的到期时间，然后来看new Date().getTime(),这一句是用来获取我们所设置到期时间的时间戳，用于下面的计算，这个获取的是固定的数值 var b = new Date().getTime();//这是获取当前时间，是一个不固定的数值 var d = 0,s=0,h=0,m=0;//定义变量 var ee = obj.getElementsByTagName("em")//获取布局中的em标签用于存取数据 d = Math.floor((a - b)/1000/60/60/24);//获取剩余天数 h = Math.floor((a - b)/1000/60/60%24);//获取剩余小时 m = Math.floor((a - b)/1000/60%60);//获取剩余分钟 s = Math.floor((a - b)/1000%60);//获取剩余秒数
//中间这块区域是用来判断，当前时间数值小于10的时候给他前面加个0，这里可以根据具体情况可加可不加，以下同理 if(d < 10){ d = "0" + d }else if(d < 0){ d = 0 } if(h < 10){ h = "0" + h }else if(h < 0){ h = 0 } if(m < 10){ m = "0" + m; }else if(m < 0){ m = 0; } if(s < 10){ s = "0" + s; }else if(s < 0){ s = 0; }
ee[0].innerHTML = d; ee[1].innerHTML = h; ee[2].innerHTML = m; ee[3].innerHTML = s; if(a <= b){//当我们的时间到期的时候，清除计时器，然后把当前标签的内容设置为0； clearInterval(timer); ee[0].innerHTML = 00; ee[1].innerHTML = 00; ee[2].innerHTML = 00; ee[3].innerHTML = 00; } },1000) } getTime("time1")//这里用来调用这个函数，传入id
以上是关于js实现拍简单倒计时功能的主要内容，如果未能解决你的问题，请参考以下文章