通过js代码制作一个创意数字时钟

通过JS代码实现创意数字时钟效果如下：由数字化的卡通形象图片取代常规的数字显示当前实时北京时间。具体效果示例：

核心重点：

(1)Date方法的初步了解

(2)构建模型，从特殊到一般。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>cnblog头部轮播图</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <style>

        #div1 {

            width: 100%;

            height: auto;

            font-size: 0px;

            text-align:center;

        }

        #div1 img {

            width: 14%;

            max-width:232px;

            height: auto;

            border:2px solid black;

        }

        #div1 .border-left{

            border-left:0px;

        }

        #div1 span {

            width: 1%;

            font-size: 16px;

        }

    </style>

</head>

<body>

    <div id="div1">

        <img src="./clock/0.jpg">

        <img  class='border-left' src="./clock/0.jpg">

        <span>:</span>

        <img src="./clock/0.jpg">

        <img class='border-left'  src="./clock/0.jpg">

        <span>:</span>

        <img src="./clock/0.jpg">

        <img class='border-left'  src="./clock/0.jpg">

    </div>

    <script>
          //对数字进行双数判断，并且转换为字符串。函数很巧妙的应用了JS中的隐式类型转换。
        function toDuble(n) {

            if (n < 10) {

                return "0" + n;

            } else {

                return '' + n;

            }

        }

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            var aImgs = oDiv.getElementsByTagName('img');

            function tick() {

                var oDate = new Date();

                var str = toDuble(oDate.getHours()) + toDuble(oDate.getMinutes()) + toDuble(oDate.getSeconds());

                for (var i = 0; i < aImgs.length; i++) {

                    aImgs[i].src = './clock/' + str.charAt(i) + '.jpg';

                }

            }

            setInterval(tick,1000);

            tick();

        }

    </script>

</body>

</html>

思路：

//当前时间：18：18：30
str='181730'
//需要获取当前时间的时+分+秒
 
 //图片地址设置与对应的str索引值的关系
案例图片

JS制作一个创意数字时钟的更多相关文章

  1. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  2. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  3. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  4. three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...

  5. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

  6. 1000粉！使用Three.js制作一个专属3D奖牌🥇

    背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...

  7. 用JS制作一个信息管理平台

    首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...

  8. 用JS制作一个信息管理平台(1)

    首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...

  9. JS制作一个通用的商城版历史浏览记录

    正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) {    var endst ...

随机推荐

  1. 用java实现二分搜索<算法分析>

    实验目的:1.复习java编程:2.掌握二分搜索技术的基本原理:3.掌握使用java程序进行二分搜索的方法.实验步骤:1.由用户输入5个以上的整数:2.利用二分搜索算法完成对数组的搜索. packag ...

  2. Javascript类型转换的规则全面&附有实例

    Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改变.请看示例: 1 2 3 var n = 10; n = "hel ...

  3. CF-697B Barnicle与691C Exponential notation

    无聊写两个题解吧,上午做比赛拉的,感触很多! B. Barnicle time limit per test 1 second memory limit per test 256 megabytes ...

  4. 第五章、 Linux 常用網路指令

    http://linux.vbird.org/linux_server/0140networkcommand.php     第五章. Linux 常用網路指令 切換解析度為 800x600 最近更新 ...

  5. hdu 2642二维树状数组 单点更新区间查询 模板题

    二维树状数组 单点更新区间查询 模板 从零开始借鉴http://www.2cto.com/kf/201307/227488.html #include<stdio.h> #include& ...

  6. 【NOIP2017练习】怎样学习哲学（计数，DP）

    题意:OI大师抖儿在夺得银牌之后,顺利保送pku.这一天,抖儿问长者:“虽然我已经保送了,但是我还要参加学考.马上就要考政治了,请问应该怎样学习哲学,通过政治考试?”  长者回答:“你啊,Too Yo ...

  7. msp430入门学习13

    msp430的定时器--Timer_B(定时器B)

  8. Core java for impatient 笔记

    类比c++来学习! 1.在java 中变量不持有对象,变量持有的是对象的引用,可以把变量看做c++中的只能指针,自动管理内存 需要手动初始化(否则就是空指针!) 2.final 相当于c++中的con ...

  9. sqlserver2008 存储过程使用表参数

    ----首先,我们定义一个表值参数类型,其实就是一个表变量   Create type dbo.tp_Demo_MultiRowsInsert as Table   (   [PName] [Nvar ...

  10. Spring Cloud体系实现标签路由

    如果你正在使用Spring Cloud体系,在实际使用过程中正遇到以下问题,可以阅读本文章的内容作为后续你解决这些问题的参考,文章内容不保证无错,请务必仔细思考之后再进行实践. 问题: 1,本地连上开 ...