通过补充代码，实现时钟实时显示当前时间：年、月、日、时、分、秒、日期。

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

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

    <title>超酷时钟的制作</title>

    <style>

        .container {

            text-align: center;

            font-size: 28px;

            color: #ccc;

            background-color: #ccc;

            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;

        }

        .container span{

            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

        }

    </style>

</head>

<body>

    <div class="container">

        <p>超酷时钟</p>

        <p><span class='year'>2012</span>年<span class='month'>09</span>月<span class='date'>02</span>日</p>

        <p><span class='hours'>08</span>：<span class='minutes'>08</span>：<span class='seconds'>08</span>星期<span

                class='day'>日</span></p>

    </div>

    <script type="text/javascript">

  //补充代码

    </script>

</body>

</html>

参考答案：

<!DOCTYPE html>

<html>

<head lang="zh-CN">

    <meta charset="UTF-8">

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

    <title>数码时钟</title>

    <style>

        .container {

            text-align: center;

            font-size: 28px;

            color: #ccc;

            background-color: #ccc;

            text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;

        }

        .container span {

            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

        }

    </style>

</head>

<body>

    <div class="container">

        <p>超酷时钟</p>

        <p><span class='year'>2012</span>年<span class='month'>09</span>月<span class='date'>02</span>日</p>

        <p><span class='hours'>08</span>：<span class='minutes'>08</span>：<span class='seconds'>08</span>星期<span

                class='day'>日</span></p>

    </div>

    <script type="text/javascript">

        window.onload = function () {

            function byClass(arg) {

                return typeof (arg) === 'string' ? document.getElementsByClassName(arg)[0] : arg;

            }

            var oYear = byClass('year');

            var oMonth = byClass('month');

            var oDate = byClass('date');

            var oHour = byClass('hours');

            var oMinute = byClass('minutes');

            var oSecond = byClass('seconds');

            var oDay = byClass('day');

            function toDuble(n) {

                if (n < 10) {

                    return '0' + n;

                } else {

                    return n;

                }

            }

            function getTime(arg) {

                var time = null;

                var oDate = new Date();

                switch (arg) {

                    case 'year':

                        time = oDate.getFullYear();

                        break;

                    case 'month':

                        time = toDuble(oDate.getMonth() + 1);

                        break;

                    case 'date':

                        time = toDuble(oDate.getDate());

                        break;

                    case 'hours':

                        time = toDuble(oDate.getHours());

                        break;

                    case 'minutes':

                        time = toDuble(oDate.getMinutes());

                        break;

                    case 'seconds':

                        time = toDuble(oDate.getSeconds());

                        break;

                    case 'day':

                        time = daySwith(oDate.getDay());

                        break;

                }

                return time;

            }

            function daySwith(arg) {

                var day = null;

                switch (arg) {

                    case 0:

                        day = '日';

                        break;

                    case 1:

                        day = '一';

                        break;

                    case 2:

                        day = '二';

                        break;

                    case 3:

                        day = '三';

                        break;

                    case 4:

                        day = '四';

                        break;

                    case 5:

                        day = '五';

                        break;

                    case 6:

                        day = '六';

                        break;

                    default:

                        day = "出现bug";

                }

                return day;

            }

            function switchContent() {

                oYear.innerHTML = getTime('year');

                oMonth.innerHTML = getTime('month');

                oDate.innerHTML = getTime('date');

                oHour.innerHTML = getTime('hours');

                oMinute.innerHTML = getTime('minutes');

                oSecond.innerHTML = getTime('seconds');

                oDay.innerHTML = getTime('day');

            }

            setInterval(switchContent, 1000);

            switchContent();

        }

    </script>

</body>

</html>

JS超酷时钟的制作的更多相关文章

  1. JavaScript超酷时钟的制作

    <!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  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. 【超酷超实用】CSS3可滑动跳转的分页插件制作教程

    原文:[超酷超实用]CSS3可滑动跳转的分页插件制作教程 今天我要向大家分享一款很特别的CSS3分页插件,这款分页插件不仅可以点击分页按钮来实现分页,而且可以滑动滑杆来实现任意页面的跳转,看看都非常酷 ...

  4. 拜托，使用Three.js让二维图片具有3D效果超酷的好吗 💥

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 逛 sketchfab 网站的时候我看到有很多二维平面转 3D 的模型例子 ...

  5. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  6. 超酷的实时颜色数据跟踪javascript类库 - Tracking.js

    来源:GBin1.com 今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据. 这些数据包括了颜色或者是人, 这 ...

  7. 9款HTML5实现的超酷特效

    之前我们推荐了8款HTML5实现的特效和应用,今天我们带来的这9款热门的HTML5特效同样会带给你全新的视角和体验. HTML5是HTML的升级版,HTML5有两大特点:首先,强化了 Web 网页的表 ...

  8. jQuery超酷下拉插件6种效果演示

    原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...

  9. 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

    360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...

随机推荐

  1. NET::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)

    错误信息: NET::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) 错误背景:微服务不通过统一的nginx端口访问,能够正常请求接口并获取对应的响应.但是通过ngi ...

  2. python 登陆三次错误退出

    登陆出现三次错误,退出程序 1 #登陆 2 def Login(): 3 a = input() 4 if a == 'Kate': 5 b = input() 6 if b == '666666': ...

  3. C 和 C++ 打起来了！曾今最亲密的伙伴到现今的不爽？

    70年代初,贝尔实验室创建了C语言,它是开发UNIX的副产品.很快C就成为了最受欢迎的编程语言之一.但是对于Bjarne Stroustrup来说,C的表达能力还不够.于是,他在1983年的博士论文中 ...

  4. xshell多窗口同时执行输入命令

  5. fedora30平台安装docker 19.03

    一,下载docker 1,说明:docker的打包对于fedora的支持很及时, 所以在fedora 30/31上都可以直接使用官方的rpm包 下载地址: https://download.docke ...

  6. docker-docker-compose 安装

    1.安装docker-compose(官网:https://github.com/docker/compose/releases) 安装: curl -L https://github.com/doc ...

  7. ReSharper 注册码

    用户名:ronle 注册码:ZoJzmeVBoAv9Sskw76emgksMMFiLn4NM 原文地址:http://hi.baidu.com/ronle/item/a509b5f7b851971be ...

  8. 详解GaussDB(DWS) explain分布式执行计划

    摘要:本文主要介绍如何详细解读GaussDB(DWS)产生的分布式执行计划,从计划中发现性能调优点. 前言 执行计划(又称解释计划)是数据库执行SQL语句的具体步骤,例如通过索引还是全表扫描访问表中的 ...

  9. Helium文档2-WebUI自动化-常用方法介绍

    学习思路: 查看github项目的源码,每个方法都有介绍及使用说明 https://github.com/mherrmann/selenium-python-helium/blob/master/he ...

  10. 经典剪枝算法的例题——Sticks详细注释版

    这题听说是道十分经典的剪枝算的题目,不要问我剪枝是什么,我也不知道,反正我只知道用到了深度搜索 我参考了好多资料才悟懂,然后我发现网上的那些大神原理讲的很明白,但代码没多少注释,看的很懵X,于是我抄起 ...