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实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
Vue axios获取token临时令牌封装案例
Sep 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 Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
PHP 万年历实现代码
2012/10/18 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
React Router基础使用
2017/01/17 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python 阶乘累加和的实例
2019/02/01 Python
美国钻石商店:Zales
2016/11/20 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
刚毕业大学生自荐信范文
2014/02/20 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers