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

<!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. shell-变量的数值运算符-计算双括号(())的使用

    1. 变量的数值计算 变量的数值计算常见的如下几个命令: (()).let.expr.bc.$[]  1) (())用法:(此法很常用,且效率高) 执行简单的整数运算,只需将特定的算术表达式用 &qu ...

  2. shell-的变量-全局变量

    shell变量基础及深入   1. 变量类型 变量可分为两类:环境变量(全局变量)和局部变量. 环境变量也可称为全局变量,可以在创建他们的shell及其派生出来的任意子进程shell中使用.局部变量只 ...

  3. Git 看这一篇就够了

    上一篇讲 Git 的文章发出来没想到效果特别好,很多读者都要求继续深入的写. 那今天齐姐简单讲下 Git 的实现原理,知其所以然才能知其然:并且梳理了日常最常用的 12 个命令,分为三大类分享给你. ...

  4. 52.Qt-Charts动态显示多条折线电压值(实现示波器效果)

    Qt 5.7过后Qt添加了官方的Chart库,之前就用的比较习惯,这次把源码发出来,给入门的同学们参考参考. 效果如下所示: 1.chartsView.h如下所示: #ifndef VIEW_H #d ...

  5. Verilog基础入门——Vivado流水灯工程（四）（实验报告）

    今日进行了数字逻辑实验,完成了一个最简单的FPGA设计,即流水灯设计. 此处记录我们的指导文件以及实验报告,同时记录遇到的问题及解决方法. 一.vivado工程源文件编写 counter.v文件 `t ...

  6. 【最大匹配+二分答案】POJ 3057 Evacuation

    题目大意 POJ链接 有一个\(X×Y\)的房间,X代表墙壁,D是门,.代表人.这个房间着火了,人要跑出去,但是每一个时间点只有一个人可以从门出去. 问最后一个人逃出去的最短时间,如果不能逃出去,输出 ...

  7. spring boot:thymeleaf给fragment传递参数的方法(spring boot 2.3.3)

    一,thymeleaf如何给fragment传递参数? 1,如果是全局的参数,可以用interceptor中传递 非全局参数,可以从controller中传递 2,引用片断时也可以传递参数 说明:刘宏 ...

  8. 【API管理 APIM】APIM中对后端API服务的DNS域名缓存问题

    问题描述 在使用API Management来进行API管理时,当我们后端的API DNS IP地址发生改变或者是API的域名发生改变后,通过APIM请求访问的还是是旧的域名或者IP地址,这是因API ...

  9. sentinel规则nacos持久化

    背景说明:生产环境中sentinel的使用应该是如下图所示: sentinel控制台编辑规则  推送到 nacos配置中心, 由nacos推送到应用,应用更新内存. 这样的话, 规则持久化在了naco ...

  10. git 团队协作的一些命令

    1.开分支 git branch 新分支名 例如,在master分支下,新开一个开发分支: git branch dev 2.切换到新分支 git checkout 分支名 例如,在master分支下 ...