JS—超酷时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超酷时钟</title>
<style>
*{
    margin:0px;
    padding:0px;
}
body
{
    background:#9FF;
    color:white;
    font-size:50px;
}
#bg
{
    width:100%;
    height:400px;
    background-image:url(image/bg.png);
    background-repeat:no-repeat;
    margin-left:450px;
    margin-top:100px;
}
#bg #tittle
{
    width:220px;
    height:60px;
    padding-left:240px;
    padding-top:40px;
}
#bg #date
{
    width:600px;
    height:50px;
    padding-left:70px;
    margin-top:20px;
}
#bg #watch
{
    width:400px;
    height:60px;
    padding-left:150px;
    margin-top:20px;
}
#bg #day
{
    width:150px;
    height:50px;
    padding-left:280px;
    margin-top:20px;
}
#day #d1
{
    float:left;
}
#day #d2
{
    margin-left:5px;
    float:left;
}
</style>
<script>
function toDou(n)
{
    if (n<10)
        return ‘0‘+n;
    else return ‘‘+n;
}
window.onload=function()
{
    var oWtc=document.getElementById(‘watch‘);
    var aWmg=oWtc.getElementsByTagName(‘img‘);
    function tick1()
    {
        var oDate1=new Date();
        var str1=toDou(oDate1.getHours())+toDou(oDate1.getMinutes())+toDou(oDate1.getSeconds());

        for (var i=0; i<aWmg.length; i++)
        {
            aWmg[i].src=‘image/‘+str1.charAt(i)+‘.png‘;
        }
    }
    setInterval(tick1, 1000);
    tick1();

    var oDte=document.getElementById(‘date‘);
    var aDmg=oDte.getElementsByTagName(‘img‘);
    function tick2()
    {
        var oDate2=new Date();
        var str2=toDou(oDate2.getFullYear())+toDou(oDate2.getMonth()+1)+toDou(oDate2.getDate());
        var k=0;

        for (var i=0; i<aDmg.length; i++)
        {
            if (i==4 || i==7 || i==10) continue;
            aDmg[i].src=‘image/‘+str2.charAt(k++)+‘.png‘;
        }
    }
    setInterval(tick2, 24*60*60*1000);
    tick2();

    var oDay=document.getElementById(‘day‘);
    var aYmg=oDay.getElementsByTagName(‘img‘);

    function tick3()
    {
        var oDate3=new Date();
        var d=oDate3.getDay();

        for (var i=0; i<aYmg.length; i++)
        {
            if (i==0) continue;
            aYmg[i].src=‘image/‘+d+‘.jpg‘;
        }
    }
    setInterval(tick3, 24*60*60*1000);
    tick3();
};
</script>
</head>
<body>
<div id="bg">
<div id="tittle">
<img src="image/title.png"/>
</div>
<div id="date">
<img src="image/2.png"/>
<img src="image/0.png"/>
<img src="image/1.png"/>
<img src="image/5.png"/>
<img src="image/year.png"/>
<img src="image/1.png"/>
<img src="image/2.png"/>
<img src="image/month.png"/>
<img src="image/1.png"/>
<img src="image/3.png"/>
<img src="image/0.jpg"/>
</div>
<div id="watch">
<img src="image/0.png"/>
<img src="image/0.png"/>
:
<img src="image/0.png"/>
<img src="image/0.png"/>
:
<img src="image/0.png"/>
<img src="image/0.png"/>
</div>
<div id="day">
<div id="d1"><img src="image/week.png"/></div>
<div id="d2"><img src="image/0.jpg"/></div>
</div>
</div>
</body>
</html>
时间: 2024-10-10 08:11:48

JS—超酷时钟的相关文章

JavaScript超酷时钟的制作

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jquery+html5制作超酷的圆盘时钟表

自己封装的一个用HTML5+jQuery写的时钟表 代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

AngularJS的五个超酷特性

AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它如何能够让你的web应用更加强大! AugularJS简单介绍 AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式.这种方式利用并且扩展HTML,CSS和javascript,并且弥补了它们的一些非常明显的不足.本应该使用HTML来实现而现在由它开发的动态一些内容.

jQuery超酷下拉插件6种效果演示

原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class="container">                       <section class="main clearfix">                 <select id="cd-dr

超酷的JavaScript叙事性时间轴(Timeline)类库

在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站,而且拥有非常华丽的动画效果和缩略图效果,非常适合做网站的关于我们功能. 主要特性 支持外部社交网站,例如,twitter.com, youtube,flickr,vidmeo,Google Maps 开源免费 文档齐全 使用简单 支持数据格式:JSON,Google Doc,HTML 如何使用 插入

18 款超酷的 HTML5 和 JavaScript 游戏引擎库

现在的游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景.为了节省游戏开发者的时间,让开发者集中精力在游戏的创新上,出现了许许多多的游戏引擎.而现在为了实现跨平台,HTML5 和 JavaScript 成功为了游戏开发者必备的利器,特别是移动端的开发者,必须要能很好的掌握 HTML5 和 JavaScript. 现在这么多的游戏引擎,各有各的优点和缺点,为了帮助开发者们找到属于自己的那款游戏开发引擎,我们综合了许多方面的考虑,选出来以下的 18 个超酷的

一款基于jQuery的超酷动画幻灯片

今天给大家带来一款仿步步高vivo手机网站的一款首页焦点幻灯展示特效,带有超酷炫的动画特效,动态效果丝毫不逊色于flash动画,具有很强的视觉冲击力,推荐下载学习! 提示:兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. 需要引的用js在实例代码中已提供.下面是html代码部分: <div id="vivo-wrap"> <div id="v

16款最佳HTML5超酷动画演示及源码

1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用的HTML5图片选择特效,当图片被选中时,图片上就会覆盖一个半透明的层,上面有一个勾,并且在选中的时候图片出现弹跳的动画效果. 在线演示 源码下载 2.HTML5/CSS3折叠动画登录表单 之前我们分享过一款仿facebook的登录表单,效果的确很赞.今天我们再来分享一款很有特色的CSS3登录表单,

【超酷超实用】CSS3可滑动跳转的分页插件制作教程

原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷,很适合一些个性化的个人网站使用,当然,这款分页插件也适合ajax翻页,效果都挺不错的.先来看看效果图: 怎么样,还挺酷的吧. 当然你也可以在这里查看插件的DEMO演示. 接下来我们来分享一下源码的实现思路,这里用到了jQuery UI框架,这么酷的滑杆是靠它实现的,不然,写的累死.. 首先是HTM