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

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="zh-CN">
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.     <title>超酷时钟的制作</title>
  8.     <style>
  9.         .container {
  10.             text-align: center;
  11.             font-size: 28px;
  12.             color: #ccc;
  13.             background-color: #ccc;
  14.             text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
  15.         }
  16.         .container span{
  17.             text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
  18.         }
  19.     </style>
  20. </head>
  21.  
  22. <body>
  23.     <div class="container">
  24.         <p>超酷时钟</p>
  25.         <p><span class='year'>2012</span>年<span class='month'>09</span>月<span class='date'>02</span>日</p>
  26.         <p><span class='hours'>08</span>：<span class='minutes'>08</span>：<span class='seconds'>08</span>星期<span
  27.                 class='day'>日</span></p>
  28.     </div>
  29.     <script type="text/javascript">
  30.   //补充代码
  31.     </script>
  32. </body>
  33.  
  34. </html>

参考答案：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head lang="zh-CN">
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.     <title>数码时钟</title>
  8.     <style>
  9.         .container {
  10.             text-align: center;
  11.             font-size: 28px;
  12.             color: #ccc;
  13.             background-color: #ccc;
  14.             text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
  15.         }
  16.  
  17.         .container span {
  18.             text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
  19.         }
  20.     </style>
  21. </head>
  22.  
  23. <body>
  24.     <div class="container">
  25.         <p>超酷时钟</p>
  26.         <p><span class='year'>2012</span>年<span class='month'>09</span>月<span class='date'>02</span>日</p>
  27.         <p><span class='hours'>08</span>：<span class='minutes'>08</span>：<span class='seconds'>08</span>星期<span
  28.                 class='day'>日</span></p>
  29.     </div>
  30.     <script type="text/javascript">
  31.         window.onload = function () {
  32.             function byClass(arg) {
  33.                 return typeof (arg) === 'string' ? document.getElementsByClassName(arg)[0] : arg;
  34.             }
  35.             var oYear = byClass('year');
  36.             var oMonth = byClass('month');
  37.             var oDate = byClass('date');
  38.             var oHour = byClass('hours');
  39.             var oMinute = byClass('minutes');
  40.             var oSecond = byClass('seconds');
  41.             var oDay = byClass('day');
  42.             function toDuble(n) {
  43.                 if (n < 10) {
  44.                     return '0' + n;
  45.                 } else {
  46.                     return n;
  47.                 }
  48.  
  49.             }
  50.  
  51.             function getTime(arg) {
  52.                 var time = null;
  53.                 var oDate = new Date();
  54.                 switch (arg) {
  55.                     case 'year':
  56.                         time = oDate.getFullYear();
  57.                         break;
  58.                     case 'month':
  59.                         time = toDuble(oDate.getMonth() + 1);
  60.                         break;
  61.                     case 'date':
  62.                         time = toDuble(oDate.getDate());
  63.                         break;
  64.                     case 'hours':
  65.                         time = toDuble(oDate.getHours());
  66.                         break;
  67.                     case 'minutes':
  68.                         time = toDuble(oDate.getMinutes());
  69.                         break;
  70.                     case 'seconds':
  71.                         time = toDuble(oDate.getSeconds());
  72.                         break;
  73.                     case 'day':
  74.                         time = daySwith(oDate.getDay());
  75.                         break;
  76.                 }
  77.                 return time;
  78.             }
  79.  
  80.             function daySwith(arg) {
  81.                 var day = null;
  82.                 switch (arg) {
  83.                     case 0:
  84.                         day = '日';
  85.                         break;
  86.                     case 1:
  87.                         day = '一';
  88.                         break;
  89.                     case 2:
  90.                         day = '二';
  91.                         break;
  92.                     case 3:
  93.                         day = '三';
  94.                         break;
  95.                     case 4:
  96.                         day = '四';
  97.                         break;
  98.                     case 5:
  99.                         day = '五';
  100.                         break;
  101.                     case 6:
  102.                         day = '六';
  103.                         break;
  104.                     default:
  105.                         day = "出现bug";
  106.                 }
  107.                 return day;
  108.             }
  109.             function switchContent() {
  110.                 oYear.innerHTML = getTime('year');
  111.                 oMonth.innerHTML = getTime('month');
  112.                 oDate.innerHTML = getTime('date');
  113.                 oHour.innerHTML = getTime('hours');
  114.                 oMinute.innerHTML = getTime('minutes');
  115.                 oSecond.innerHTML = getTime('seconds');
  116.                 oDay.innerHTML = getTime('day');
  117.             }
  118.             setInterval(switchContent, 1000);
  119.             switchContent();
  120.         }
  121.     </script>
  122. </body>
  123.  
  124. </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. Flink深入浅出: 资源管理(v1.11)

    -- 图片来自 <国家地理中文网>-- 往期推荐: Flink深入浅出:部署模式 Flink深入浅出:内存模型 Flink深入浅出:JDBC Source从理论到实战 Flink深入浅出: ...

  2. 记录小坑-tp5 使用模型select查询

    场景: 使用模型去select查询后进行业务处理 再进行 saveAll 提示缺少更新条件 坑点:此时取出的数据结构是 query对象 { array:[ xxxx => xxx ] }: sa ...

  3. 微信小程序tabbar不显示2019.04.06

    app.json中pages的第一项必须在tabBar中,且这一项需要在pages的list中(与顺序无关)否则无法显示tabBar app.json中pages数组中第一项(首页),必须在tabBa ...

  4. 远程IO

    远程io 远程io ZLAN6842,ZLAN6844是8路远程O控制器.含有8路DI.8路DO,8路AI输入.其中DI支持干节点和湿节点,带光耦隔离:DO为继电器输出,具有5A 250VAC或5A ...

  5. 落地Azure CosmosDb的一个项目分享

    我们遇到了什么? 我们有这么一个业务场景,就是某供应商会去爬取某些数据,爬到后会发到一个FTP上,然后我们定时去获取这些数据 这个数据有大有小,小的30多M数据量百万级,大的数据量能到数百M上千万数据 ...

  6. spring boot:用dynamic-datasource-spring-boot-starter配置多数据源访问seata(seata 1.3.0 / spring boot 2.3.3)

    一,dynamic-datasource-spring-boot-starter的优势? 1,dynamic-datasource-spring-boot-starter 是一个基于springboo ...

  7. 3分钟学完Python，直接从入门到精通

    作为帅气小编,我已经把python一些模块的甩在这儿了qwq,只要你拿到这些干货,包你玩转python,直接冲向"大佬"的段位,如果已经学了C或者C++或者说如果你需要你的一段关键 ...

  8. 作用域 - Js深入理解笔记

    执行期上下文 当函数执行时,会创建一个称为执行上下文的内部对象 一个执行期上下文定义了一个函数所执行时的环境,函数每次执行时对应的执行上下文都是独一无二的,多次调用一个函数会导致创建多个执行上下文,当 ...

  9. win7下安装docker

    为了支持老版本的windows系统,docker官方提供了docker toolbox,让用户可以在windows10以前版本的操作系统上来体验docker. 一,安装 下载msi安装文件,一路nex ...

  10. ElasticSearch研究

    前言 ​ ES相关技术文档,很久之前看的,一门技术时间长不去研究就会容易忘了,应有些小伙伴的要求希望我做一期ES技术专栏,我就把以前看过的相关文档整理整理,给大家分享下. 1 ElasticSearc ...