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

<!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. 【小白学PyTorch】21 Keras的API详解（下）池化、Normalization层

    文章来自微信公众号:[机器学习炼丹术].作者WX:cyx645016617. 参考目录: 目录 1 池化层 1.1 最大池化层 1.2 平均池化层 1.3 全局最大池化层 1.4 全局平均池化层 2 ...

  2. 写了多年代码，你会 StackOverflow 吗

    写了多年代码,你会 StackOverflow 吗 Intro 准备写一个傻逼代码的系列文章,怎么写 StackOverflow 的代码,怎么写死锁代码,怎么写一个把 CPU 跑满,怎么写一个 Out ...

  3. 【8】进大厂必须掌握的面试题-Java面试-异常和线程

    Q1.错误和异常有什么区别? 错误是在运行时发生的不可恢复的情况.如OutOfMemory错误.这些JVM错误无法在运行时修复.尽管可以在catch块中捕获错误,但是应用程序的执行将停止并且无法恢复. ...

  4. spring-boot-route（二十）Spring Task实现简单定时任务

    Spring Task是Spring 3.0自带的定时任务,可以将它看作成一个轻量级的Quartz,功能虽然没有Quartz那样强大,但是使用起来非常简单,无需增加额外的依赖,可直接上手使用. 一 如 ...

  5. 2020年的UWP（2）——In Process App Service

    最早的时候App Service被定义为一种后台服务,类似于极简版的Windows Service.App Service作为Background Task在宿主UWP APP中运行,向其他UWP A ...

  6. 蒲公英 · JELLY技术周刊 Vol 27: 平平无奇 React 17

    蒲公英 · JELLY技术周刊 Vol.27 这个热闹的十月终于要走到尾声,React 17 历经 4 个 RC 版本之后,也于数天前正式发布了,而同在几天前发布的 CRA 4.0 也已经完成了 Re ...

  7. 【转】Liunx常用命令详解

    Liuux命令查询入口 Linux命令 - 系统信息 命令代码 注释说明 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 ...

  8. 【总结】springmvc

    一.springmvc 1.基本概念 springmvc属于三层架构(表现层,业务层,持久层)的表现层.mvc指model,view,controller.Model(模型) : 通常指的是数据模型 ...

  9. 【Flutter 1-5】运行Flutter的第一个项目——计数器

    创建项目 创建Flutter项目有很多种方法,各个IDE工具也都集成了创建Flutter项目的快捷操作.我们这里列举三种方式:使用命令行创建.使用Android Studio创建和使用VSCode创建 ...

  10. Windows Server 2019 在桌面图标

    直接按Win(键盘上的微软徽标键)+R,输入: rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0 回车 rundll32.exe shell32. ...