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 相关文章推荐
DIY jquery plugin - tabs标签切换实现代码
Dec 11 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
js运动应用实例解析
Dec 28 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 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
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
使用console进行性能测试
2015/04/27 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
pandas带有重复索引操作方法
2018/06/08 Python
python 获取图片分辨率的方法
2019/01/08 Python
python实现Virginia无密钥解密
2019/03/20 Python
社区志愿者心得体会
2014/01/03 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
我的画教学反思
2014/04/28 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
英文辞职信范文
2015/05/13 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技