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 autocomplete自动完成插件的的使用方法
Aug 07 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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中去掉字符串首尾空格的方法
2012/05/19 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
解决laravel session失效的问题
2019/10/14 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
深入学习Python中的装饰器使用
2016/06/20 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python中文件的读取和写入操作
2018/04/27 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
linux环境下Django的安装配置详解
2019/07/22 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
房产转让协议书
2014/04/11 职场文书
无私奉献演讲稿
2014/09/04 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python