原生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中的事件(二),这个已经拖了很久了,近两天会更新。

时间: 2024-10-05 06:30:24

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

Java学习总计(二十六)——JavaScript正则表达式,Js表单验证,原生js+css页面时钟

一.JavaScript正则表达式1.exec检索字符串中指定的值,返回找到的值,并确定其位置2.test检索字符串中指定的值,返回true或false3.正则表达式对象的创建:(1)方式一:Var rgex=new RegExp("[0-9]","模式");(2)方式二:简便写法,用双斜杠//把正则表达式的内容括起来例1(正则创建,使用test()方法): <!DOCTYPE html> <html> <head> <me

原生js之canvas时钟组件

canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 canvas元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. canvas标签只是图形容器,您必须使用脚本来绘制图形. 浏览器支持 Internet Explorer 9.Firefox.Opera.Chrome 和 Safari 支持 那么本篇文章就通过一个时钟组件来熟悉使用一下关

原生JS实现动态时钟(优化)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <p id="num"></p> <a href="javascript:stop()">让时间停止吧</a> <a hr

原生js实现的3个小特效(时钟、轮播图、选项卡)

时钟: <p id="timeTxt"></p>  //将获取到的时间显示在timeTxt这里面        <button onclick="startTime()">关闭</button>        <!--时钟-->        function startTime(){  //创建startTime()函数            var today=new Date();  //定义一个对象

蓝鸥原生JS:js的引入方式及js的基本数据类型

蓝鸥原生JS:js的引入方式及js的基本数据类型 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 js的引入方式 在一对 script 标签中引入js代码 通过这种方式引入,可以把js代码和html代码写在同一个文件中,但是注意:最好把js代码写在body之后,文档的加载顺序是从上到下加载的,先把页面内容渲染出来,再加入用户交互,这样用户体验会大大加强. 示例代码: <html lang="en

扩展原生js的一些方法

扩展原生js的Array类 1 Array.prototype.add = function(item){ 2 this.push(item); 3 } 4 Array.prototype.addRange = function(items){ 5 var length = items.length; 6 if(length!=0){ 7 for (var index = 0; index < length; index++) { 8 this.push(items[index]); 9 10

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

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h

前端对base64编码的理解,原生js实现字符base64编码

目录 常见对base64的认知(不完全正确) 多问一个为什么,base64到底是个啥? 按照我们的思路实现一下 到这里基本就实现了,结果跟原生的方法打印的是一样的 下一次 @( 对于前端工程师来说base64图片编码到底是个什么玩意?) **** ---- 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有以下几点* base64是一种图片编码方式,用一长串超长的字符串表示图片 在加载的时候会直接以字符串的形式加载出来,减少了图片加载的http请求 正常加载服

小demo原生js同步翻译,可以玩玩儿

1. 背景: 平时不知道用js写什么练手,这里就写了一个类似百度翻译的小demo.大家可以平时没事儿了看看书,写写像这种类型的小demo,调用以下公开的api即可.对于学生党,能进入学校实验室做项目更好.进不去的,平时写写小demo练练也不差.(我为什么没在实验室) 2. demo前准备工作: 页面布局 了解百度翻译API,所需配置参数 准备 MD5.js 加密算法函数(百度自己搜) 写js代码 3. 步骤: 1. 页面布局: 布局就不说了,直接贴图上代码: 可进行语言切换 html代码: <!