零、寒暄

终于一个月可以更新两篇博客了，开心。昨天花了大概一天的时间玩了下github，基本的clone和push都搞定了，如果有和我一样的新手没调通的，大家可以交流。

另外，说个题外话，大家发现我的博客右上角多了一个“Fork me  on GitHub”,瞬间B格提升了许多，哈哈。咋搞的，其实很简单，简要的说下：

（1）进入github官方博客，链接在这里，手动链接：https://github.com/blog/273-github-ribbons，选择一个你喜欢的样式，比如我这个：

大家把you换成你自己的GitHub账号就行。

（2）进入自己的博客园“设置”，里面有一个“首页HTML代码”，把github中的这段内容完全复制进去即可。ok，刷新自己的博客，B格瞬间提升。

一、实现思路

好了，来到正题。实现中文时钟的主要步骤如下：

（1）获得相应的年、月、日.....js里面都有相应的API,这里就不多说了。需要注意一点的就是月份是比实际情况小1的，就是说1月返回的是0.

　　  另外，这些API返回的值均是number类型，如果你想用slice等函数，需要toString一下，我这里没有用到这个方法。

（2）初始化一个数组，里面提供给了我需要的中文：零、一、二、三...,以后需要中文的时候，找到相应的下标，取出即可

（3）将相应的年月日转化为中文，就是说提供一个函数，传进去数值，return一个中文字符串，看下面代码：

  1. var num=["零","一","二","三","四","五","六","七","八","九","十"];
  2.     //将数字转化为对应的中文
  3.     function numToCN(Num){
  4.         var result="";
  5.         if(Num<10){//小于10的数，直接从数组里面取出
  6.             result=num[Num];
  7.         }else{
  8.             //拆分个位和十位
  9.             ge=Num%10;
  10.             shi=(Num-ge)/10;
  11.             if(ge==0){
  12.                 //为了迎合中文的表述习惯，防止出现“一十”这样的表达，单独处理10->十，20->二十
  13.                 result=(shi==1?"":num[shi])+"十";
  14.             }else{
  15.                 result=(shi==1?"":num[shi])+"十"+num[ge];
  16.             }
  17.         }
  18.         return result;
  19.     }

由于时间中，我对年份单独处理，这里只可能涉及到2位的数字。另外拆分的时候，我没有用字符串截取的方法，因为我觉得这样计算来的更快更简洁。

（4）利用定时器，每1s钟取一次数据。

二、完整的代码

