js实现新年倒计时效果


Posted in Javascript onDecember 10, 2015

一年又一年,新年又快到了,最近大家又开始抢回家过年的车票了,我们就来算一算离新年还有多少天,总结总结在即将过去的2015年大家都收获了什么?

本文实例讲述了js实现新年倒计时效果代码。分享给大家供大家参考。具体如下:

运行效果图:

js实现新年倒计时效果

具体代码:

<!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=gb2312" />
<title>JS时间倒计时</title>
<script type="text/javascript">
 
 
var time_now_server,time_now_client,time_end,time_server_client,timerID;
 
//结束时间
time_end=new Date("2015/12/31 09:00:00");
time_end=time_end.getTime();
//开始的时间:如果不填入时间日期默认为当前的日期时间
time_now_server=new Date;
time_now_server=time_now_server.getTime();
 
time_now_client=new Date();
time_now_client=time_now_client.getTime();
 
time_server_client=time_now_server-time_now_client;
 
setTimeout("show_time()",1000);
 
 
//显示时间函数
function show_time()
{
 var timer = document.getElementById("timer");
 if(!timer){
 return ;
 }
 timer.innerHTML =time_server_client;
 
 var time_now,time_distance,str_time;
 var int_day,int_hour,int_minute,int_second;
 var time_now=new Date();
 time_now=time_now.getTime()+time_server_client;
 time_distance=time_end-time_now;
 if(time_distance>0)
 {
 int_day=Math.floor(time_distance/86400000)
 time_distance-=int_day*86400000;
 int_hour=Math.floor(time_distance/3600000)
 time_distance-=int_hour*3600000;
 int_minute=Math.floor(time_distance/60000)
 time_distance-=int_minute*60000;
 int_second=Math.floor(time_distance/1000)
 
 if(int_hour<10){
  int_hour="0"+int_hour;
 }
 if(int_minute<10){
  int_minute="0"+int_minute;
 }
 if(int_second<10){
  int_second="0"+int_second;
 }
 
 str_time=int_day+"天"+int_hour+"小时"+int_minute+"分钟"+int_second+"秒";
 timer.innerHTML=str_time;
 setTimeout("show_time()",1000);
 
 }
 else
 {
 
 timer.innerHTML =timer.innerHTML;
 clearTimeout(timerID)
 window.location.href="http://www.baidu.com";
 }
}
</script>
</head>
 
<body>
<div id="timer" style="font-size:5em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; "></div>
 
<div id="yu" style="font-size:5em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; "></div>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助,大家可以在此基础上进行美化处理。

Javascript 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
javascript canvas API内容整理
Feb 16 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 #Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 #Javascript
jquery特效 点击展示与隐藏全文
Dec 09 #Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
js实现微信分享代码
Oct 11 #Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
常用的Javascript设计模式小结
Dec 09 #Javascript
You might like
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python图像灰度变换及图像数组操作
2016/01/27 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
python实现泊松图像融合
2018/07/26 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python中私有属性的定义方式
2020/03/05 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
法定代表人授权委托书
2014/09/19 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
颐和园导游词400字
2015/01/30 职场文书
获奖感言怎么写
2015/07/31 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书