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-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超酷时钟的制作的更多相关文章
- JS超酷时钟的制作
通过补充代码,实现时钟实时显示当前时间:年.月.日.时.分.秒.日期. <!DOCTYPE html> <html> <head lang="zh-CN&quo ...
- 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 ...
- 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...
- 【超酷超实用】CSS3可滑动跳转的分页插件制作教程
原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...
- 超酷的实时颜色数据跟踪javascript类库 - Tracking.js
来源:GBin1.com 今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据. 这些数据包括了颜色或者是人, 这 ...
- 8款超酷的HTML5 3D图片动画源码
1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...
- 9款HTML5实现的超酷特效
之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...
- jQuery超酷下拉插件6种效果演示
原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...
- C#完成超酷的图像效果 (附demo)
如果您觉得C#制作的艺术字比较好玩, 但是还觉得没看够,不过瘾,那么我今天就让您一饱眼福, 看看C#如何制作的效果超酷的图像. (注: 我之前曾写过类似的文章, 但没有原理说明, 代码注释不够详细, ...
随机推荐
- 自动化工具-ansible服务部署与使用
1.前言 1.1ansible软件介绍 python 语言是运维人员必须会的语言 ansible 是一个基于python 开发的自动化运维工具 其功能实现基于ssh远程连接服务 ansible 可以实 ...
- node全局安装说明（create-react-app、）
1.使用 create-react-app 快速构建 React 开发环境 国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: $ np ...
- 将markdown文档使用gulp转换为HTML【附带两套css样式】
将markdown文档使用gulp转换为HTML[附带两套css样式] 今天遇到一个需求,即将Markdown文档转为为HTML在网页展示,身为一名程序员,能用代码解决的问题,手动打一遍无疑是可耻的. ...
- python学习之旅（入门）
一.list 有序集合 1.list 有序集合 L = [95.5, 85, 59] 如L[1] = 85 ,L[-1] = 59 和php中array一个意思 用[] 表示就可以了 2.新增 ...
- CSRF、XSS、clickjacking、SQL 的攻击与防御
CSRF攻击 原理: 跨站请求伪造.是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法. 网站通过cookie来实现登录功能.而cookie只要存在浏览器中,那么浏览器在访问含有这 ...
- yii 邮箱封装
<?php class Mailer { private static $obj; private static $config; public static function getMaile ...
- Linux下“/”和“~”的区别
在linux中,”/“代表根目录,”~“是代表目录.Linux存储是以挂载的方式,相当于是树状的,源头就是”/“,也就是根目录. 而每个用户都有”家“目录,也就是用户的个人目录,比如root用户的”家 ...
- mysql查询表是否存在
查询表是否存在 SHOW TABLES LIKE "表名" tp5查询表是否存在 Db::query('SHOW TABLES LIKE "表名"');
- 动态修改JS对象的值及React setState
一.在JS里使用(非ES6) 实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量 const fruit = ['apple', 'banana', 'orange'] let fruit ...
- 进程部分（IPC机制及生产者消费者模型）和线程部分
进程部分 一:进程间通信IPC机制:由于进程之间的内存空间是相互隔离的,所以为了进程间的通信需要一个共享的内存空间, 但是共享带来的问题是数据在写的时候就不安全了,所以需要一种机制既有能共享的内存 空 ...