<!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-Type" content="text/html; charset=utf-8" />

<title>超酷数码钟表 - 妙味课堂 - www.miaov.com</title>

<link href="miaov_style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="clock" class="date">

    <h2><img src="data:images/title.png" /></h2>

    <div class="year">

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img src="data:images/year.png" alt="year" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img src="data:images/month.png" alt="month" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img src="data:images/seven.png" alt="seven" longdesc="http://www.miaov.com" />

    </div>

    <div class="time">

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img src="data:images/sign.png" alt="sign" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img src="data:images/sign.png" alt="sign" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />

        <img class="pos2" src="data:images/week.png" alt="week" longdesc="http://www.miaov.com" />

        <img class="num2" src="data:images/one.png" alt="one" longdesc="http://www.miaov.com" />

    </div>

    <div class="url" title="妙味课堂-超酷时钟"><a href="http://www.miaov.com/"><img src="data:images/miaov.png" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></div>

</div>

<script type="text/javascript">

 (function(){

    var num = document.querySelectorAll('.num');

    var num2 = document.querySelector('.num2');

    var weekImg = [

        "images/seven.png",

        "images/one.png",

        "images/two.png",

        "images/three.png",

        "images/four.png",

        "images/five.png",

        "images/six.png"

    ];

    toDate();

    setInterval(toDate,1000);

    function toDate(){

        var date = new Date();

        var year = date.getFullYear();

        var month = toDB(date.getMonth() + 1);

        var day = toDB(date.getDate());

        var hours = toDB(date.getHours());

        var minutes = toDB(date.getMinutes());

        var seconds = toDB(date.getSeconds());

        var week = date.getDay();

        var time = year + month + day + hours + minutes + seconds;

        for(var i = 0; i < num.length; i++){

            num[i].src = "images/"+time[i]+".png";

        }

        num2.src = weekImg[week];

    }

 })();

 function toDB(nub){

    if(nub < 10){

        return "0" + nub;

    }

    return "" + nub;

}

</script>

</body>

</html>

JavaScript超酷时钟的制作的更多相关文章

  1. JS超酷时钟的制作

    通过补充代码,实现时钟实时显示当前时间:年.月.日.时.分.秒.日期. <!DOCTYPE html> <html> <head lang="zh-CN&quo ...

  2. 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 ...

  3. 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

    360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...

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

    原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...

  5. 超酷的实时颜色数据跟踪javascript类库 - Tracking.js

    来源:GBin1.com 今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据. 这些数据包括了颜色或者是人, 这 ...

  6. 8款超酷的HTML5 3D图片动画源码

    1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

  7. 9款HTML5实现的超酷特效

    之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...

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

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  9. C#完成超酷的图像效果 (附demo)

    如果您觉得C#制作的艺术字比较好玩, 但是还觉得没看够,不过瘾,那么我今天就让您一饱眼福, 看看C#如何制作的效果超酷的图像. (注: 我之前曾写过类似的文章, 但没有原理说明, 代码注释不够详细, ...

随机推荐

  1. sqflite插件简单使用 key======================

    https://blog.csdn.net/weixin_34183910/article/details/86029912 https://blog.csdn.net/u013255127/arti ...

  2. oracle网络服务之beq协议和SDU优化（性能提升可达30%）

    oracle网络服务之beq协议和SDU优化(性能提升可达30%) 12.3.1  BEQ协议 如果Oracle数据库服务端和客户端在同一台机器上,可以使用BEQ连接,BEQ连接采用进程间直接通信,不 ...

  3. Windows环境下最新OpenCV和Contribute代码的联合编译【20180926更新红字】

    解决这个问题,目的在于获得并使用最新的完全版本的代码,主要方法是对CMake能够熟练使用,并且对编译等基础支持有所了解. 因为这篇博客经过多次修改,所以里面的内容和配图可能有不是完全比对的地方,但是只 ...

  4. topcoder srm 640 div1

    problem1 link 首先使用两个端点颜色不同的边进行连通.答案是$n-1-m$.其中$m$是联通分量的个数. problem2 link 首先构造一个最小割的模型.左边的$n_{1}$个点与源 ...

  5. Docker Swarm Mode 学习笔记 （基本概念）

    ​ Swarm 是使用 SwarmKit 构建的 Docker 引擎内置(原生)的集群管理和编排工具 节点 ​ 运行 Docker 的主机可以主动初始化一个 Swarm 集群 docker swarm ...

  6. bzoj1452 [JSOI2009]Count ——二维树状数组

    中文题面,给你一个矩阵,每一个格子有数字,有两种操作. 1. 把i行j列的值更改 2. 询问两个角坐标分别为(x1,y1) (x2,y2)的矩形内有几个值为z的点. 这一题的特点就是给出的z的数据范围 ...

  7. pycharm的pip安装问题，需要确认适合IDE的pip版本

    python 报错     AttributeError: module 'importlib._bootstrap' has no attribute 'SourceFileLoader' 解决方法 ...

  8. VC++调试错误的解决方案

    这篇文章主要用来记录使用Visual Studio过程中,出现的各种error,并提供自己当时解决的方案.但是,一个error可能由不用原因引起的,文中案例仅供大家参考. nafxcwd.lib(th ...

  9. “妄”眼欲穿之CSS 居中问题

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习,特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财富,中华 ...

  10. Phpstorm数组对齐设置

    进入 Editor > Code Style > PHP > Wrapping and Braces , 勾选 Align consecutive assignments 和 Ali ...