JS实现可调整倒计时间代码分享
这是一款基于javascript实现可调整倒计时间的代码，我们可以手动调整倒计时间，可以精确到“天、时、分、秒”，而且样式布局也很新颖。
先上运行效果图：
效果演示 源码下载
为大家分享的可调整倒计时间的JS代码如下（浏览器中如果不能正常运行，可以尝试切换浏览模式）。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可调整倒计时间的JS代码</title>
<!--[if lte IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('a');
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript">
window.onload=function ()
{
var oFill=document.getElementById('fill_in');
var oInputYear=oFill.getElementsByTagName('input')[0];
var oInputMonth=oFill.getElementsByTagName('input')[1];
var oInputDay=oFill.getElementsByTagName('input')[2];
var oBtn=document.getElementById('go');
var oBtn2=document.getElementById('go2');
var oTxtDay=document.getElementById('day');
var oTxtHour=document.getElementById('hour');
var oTxtMin=document.getElementById('min');
var oTxtSec=document.getElementById('sec');
var oTxtTarget=document.getElementById('target').getElementsByTagName('strong')[0];
var timer=null;
oBtn2.onclick=function ()
{
timer=setInterval(updateTime, 1000);
updateTime();
oTxtTarget.innerHTML=oInputYear.value+"年"+oInputMonth.value+"月"+oInputDay.value+"日";
};
function fillZero(num, digit)
{
var str=''+num;
while(str.length<digit)
{
str='0'+str;
}
return str;
}
function updateTime()
{
var oDateEnd=new Date();
var oDateNow=new Date();
var iRemain=0;
var iDay=0;
var iHour=0;
var iMin=0;
var iSec=0;
oDateEnd.setFullYear(parseInt(oInputYear.value));
oDateEnd.setMonth(parseInt(oInputMonth.value)-1);
oDateEnd.setDate(parseInt(oInputDay.value));
oDateEnd.setHours(0);
oDateEnd.setMinutes(0);
oDateEnd.setSeconds(0);
iRemain=(oDateEnd.getTime()-oDateNow.getTime())/1000;
if(iRemain<=0)
{
clearInterval(timer);
iRemain=0;
alert('已过时间');
}
iDay=parseInt(iRemain/86400);
iRemain%=86400;
iHour=parseInt(iRemain/3600);
iRemain%=3600;
iMin=parseInt(iRemain/60);
iRemain%=60;
iSec=iRemain;
oTxtDay.innerHTML=fillZero(iDay,3);
oTxtHour.innerHTML=fillZero(iHour,2);
oTxtMin.innerHTML=fillZero(iMin,2);
oTxtSec.innerHTML=fillZero(iSec,2);
}
var t=null;
var alpha=0;
var bShow=true;
setInterval(function (){
if(bShow)
{
startMove(100);
}
else
{
startMove(0);
}
bShow=!bShow;
function startMove(iTarget)
{
if(t)clearInterval(t);
t=setInterval(function (){
doMove(iTarget);
}, 30);
}
function doMove(iTarget)
{
var iSpeed=0;
if(alpha<iTarget)
{
iSpeed=2;
}
else
{
iSpeed=-2;
}
if(alpha==iTarget)
{
clearInterval(t);
t=null;
if(iTarget==100)
{
startMove(0);
}
}
else
{
alpha+=iSpeed;
oBtn2.style.filter="alpha(opacity:"+alpha+")";
oBtn2.style.opacity=alpha/100;
}
}
}, 2000);
};
</script>
<body>
<div id="miaov">
<div id="fill_in">
<span class="title">请输入：</span>
<input type="text" class="long_text" value="2015" />
<span class="space1">年</span>
<input type="text" class="text" value="10" />
<span class="space2">月</span>
<input type="text" class="text" value="1" />
<span class="space3">日</span>
</div>
<a href="javascript:;" id="go" class="go"></a>
<a href="javascript:;" id="go2" class="active"></a>
<p id="target">
现在距离 -
<strong>2015年10月1日</strong>
- 还剩：
</p>
<div id="date">
<p id="day">000</p>
<p id="hour">00</p>
<p id="min">00</p>
<p id="sec">00</p>
</div>
</div>
</body>
</html>
以上就是为大家分享的JS实现可调整倒计时间代码，是不是很赞，希望大家可以喜欢。
相关推荐
-
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页
-
JavaScript实现时间倒计时跳转(推荐)
1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
JSP获取服务器时间以倒计时的形式在页面显示
复制代码 代码如下: <%@ page language="java" import="java.util.*"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <%@ include fi
-
javascript时间排序算法实现活动秒杀倒计时效果
制做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页面的dom效果,可是再看了两遍发现可以, 于是我就改了改,实现了,先分享给大家. 页面需求是:从11点到20点 每隔一个小时一场秒杀 如果是当前时间就显示正在秒杀 之前的商品就往最后排 以此类推 类似最开始的11点顺序是 11,12,13,14,15,16,17,18,19,20(点): 到12点的顺序
-
基于javascript显示当前时间以及倒计时功能
自我练习,顺便分享给大家的一段js原生代码. Date 对象用于处理日期和时间. Date() 返回当日的日期和时间. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6). getMonth() 从 Date 对象返回月份 (0 ~ 11). getFullYear() 从 Date 对象以四位数字返回年份. getYear() 请使用 getFullYear() 方法代替. getH
-
js实现网页倒计时、网站已运行时间功能的代码3例
1.jQuery.countdown插件 显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义.目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/例如: 复制代码 代码如下: <div id="getting-started"></div><script src="
-
javascript特效实现——当前时间和倒计时效果的简单实例
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1"></p> 高考倒计时:<p id="p2"></p> 限时抢购:<p id="p3"></p> </body> 主要体会javascript的实现 window.onload=func
-
javascript同步服务器时间和同步倒计时小技巧
之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页
-
JS实现可调整倒计时间代码分享
这是一款基于javascript实现可调整倒计时间的代码,我们可以手动调整倒计时间,可以精确到"天.时.分.秒",而且样式布局也很新颖. 先上运行效果图: 效果演示 源码下载 为大家分享的可调整倒计时间的JS代码如下(浏览器中如果不能正常运行,可以尝试切换浏览模式). <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g
-
基于JS实现限时抢购倒计时间表代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>限时抢购倒计时间表</title> <style type="text/css"> *{margin:0;padding:0;} #cont
-
Java实现JS中的escape和UNescape代码分享
众所周知,JavaScript中escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串.下面,我们就来看看 Java语言中类似JavaScript中的escape() 和unescape() 转码方法,具体代码如下: public class EscapeUnescape { public static String escape(String src) { int i; char j; StringBuffer tmp = new StringBuffer(); tm
-
jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演
-
js精美的幻灯片画集特效代码分享
本文实例讲述了js制作精美的幻灯片画集特效.分享给大家供大家参考.具体如下: 这是一款基于javascript制作的精美幻灯片画集特效的插件,跟其他幻灯片有别的图片画廊.为什么说有所区别呢,因为这款插件的图片切换时包含4个方向的,即上下左右切换也是可以的,大家可以在实例中进行使用. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 本实例的关键代码: var o = { init:
-
js仿黑客帝国字母掉落效果代码分享
看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果"I love you",你可以稍加修改,在情人节,用来对你的恋人表白哦~ 运行效果图: 大家也动手运行一下, ----------------效果演示---------------- 为大家分享js仿黑客帝国字母掉落效果代码如下 <head> <meta htt
-
JS打字效果的动态菜单代码分享
这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的JS打字效果的动态菜单代码如下 <html> <head> <title>JS打字效果的动态菜单</title> <meta http-equiv="imagetoolbar&
-
基于JS实现无缝滚动思路及代码分享
原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图
-
js图片卷帘门导航菜单特效代码分享
本文实例讲述了jQuery超精致图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于js实现图片卷帘门导航菜单特效代码,与以往的导航菜单相比,更具有创新性,不止是简单的向用户展示信息,而是更加丰富网站的整体内容. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/style.css" re
-
js数组方法reduce经典用法代码分享
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要单挑reduce方法,一个原因是我对这个方法掌握不够,不能够用到随心所欲.另一个方面,我也感觉到了这个方法的庞大魅力,在许多的场景中发挥着神奇的作用. 理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. a