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 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 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编实现程动态图像的创建代码
2008/09/28 PHP
php at(@)符号的用法简介
2009/07/11 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
js实现轮播图特效
2020/05/28 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中的装饰器详解
2015/04/13 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python实现的计算器功能示例
2018/04/26 Python
解决Python二维数组赋值问题
2019/11/28 Python
pandas数据拼接的实现示例
2020/04/16 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
辩护意见书
2015/06/04 职场文书