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

<!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. bash 在指定目录查找包含特定关键字的文件

    比如我们要在目录/usr/local/nginx/conf/vhost/下查找baidu.com这个关键字的文件 方法1: find /usr/local/nginx/conf/vhost/ -exe ...

  2. Swoole实时任务异步调用Demo

    server.php <?php class Server { private $serv; private $logFilePath = "/data/wwwroot/houtai/ ...

  3. 网站搭建-云服务器ECS的使用

    1. 查看购买的云服务器实例,重置密码 2. 查找IP进行查看,此时网页时不存在的,开始配置: 3. 登录putty或其他终端,进行网页搭建,先按教程走一遍,然后再做个性化处理: #安装Apache ...

  4. python的PEP8代码规范

    一.缩进:每级缩进用4个空格.如果缩进不正确或缩进格式不统一,一般错误信息会明确告诉你,但有时也会出现invalid syntax报错.所谓缩进不正确,python的缩进是四个空格或一个TAB,如果缩 ...

  5. 在Jenkins容器中安装docker-compose

    首先使用Docker容器安装Jenkins 链接参考 安装成功后使用管理员权限进入到Jenkins容器 docker exec -it -u root jenkins bash 下载docker-co ...

  6. allure安装

    allure是一个通用的测试报告框架 下载地址:http://allure.qatools.ru/ 第一步:进入该页面,右上角有个download,点击进入github页面,选择最新版本下载到某个路径 ...

  7. CVE-2009-0927-Adobe Reader缓冲区溢出漏洞分析

    0x00概述: 此漏洞的成因是由于Adobe Reader在处理PDF文档中所包含的JavaScript脚本时的Collab对象的getlcon()方式不正确处理输入的参数,而产生的缓冲区溢出,成功利 ...

  8. 框架-设备与驱动的拆分及实现-I2C

    目录 前言 笔录草稿 概要 原理及实现方法 IIC 例子实战-驱动 1. 创建文件 2. 创建 I2C 驱动名字列表 3. 组建 I2C 驱动结构体 4. 编写-注册 I2C 驱动函数 5. 创建 I ...

  9. 笔趣阁小说 selenium爬取

    import re from time import sleep from lxml import etree from selenium import webdriver options = web ...

  10. stm32与红外遥控器(NEC协议)

    1.器件简介 本次测试采用R903V1红外接收头与NEC协议的红外遥控器,接收头原理图如下: 器件的供电电压VCC在2.7V~5.5V之间,输出电压VOUT正常在0.2v ~(VCC-0.3±0.2) ...