原生js实现中文时钟
零、寒暄
终于一个月可以更新两篇博客了，开心。昨天花了大概一天的时间玩了下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中的事件（二），这个已经拖了很久了，近两天会更新。
原生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是轻量级的 ...
随机推荐
- 【Weblogic】--Weblogic的部署方式和缓存
参考网址: http://dead-knight.iteye.com/blog/1938882 Weblogic11g部署web应用,有三种方式,非常简单,但是很多新手部署总是出现若干错误,不知道如何 ...
- delphi 2010是动画GIF的支持方法
下面delphi 2010是动画GIF的支持方法: 1.在窗体上放一个Image1控件.注意:这时设置其Picture属性,加载一幅动画GIF是不会动画显示的. 2.在窗体的FormCreate事 ...
- Oracle 11g 之自动收集统计信息
在Oracle的11g版本中提供了统计数据自动收集的功能.在部署安装11g Oracle软件过程中,其中有一个步骤便是提示是否启动这个功能(默认是启用这个功能). 1.查看自动收集统计信息的任务及状态 ...
- C 的 一些写法格式 交流
好久以前刚开始学习前辈们的代码的时候,发现好多代码感到好奇怪. 1)代码看不懂 2)代码格式看不懂 网上也没见同学们分享.当自己代码写多了,也渐渐的理解为什么要这样写了. 说主题之前 还是 说一些 题 ...
- git的工作流程（分支合并）
git支持很多种工作流程,我们采用的一般是这样,远程创建一个主分支,本地每人创建功能分支,日常工作流程如下: 去自己的工作分支$ git checkout work 工作.... 提交工作分支的修改$ ...
- VPN错误800、错误789
VPN突然无法连接解决方法: 1. 单击“开始”,单击“运行”,键入“regedit”,然后单击“确定” 2. 找到下面的注册表子项,然后单击它:HKEY_LOCAL_MACHINE\System\C ...
- Windows Phone Emoji
今天基于项目的需要,研究了一下windows phone 8里面的Emoji实现.如果大家用过wp版本的微信或者qq,相比一定对它里面的表情符号影像深刻吧!是的,只要你细看一下,其实在微信里面包括两种 ...
- Qt：禁止qDebug的输出
Qt:禁止qDebug的输出 在工程的.pro文件里加上以下编译批令即可: DEFINES += QT_NO_DEBUG_OUTPUT
- [磁盘管理与分区]——关于分区、磁盘分区表、MBR
磁盘连接与设备文件名的关系 1. 如下图所示:
- Unity3D定制新建C#文件的头描述
1. 修改模板内容如下: MAC:Unity.app/Contents/Resources/ScriptTemplates/81-C# Script-NewBehaviourScript.cs.txt ...