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#如何制作的效果超酷的图像. (注: 我之前曾写过类似的文章, 但没有原理说明, 代码注释不够详细, ...
随机推荐
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- 2019-泰迪杯c题数据处理，WGS-84（世界标准地理坐标系） 转为 BD-09（百度地理坐标系）
2019-泰迪杯c题数据处理,WGS-84(世界标准地理坐标系) 转为 BD-09(百度地理坐标系) 本次泰迪杯的数据为经纬度数据,并且题目给的是WGS-84(世界标准地理坐标系)格式的,所有如果调用 ...
- linux系统ansible一键完成三大服务器基础配置（剧本）
ansible自动化管理剧本方式一键完成三大服务器基础配置 环境准备:五台服务器:管理机m01:172.16.1.61,两台web服务器172.16.1.7,172.16.1.8,nfs存储服务器17 ...
- nginx 配置反向代理
之前的前端是8123端口,使用此端口让nginx的反向代理. vim /etc/nginx/conf.d/80-fr.conf upstream cats{ server 127.0.0.1:8123 ...
- gradle project sync failed.please fix your project and try again-Android Studio3.1.2运行出错
原因: 修改了工程中MainActivity.java和app文件夹下的代码后运行不了. 解决办法: 关闭Android Studio,然后再重新启动,它会再次构建gradle.
- 【搬运工】 Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'
登陆mysql的时候,出现了这个问题: Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' ( ...
- 原生JS实现轮播效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- java在window下用cmd （javac、jar）命令行模拟Intellij IDEA软件生成jar包
@@首先最重要的cmd命令: javac ,jar :使用如下(注意[.]不要输错): 1. javac编译: D:\MyWorkSet\idea_hadoop>javac -d .\out\p ...
- P3958 奶酪
传送门 思路: 模拟题.用并查集求出所有 “连通块” ,判断是否有 “连通块” 的最顶上和最下方都不小于奶酪的范围. Code: #include<iostream> #include&l ...
- 在Rancher 1.6上部署Traefik负载均衡器
一.给Traefik主机打标签 01-给即将部署Traefik的主机节点打上标签.jpg 02-主机打完traefik_lb标签后的状态.jpg 二.在Rancher应用商店中部署Traefik 应用 ...