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 相关文章推荐
一个JavaScript变量声明的知识点
Oct 28 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
Python可变参数函数用法实例
2015/07/07 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
美国批发供应商:Kole Imports
2019/04/10 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
Java程序员面试题
2016/09/27 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
中学生校园广播稿
2014/01/16 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
离职证明范本
2015/06/12 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python