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 相关文章推荐
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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 strncasecmp字符串比较的小技巧
2011/01/04 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
wxPython 入门教程
2008/10/07 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
flask框架路由常用定义方式总结
2019/07/23 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
建议书怎么写
2014/03/12 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书