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 相关文章推荐
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
js实现简单的打印表格
Jan 15 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
完美实现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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php绘制一条直线的方法
2015/01/24 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
dojo 之基础篇
2007/03/24 Javascript
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
详解python的ORM中Pony用法
2018/02/09 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
一套SQL笔试题
2016/08/14 面试题
护理专科毕业生自荐书范文
2014/02/19 职场文书
百日安全活动总结
2014/05/04 职场文书
学生鉴定评语大全
2014/05/05 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python