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

<!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. 多测师_讲解python__004 函数

    # 函数:一个工具,随调随用# 降级代码冗余## 增加代码的复用性,提高开发效率,为了不成为cv战士## 提高程序扩展性## 函数有两个阶段:定义阶段,调用阶段.## 定义时:只检查函数体内代码语法, ...

  2. ASP.Net Core3.1 生成二维码填坑

    ASP.Net Core3.1 使用QrCode生成二维码 部署到Linux报错 The type initializer for 'System.DrawingCore.GDIPlus' threw ...

  3. 苏州6617.9373(薇)xiaojie:苏州哪里有xiaomei

    苏州哪里有小姐服务大保健[微信:6617.9373倩儿小妹[苏州叫小姐服务√o服务微信:6617.9373倩儿小妹[苏州叫小姐服务][十微信:6617.9373倩儿小妹][苏州叫小姐包夜服务][十微信 ...

  4. 什么是C和C++标准——小白必看

    本文简要介绍编写C/C ++应用程序的领域,标准库的作用以及它是如何在各种操作系统中实现的. 我已经接触C++一段时间了,一开始就让我感到疑惑的是其内部结构:我所使用的内核函数和类从何而来? 谁发明了 ...

  5. 数据库备份作业的T-SQL语句

    1.关于大容量数据导入导出的一些方法SQL SERVER提供多种工具用于各种数据源的数据导入导出,这些数据源包括本文文件.ODBC数据源.OLE DB数据源.ASCII文本文件和EXCEL电子表格.2 ...

  6. MySQL历史

    MySQL历史 马云生气了 去IOE活动 1979年 研发一个引擎 1996年 发布MySQL1.0 1999年 瑞典注册AB公司 2003年 MySQL 5.0版本 提供试图.存储过程 具有了一些企 ...

  7. 大白话聊OSI七层模型和TCP/IP四层模型

    前言 今天和大家聊的是一个比较基础的问题,OSI七层模型和TCP/IP四层模型. 小伙伴们可能有疑问,这个东西还用写文章吗,太基础了吧,网上文章多的是,随便一搜索就能找到. 确实是这样,网上资料确实很 ...

  8. Paillier同态加密的介绍以及c++实现

    我们先来简短认识一下Paillier同态加密算法: 如果就这么按照定义来用最简朴的c++程序写 就像这样: #include <iostream> #include <math.h& ...

  9. Promise 配合 axios 使用

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法 很细致的Promise使用详解 自己脑补 vue 工程化的 ...

  10. 备战noip week8

    POJ1144 网络 description: 给出一张\(N\)个点的无向图,求其中割点的个数 data range: \(N\le 100\) solution: 一道模板题(但是读入实在是把我恶 ...