零、寒暄

终于一个月可以更新两篇博客了,开心。昨天花了大概一天的时间玩了下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实现中文时钟的更多相关文章

  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. [原]打造Python开发环境之Python环境

    人生苦短,我用Python 一.升级到python2.7 开发环境的系统是centos 6.0, 默认的python版本是2.6.6, 由于线上环境是python2.7,为了防止版本差异产生的问题,所 ...

  2. Redis监控方案

    Redis 监控最直接的方法当然就是使用系统提供的 info 命令来做了,你只需要执行下面一条命令,就能获得 Redis 系统的状态报告. redis-cli info 内存使用 如果 Redis 使 ...

  3. 【PHP】文件上传限制

    上传文件,只判断后缀,貌似还不是很严谨; /** * 判断文件是否合法 * @param $files * @param $arrCode * @return number|boolean */ fu ...

  4. js根据日期获得星期

    var weekday = getWeekday('2013-9-26'); function getWeekday(sDate){ var dt = new Date(sDate.replace(/ ...

  5. ASP.NET MVC4学习笔记之Controller激活的扩展

    一. 为什么要进行扩展 在前面的分析中,我们知道默认的Controller激活系统只能实例化无参构造函数的Controller类型,但在某些情况一下,我们希望某些服务的实例能够自动注入到Control ...

  6. linux 命令 more

    more命令: 从前往后读取文件,启动时加载整个文件,让整个文件的内容从上到下显示在屏幕上. 可以逐页读取,空格(space):下一页,b键(back):上一页,而且还有搜索字符串的功能. more ...

  7. Android--启动拍照功能并返回结果

    因为没有深入学习拍照这块功能,所以只是简单的调用了一下系统的拍照功能,下面代码: //拍照的方法 private void openTakePhoto(){ /** * 在启动拍照之前最好先判断一下s ...

  8. .net 面试问题 汇总

    用.net做B/S结构的系统,您是用几层结构来开发,每一层之间的关系以及为什么要这样分层? 答: 从下至上分别为:数据访问层.业务逻辑层(又或成为领域层).表示层 数据访问层:有时候也称为是持久层,其 ...

  9. exception -----> Functions

    /* current_exception */ exception_ptr current_exception() noexcept; 返回指向当前异常(或其副本)的智能指针[具体返回对象本身还是副本 ...

  10. 快速生成R语言报告(markdown+Rstudio)

    先预览一下用Markdown写的报告[http://rpubs.com/loness/167347],这是HTML格式,你也可以导出Word.pdf,但是导出pdf时文中不能有中文,但是可以使用“pd ...