所有的css和js代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>中文时钟</title>
  6.     <style>
  7.     #clock{border:1px solid gray;margin:0 20%;padding:4px;text-align: center}
  8.     span{color:red;margin:0 10px;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <div>目的：实现一个中文时钟，如将2012.05.06 12:12:34显示为二零一二年五月六日十二点十二分三十四秒，精确到秒!</div>
  13.     <br>
  14.     <div id="clock"></div>
  15. </body>
  16.     <script>
  17.     var num=["零","一","二","三","四","五","六","七","八","九","十"];
  18.     //将数字转化为对应的中文
  19.     function numToCN(Num){
  20.         var result="";
  21.         if(Num<10){//小于10的数，直接从数组里面取出
  22.             result=num[Num];
  23.         }else{
  24.             //拆分个位和十位
  25.             ge=Num%10;
  26.             shi=(Num-ge)/10;
  27.             if(ge==0){
  28.                 //为了迎合中文的表述习惯，防止出现“一十”这样的表达，单独处理10->十，20->二十
  29.                 result=(shi==1?"":num[shi])+"十";
  30.             }else{
  31.                 result=(shi==1?"":num[shi])+"十"+num[ge];
  32.             }
  33.         }
  34.         return result;
  35.     }
  36.     //得到年、月、日、时、分、秒
  37.     function showNowDate(){
  38.         var now=new Date();
  39.         var Y=now.getFullYear().toString();
  40.         var M=now.getMonth();
  41.         var D=now.getDate();
  42.         var H=now.getHours();
  43.         var Min=now.getMinutes();
  44.         var S=now.getSeconds();
  45.  
  46.         var initTime={
  47.             showY:"",
  48.             showM:0,
  49.             shiwD:0,
  50.             showH:0,
  51.             showMin:0,
  52.             showS:0
  53.         };
  54.         //年
  55.         for(var i=0;i<Y.length;i++){
  56.             initTime.showY+=num[Y.charAt(i)];
  57.         }
  58.         //月
  59.         initTime.showM=numToCN(M+1);
  60.         //日
  61.         initTime.showD=numToCN(D);
  62.         //时
  63.         initTime.showH=numToCN(H);
  64.         //分
  65.         initTime.showMin=numToCN(Min);
  66.         //秒
  67.         initTime.showS=numToCN(S);
  68.         return initTime;
  69.     }
  70.     //写入网页中
  71.     function getCurDate(){
  72.         var text=showNowDate();
  73.         document.getElementById("clock").innerHTML=text.showY+"<span>年</span>"+text.showM+"<span>月</span>"+text.showD+"<span>日</span>"+text.showH+"<span>时</span>"+text.showMin+"<span>分</span>"+text.showS+"<span>秒</span>";
  74.     }
  75.     setInterval(getCurDate,1000);
  76. </script></html>

三、总结

其实这个方法还是蛮简单的，自己是新手，保持每天写代码的习惯，把这些代码贴出来，希望各位能给些建议，包括代码重构等等。如果文中有错误的地方，欢迎指正！

下期预告：js中的事件（二），这个已经拖了很久了，近两天会更新。

此文章发布在本人博客园rookiebob，如需转载本文，请务必注明来源： http://www.cnblogs.com/rookiebob/，有些勘误我会及时更正，为了避免对您的误解，请访问原文！

原生js实现中文时钟的更多相关文章

  1. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  2. 原生JS实现动态时钟（优化）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. js实现中文简繁切换效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

  5. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  6. 原生js dom记忆的内容

    1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...

  7. 扩展原生js的一些方法

    扩展原生js的Array类 Array.prototype.add = function(item){ this.push(item); } Array.prototype.addRange = fu ...

  8. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  9. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

随机推荐

  1. int 类型 占多少字节是由什么决定的

    int 类型占据多少字节?到底是跟编译器有关?还是系统来决定的? 1. CPU的设计者才不管你在上面跑什么程序.他们只是按着他们的想法来设计.而int的大小,至少在C/C++中,标准只说可以由实现者自 ...

  2. 解决Genymotion下载设备失败的方法（Connection Timeout）

    一直下载不下来,报错. 解决办法: 打开 C:\Users\用户名\AppData\Local\Genymobile目录 打开genymotion.log文件,在里面最下面几行,找到如下日志 [Deb ...

  3. C++文件操作(输入输出、格式控制、文件打开模式、测试流状态、二进制读写)

    1.向文件写数据 头文件#include <ofstream> ①Create an instance of ofstream(创建ofstream实例) ②Open the file w ...

  4. Python核心编程--学习笔记--7--字典和集合

    本章介绍Python语言中的映射类型(字典)和集合类型,包括操作符.工厂函数.内建函数与方法. 1 字典 字典是Python中唯一的映射类型——键key直接映射到值value.字典是容器类型,其对象是 ...

  5. cygwin

    setup-x86_64 -q -P wget,tar,qawk,bzip2,subversion,vim wget rawgit.com/transcode-open/apt-cyg/master/ ...

  6. XAML(2) - 依赖属性

    3.依赖属性 在用WPF编程时,常常会遇到"依赖属性"这个术语.WPF元素是带有方法,属性和事件的类.WPF元素的几乎每个属性都是依赖属性, 这是什么意思?依赖属性可以依赖其他输入 ...

  7. OC编写使用调试器

    OC编写使用调试器 编写代码免不了,Bug.那么Debug就是程序员的必备技能了.本文和大家一起探讨,如何在应用开发编写代码过程中,使用日志项消息:以及使用动作.条件.迭代控制增强断点. 记录信息 在 ...

  8. 【转】Hibernate入门实例

    1. 环境配置 1.1 hiberante环境配置 hibernate可实现面向对象的数据存储.hibernate的官网:http://hibernate.org/ 官网上选择hibernate OR ...

  9. 博客导出工具(C++实现,支持sina,csdn,自定义列表)

    操作系统:windowAll 编程工具:visual studio 2013 编程语言:VC++ 最近博文更新的较频繁,为了防止账号异常引起csdn博文丢失,所以花了点时间做了个小工具来导出博文,用做 ...

  10. 创建自己的oracle解释计划

    1.解释计划 当使用explain plan来为一个查询生成预期的执行计划时,输出将包括一下几种: SQL访问的每一张表: 访问每张表的方法: 每一个需要联结的数据源所使用的联结方法: 按次序列出的所 ...