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 相关文章推荐
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
详解如何修改 node_modules 里的文件
May 22 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中的fopen()函数用打开文件模式说明
2013/06/20 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
javascript禁用Tab键脚本实例
2013/11/22 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
javascript实现日历效果
2019/06/17 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python字典的遍历3种方法详解
2019/08/10 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python: 传递列表副本方式
2019/12/19 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
教师校本培训方案
2014/02/26 职场文书
商场周年庆活动方案
2014/08/19 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
爱的承诺书
2015/01/20 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android