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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
MooTools 1.2介绍
Sep 14 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
Aug 07 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
node打造微信个人号机器人的方法示例
Apr 26 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桌面中心(三) 修改数据库
2007/03/11 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
jQuery的三种$()
2009/12/30 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
大学生入党思想汇报
2014/01/14 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers