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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
js实现星星打分效果
Jul 05 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php 伪静态之IIS篇
2014/06/02 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
js实现拖拽功能
2017/03/01 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
使用python Django做网页
2013/11/04 Python
Python中subprocess模块用法实例详解
2015/05/20 Python
详解Python文本操作相关模块
2017/06/22 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python列表list排列组合操作示例
2018/12/18 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
节能环保演讲稿
2014/08/28 职场文书
法人委托书范本格式
2014/09/15 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS