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插件
Feb 24 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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
十大“创意”战术!
2020/03/04 星际争霸
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
详解JavaScript事件循环机制
2018/09/07 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
师德师风剖析材料
2014/09/30 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
英语辞职信怎么写
2015/02/28 职场文书
惊涛骇浪观后感
2015/06/05 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