<!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. Bugku-CTF之welcome to bugkuctf(php://filter和php://input的妙用)

    Day24 welcome to bugkuctf http://123.206.87.240:8006/test1/ 本题要点:代码审计,PHP://filter ,  php://input ,  ...

  2. Bigger-Mai 养成计划,Python基础巩固一

    本日复习内容 Py2与Py3的区别:Py2:print()直接写字符串,不用加括号Py3:print()必须加括号,某些库改名了.还有谁不支持Py3:Twisted:具体能感知的大改动并不多 老生常谈 ...

  3. 给GRUB添加新的项目

    安装了win10,然后又安装了manjaro,最后又安装了Ubuntu.开机默认就是进入的Ubuntu的grub,然而我比较喜欢manjaro的grub主题.在bios中设置manjaro的引导为默认 ...

  4. mui中confirm在苹果出现bug,confirm点击确定跳转页面再返回后,页面被遮罩盖住无法使用

    项目中使用confirm mui.confirm('您还未抽奖,现在去抽奖吗?', function (res) { if (res.index === 1) { window.location.hr ...

  5. Ubuntu 下将 svg 图片转换为其他格式 (如 png)

    参考 How to Convert SVG Files to other Image Formats on Ubuntu 12.04/11.10 Ubuntu 下将 svg 图片转换为其他格式 (如 ...

  6. VBoxManage安装

    扩展包的版本需要与VirtualBox的版本一致,通过帮助可以查看VirtualBox的版本信息,然后在http://download.virtualbox.org/virtualbox/寻找对应的版 ...

  7. Spring定时任务@Scheduled注解使用方式

    1.开篇 spring的@Scheduled定时任务相信大家都是十分熟悉.最近在使用过程中发现了一些问题,写篇文章,和大家分享一下.结论在最后,不想看冗长过程的小伙伴可以直接拉到最后看结论. 2.简单 ...

  8. 两两交换链表中的节点(java实现)

    题目: 给定一个链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例: 给定 1->2->3->4, 你应该返回 ...

  9. 实用的shell脚本面试题和答案

    1. 写一个shell脚本来得到当前的日期,时间,用户名和当前工作目录. 答案 : 输出用户名,当前日期和时间,以及当前工作目录的命令就是logname,date,who i am和pwd. 现在,创 ...

  10. CMD命令:不是内部或者外部命令也不是可运行的程序或批处理文件

    [本文转自:https://blog.csdn.net/l_mloveforever/article/details/79513681] 前言:   相信有很多小伙伴都比较喜欢使用Command命令来 ...