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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
围观tangram js库
Dec 28 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
详解JS数值Number类型
Feb 07 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
vue cli3适配所有端方案的实现
Apr 13 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 var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
Python爬取网易云音乐热门评论
2017/03/31 Python
Python二维码生成识别实例详解
2019/07/16 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
如何启动时不需输入用户名与密码
2014/05/09 面试题
新任教师自我鉴定
2014/02/24 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
母亲节演讲稿
2014/05/27 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
教你如何用Python实现人脸识别(含源代码)
2021/06/23 Python
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js