零、寒暄

终于一个月可以更新两篇博客了，开心。昨天花了大概一天的时间玩了下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一个中文字符串，看下面代码：

var num=["零","一","二","三","四","五","六","七","八","九","十"];

    //将数字转化为对应的中文

    function numToCN(Num){

        var result="";

        if(Num<10){//小于10的数，直接从数组里面取出

            result=num[Num];

        }else{

            //拆分个位和十位

            ge=Num%10;

            shi=(Num-ge)/10;

            if(ge==0){

                //为了迎合中文的表述习惯，防止出现“一十”这样的表达，单独处理10->十，20->二十

                result=(shi==1?"":num[shi])+"十";

            }else{

                result=(shi==1?"":num[shi])+"十"+num[ge];

            }

        }

        return result;

    }

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

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

二、完整的代码

所有的css和js代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>中文时钟</title>

    <style>

    #clock{border:1px solid gray;margin:0 20%;padding:4px;text-align: center}

    span{color:red;margin:0 10px;}

    </style>

</head>

<body>

    <div>目的：实现一个中文时钟，如将2012.05.06 12:12:34显示为二零一二年五月六日十二点十二分三十四秒，精确到秒!</div>

    <br>

    <div id="clock"></div>

</body>

    <script>

    var num=["零","一","二","三","四","五","六","七","八","九","十"];

    //将数字转化为对应的中文

    function numToCN(Num){

        var result="";

        if(Num<10){//小于10的数，直接从数组里面取出

            result=num[Num];

        }else{

            //拆分个位和十位

            ge=Num%10;

            shi=(Num-ge)/10;

            if(ge==0){

                //为了迎合中文的表述习惯，防止出现“一十”这样的表达，单独处理10->十，20->二十

                result=(shi==1?"":num[shi])+"十";

            }else{

                result=(shi==1?"":num[shi])+"十"+num[ge];

            }

        }

        return result;

    }

    //得到年、月、日、时、分、秒

    function showNowDate(){

        var now=new Date();

        var Y=now.getFullYear().toString();

        var M=now.getMonth();

        var D=now.getDate();

        var H=now.getHours();

        var Min=now.getMinutes();

        var S=now.getSeconds();

        var initTime={

            showY:"",

            showM:0,

            shiwD:0,

            showH:0,

            showMin:0,

            showS:0

        };

        //年

        for(var i=0;i<Y.length;i++){

            initTime.showY+=num[Y.charAt(i)];

        }

        //月

        initTime.showM=numToCN(M+1);

        //日

        initTime.showD=numToCN(D);

        //时

        initTime.showH=numToCN(H);

        //分

        initTime.showMin=numToCN(Min);

        //秒

        initTime.showS=numToCN(S);

        return initTime;

    }

    //写入网页中

    function getCurDate(){

        var text=showNowDate();

        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>";

    }

    setInterval(getCurDate,1000);

</script></html>

三、总结

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

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

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

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

原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
原生JS实现动态时钟（优化）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
js实现中文简繁切换效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
圆盘时钟效果原生JS
圆盘时钟旋转时钟数字时钟写在前面仿荣耀手机时钟,设计的同款时钟效果实现效果实现原理数字时钟利用Date内置对象获取当下的时间,通过处理呈现在页面上这一步获取时间是非常简单的,通过Da ...
原生JS实战：分享一个首页进度加载动画！
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...
原生js dom记忆的内容
1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...
扩展原生js的一些方法
扩展原生js的Array类 Array.prototype.add = function(item){ this.push(item); } Array.prototype.addRange = fu ...
利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

随机推荐

HTML5+CSS3前端开发资源整合
HTML5+CSS3前端开发资源整合推个广告个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...
Ueditor防止代码自动清除
Ueditor功能真的很牛逼,可也有让人悲催的地方,尤其是自动清除代码,会将你默认的div标签改成p,挺让人闹心的,不过Ueditor的开发人员还是满热心的,搜遍网上无答案的时候,问了下他们,解决了 ...
appcan weixin 开发
登录微信开放平台:https://open.weixin.qq.com/ 管理中心,创建移动应用,ps:创建应用需要审核,其中应用包名需与在线打包安卓时候的自定义包名一致. 开放平台应用申请 ...
onActivityResult无法调用
最新项目中使用到了Fragment.在fragment中重载了onActivityResult方法,始终无法调用到. 大体是这样:选择图片的功能纠结了很久,能正常发送选择图片,但是选择后无法调用到on ...
ASP.NET MVC4学习笔记路由系统实现
一.路由实现路由系统实际是一个实现了ASP.NET IHttpModule接口的模块,通过注册HttpApplication的PostResolveRequestCache 事件对Url路由处理.总 ...
Telerik XML 数据源绑定的问题
Telerik GridView 默认的 XElement 数据源的直接绑定,会导致内置的sort, filter ,group等功能无法使用. 原因在于Telerik GridView的那些功能是根 ...
《Prism 5.0源码走读》Prism 5.0简介
Prism是一个开发和设计模块化WPF应用的基础框架,里面包含了MVVM pattern和设计示例.当前最新的版本是Prism 5.0,官方网站:https://compositewpf.codepl ...
Unity3d Shortcuts
参考:http://www.ceeger.com/Manual/ 场景视图导航 Click-drag to drag the camera around. 点击拖拽平移场景视图 Hold Alt a ...
bzoj 1862/1056 [HAOI2008]排名系统
原题链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1862 很恶心的一道题,我也不晓得自己是第几次写这题了%>_<%. 写了两种方 ...
集成友盟分享SDK报错
删除4.2.1版本的reference换成4.3版本运行报错解决办法:要将4.2.1版本的全部库文件物理删除,不要只删除reference.