<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
h2{
width:50px;
margin:0 auto;
}
div{
width: 300px;
text-align: center;
background: red;
margin:50px auto;
}
</style>
<script type="text/javascript">
window.onload= function () {
getTime();
setInterval(getTime,1000);
function getTime() {
var date = new Date();
var hours = date.getHours();
var one = parseInt(hours / 10);
var two = parseInt(hours % 10);
var minutes = date.getMinutes();
var three = parseInt(minutes / 10);
var four = parseInt(minutes % 10);
var second = date.getSeconds();
var five = parseInt(second / 10);
var six = parseInt(second % 10);
var imgs = document.getElementsByTagName("img");
imgs[0].src = "images/" + one + ".png";
imgs[1].src = "images/" + two + ".png";
imgs[2].src = "images/" + three + ".png";
imgs[3].src = "images/" + four + ".png";
imgs[4].src = "images/" + five + ".png";
imgs[5].src = "images/" + six + ".png";
}
}
</script>
</head>
<body>
<h2>时钟</h2>
<div>
<img src="data:images/0.png">
<img src="data:images/0.png">:
<img src="data:images/0.png">
<img src="data:images/0.png">:
<img src="data:images/0.png">
<img src="data:images/0.png">
</div>
</body>
</html>

js时钟的更多相关文章

  1. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  2. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  3. [转载]FlipClock.js时钟,计数,3D翻转插件

    1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...

  4. FlipClock.js时钟,计数,3D翻转插件

    1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link h ...

  5. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  6. 21个CSS3 / JS 时钟

    收集了21个酷炫的CSS / JS实现的时钟效果https://oktools.net/clocks 预览 :https://clocks.oktools.net/0/ 源码 :https://cod ...

  7. 纯js时钟特效详细代码分析实例教程

    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一 ...

  8. 一个简单的js时钟

    演示地址 代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type=&q ...

  9. js时钟&倒计时

    <!DOCTYPE HTML> <html><head><meta charset=UTF-8><title>recursion</t ...

随机推荐

  1. SharpGL学习笔记(四) 正射投影

    上节谈到投影变换分为透视投影(perspective projection)和正射投影(orthographic projection)两种. 透视投影我们已经介绍过了, 现在谈谈正视投影. 正射投影 ...

  2. 更简单的调试Release版本Optimize code的.NET程序集

    由于JIT的优化在调试Release版本程序集往往没有足够的跟踪信息,比如查看clrstack发现PARAMETERS:= <no data>状态. 在程序运行目录下创建一个[程序集名称] ...

  3. elk单台环境搭建

    一.简介1.核心组成ELK由Elasticsearch.Logstash和Kibana三部分组件组成:Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分 ...

  4. Spark2 Dataset去重、差集、交集

    import org.apache.spark.sql.functions._ // 对整个DataFrame的数据去重 data.distinct() data.dropDuplicates() / ...

  5. MatLab Mark Points 给点标序号

    在MatLab中,我们有时要给画出的点按一定顺序标上序号,下面这个简单的例子实现这个功能: x=rand(,); y=rand(,); plot(x,y,'r*'); text(x+:));

  6. re表达式替换掉"\n\t\r”字符

    使用re来将一些字符替换掉,比如替换为空: import re s = "这是一个例子\n,我们的祖国" re.sub("[\n\t\r]", "&q ...

  7. Oracle体系结构之密码文件管理

    oracle密码文件主要用来控制sysdba和sysoper用户用于远程登录.通常,oracle用户登录database有两种方式,一种是通过本地操作系统验证登录,一种是通过密码文件验证登录. 操作系 ...

  8. linux:查找搜索文件

    学习内容来源: 实验楼链接: https://www.shiyanlou.com/ 与搜索相关的命令常用的有 whereis,which,find 和 locate . whereis 简单快速 $w ...

  9. DDOS hulk,rudy

    HULK (HTTP Unbearable Load King) HULK HULK是另一个DOS攻击工具,这个工具使用UserAgent的伪造,来避免攻击检测,可以通过启动500线程对目标发起高频率 ...

  10. InfluxDB通过HTTP API

    SELECT "value" FROM "online_user_counter" curl -POST http://localhost:8086/query ...