1. <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>超酷数码钟表 - 妙味课堂 - www.miaov.com</title>
  6. <link href="miaov_style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="clock" class="date">
  12.     <h2><img src="data:images/title.png" /></h2>
  13.     <div class="year">
  14.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  15.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  16.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  17.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  18.         <img src="data:images/year.png" alt="year" longdesc="http://www.miaov.com" />
  19.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  20.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  21.         <img src="data:images/month.png" alt="month" longdesc="http://www.miaov.com" />
  22.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  23.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  24.         <img src="data:images/seven.png" alt="seven" longdesc="http://www.miaov.com" />
  25.     </div>
  26.     <div class="time">
  27.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  28.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  29.         <img src="data:images/sign.png" alt="sign" longdesc="http://www.miaov.com" />
  30.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  31.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  32.         <img src="data:images/sign.png" alt="sign" longdesc="http://www.miaov.com" />
  33.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  34.         <img class="num" src="data:images/0.png" alt="0" longdesc="http://www.miaov.com" />
  35.         <img class="pos2" src="data:images/week.png" alt="week" longdesc="http://www.miaov.com" />
  36.         <img class="num2" src="data:images/one.png" alt="one" longdesc="http://www.miaov.com" />
  37.     </div>
  38.     <div class="url" title="妙味课堂-超酷时钟"><a href="http://www.miaov.com/"><img src="data:images/miaov.png" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></div>
  39. </div>
  40. <script type="text/javascript">
  41.  (function(){
  42.     var num = document.querySelectorAll('.num');
  43.     var num2 = document.querySelector('.num2');
  44.     var weekImg = [
  45.         "images/seven.png",
  46.         "images/one.png",
  47.         "images/two.png",
  48.         "images/three.png",
  49.         "images/four.png",
  50.         "images/five.png",
  51.         "images/six.png"
  52.     ];
  53.     toDate();
  54.     setInterval(toDate,1000);
  55.     function toDate(){
  56.         var date = new Date();
  57.         var year = date.getFullYear();
  58.         var month = toDB(date.getMonth() + 1);
  59.         var day = toDB(date.getDate());
  60.         var hours = toDB(date.getHours());
  61.         var minutes = toDB(date.getMinutes());
  62.         var seconds = toDB(date.getSeconds());
  63.         var week = date.getDay();
  64.         var time = year + month + day + hours + minutes + seconds;
  65.         for(var i = 0; i < num.length; i++){
  66.             num[i].src = "images/"+time[i]+".png";
  67.         }
  68.         num2.src = weekImg[week];
  69.     }
  70.  })();
  71.  function toDB(nub){
  72.     if(nub < 10){
  73.         return "0" + nub;
  74.     }
  75.     return "" + nub;
  76. }
  77. </script>
  78. </body>
  79. </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. 0x14哈希之兔子兔子

    参考链接:https://www.cnblogs.com/wyboooo/p/9813428.html 题目链接:https://www.acwing.com/problem/content/140/ ...

  2. 通过KSoap三方插件解析WebService接口方法

    话不多说,正文如下: 1.在lib中放入ksoap2的jar包并导入 2.在xml 配置文件中加入: <!-- 访问网络的权限 --> <uses-permission androi ...

  3. Oracle插入语句日期格式设置

    insert into test values (1,'2015-01-01'); 直接设置成字符串,会报出“文字与格式字符串不匹配”的异常: 如果正确插入,则要将字符型数据转成日期型数据: 1 in ...

  4. SpringBoot服务器部署

    注释本地tomcat jar包 jdk版本必须1.8以上 tomcat版本必须8以上 配置tomcat server.xml文件 Swagger 配置

  5. L1,L2正则化代码

    # L1正则 import numpy as np from sklearn.linear_model import Lasso from sklearn.linear_model import SG ...

  6. Easy to Remember Color Guide for Non-Designers

    Notes: I'm not a designer. This is what i've self-learnt over the years because i couldn't afford go ...

  7. windows cannot find powershell.exe windows 7

    This can happen when the environment variables are missing an entry for Powershell. $env:path must i ...

  8. wireshark基础学习—第三部分wireshark的过滤器语法

    我们都知道,wireshark可以实现本地抓包,同时Wireshark也支持remote packet capture protocol(rpcapd)协议远程抓包,只要在远程主机上安装相应的rpca ...

  9. oracle基本查询

  10. acm：屁屁上的巴掌

    涉及算法:深度搜索 题目: 题目描述 小新是个调皮的孩子,他总是会把衣服搞脏,他的妈妈美伢非常的生气,于是在<和妈妈的约定条款>加上了第三百七十七条:小新衣服上每有一块污渍妈妈就会打小新的 ...