js实现的奥运倒计时时钟效果代码


Posted in Javascript onDecember 09, 2015

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

运行效果截图如下:

js实现的奥运倒计时时钟效果代码

具体代码如下:

<html> 
<head> 
 <title>js倒计时</title> 
 <SCRIPT language=JavaScript1.2> 
function setcountdown(theyear,themonth,theday){ 
yr=theyear;mo=themonth;da=theday 
} 
setcountdown(2016,8,5) 
var occasion="2016巴西奥运会" 
var message_on_occasion="盼望已久的时刻终于来到了!" 
var countdownwidth='480px' 
var countdownheight='20px' 
var countdownbgcolor='tan' 
var opentags='<font face="宋体"><small>' 
var closetags='</small></font>' 
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") 
var crosscount='' 
function start_countdown(){ 
if (document.layers) 
document.countdownnsmain.visibility="show" 
else if (document.all||document.getElementById) 
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie 
countdown() 
} 
if (document.all||document.getElementById) 
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>') 
window.onload=start_countdown 
function countdown(){ 
var today=new Date() 
var todayy=today.getYear() 
if (todayy < 1000) 
todayy+=1900 
var todaym=today.getMonth() 
var todayd=today.getDate() 
var todayh=today.getHours() 
var todaymin=today.getMinutes() 
var todaysec=today.getSeconds() 
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec 
futurestring=montharray[mo-1]+" "+da+", "+yr 
dd=Date.parse(futurestring)-Date.parse(todaystring) 
dday=Math.floor(dd/(60*60*1000*24)*1) 
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) 
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) 
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) 
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+message_on_occasion+closetags 
return 
} 
else if (dday<=-1){ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+"时间已经过了!"+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+"Occasion already passed! "+closetags 
return 
} 
else{ 
if (document.layers){ 
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+occasion+closetags) 
document.countdownnsmain.document.countdownnssub.document.close() 
} 
else if (document.all||document.getElementById) 
crosscount.innerHTML=opentags+"还有 "+dday+ " 天, "+dhour+" 小时, "+dmin+" 分, "+dsec+" 秒 就是 "+occasion+closetags 
} 
setTimeout("countdown()",1000) 
} 
</SCRIPT> 
<SCRIPT type="text/javascript" src=""></SCRIPT> 
<SCRIPT language="JavaScript"> 
<!--  
BaiduWriteAD("zouwenyedg","3"); 
//-->  
</SCRIPT> 
</head> 
<body> 
<ILAYER id=countdownnsmain visibility="hide" bgColor="&{countdownbgcolor};"  
height="&{countdownheight};" width="&{countdownwidth};"><LAYER  
id=countdownnssub height="&{countdownheight};"  
width="&{countdownwidth};" top="0" left="0"></LAYER></ILAYER> 
</body> 
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
完美实现bootstrap分页查询
Dec 09 #Javascript
JavaScript脚本库编写的方法
Dec 09 #Javascript
js省市联动效果完整实例代码
Dec 09 #Javascript
JavaScript知识点整理
Dec 09 #Javascript
js实现跨域访问的三种方法
Dec 09 #Javascript
详解js跨域原理以及2种解决方案
Dec 09 #Javascript
深入探讨前端框架react
Dec 09 #Javascript
You might like
PHP中for循环语句的几种变型
2007/03/16 PHP
php实现的ping端口函数实例
2014/11/12 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
javascript的函数作用域
2014/11/12 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
Python过滤列表用法实例分析
2016/04/29 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python中的self用法详解
2019/08/06 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
仓库保管员岗位职责
2013/12/20 职场文书
审计班子对照检查材料
2014/08/27 职场文书
人大代表选举标语
2014/10/07 职场文书
财务审计整改报告
2014/11/06 职场文书
单位计划生育责任书
2015/05/09 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
培训心得体会怎么写
2016/01/25 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL